MLB color palette
SportsMLB's color identity is defined by a deep navy blue, accented by red and white, reflecting its American heritage and tradition. The palette is consistent across digital, print, and on-field applications.
mlb.comMLB colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- MLB Navy BluePrimary4, 30, 66
- MLB RedSecondary186, 12, 47
- MLB WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- MLB Light GrayBackground245, 246, 250
- MLB Surface GraySurface229, 230, 234
- MLB Border GrayBorder196, 198, 204
Text
Three tiers of copy.- MLB Navy TextText4, 30, 66
- MLB Secondary GraySecondary text108, 112, 122
- MLB Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- MLB Success GreenSuccess0, 132, 61
- MLB Warning YellowWarning255, 184, 28
- MLB Error RedError186, 12, 47
- MLB Info BlueInfo0, 114, 206
Use MLB's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mlb-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #BA0C2F;
--accent: #FFFFFF;
--border: #C4C6CC;
--primary: #041E42;
--success: #00843D;
--surface: #E5E6EA;
--warning: #FFB81C;
--secondary: #BA0C2F;
--text-muted: #A7A9AC;
--background: #F5F6FA;
--text-primary: #041E42;
--text-secondary: #6C707A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.3:1
Pass
Text on surface
Needs 4.5:1 for body text
13.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.0:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
MLB background, border and text colors
The quiet part of the MLB palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- MLB Light GrayBackground
- HEX
- RGB
- HSL
- MLB Surface GraySurface
- HEX
- RGB
- HSL
- MLB Border GrayBorder
- HEX
- RGB
- HSL
- MLB Navy TextText
- HEX
- RGB
- HSL
- MLB Secondary GraySecondary text
- HEX
- RGB
- HSL
- MLB Muted GrayMuted text
- HEX
- RGB
- HSL
About MLB's colors
MLB's palette is built on a classic triad of navy, red, and white, evoking tradition and clarity. The supporting grays provide a neutral foundation for digital and print environments.
Primary navy is contrasted by vibrant red accents.
White is used for clarity and separation.
Grays support UI elements and backgrounds.
Psychology
Navy blue conveys trust, authority, and stability, aligning with MLB's legacy. Red adds energy and excitement, while white ensures readability and balance.
Evolution
MLB's core colors have remained consistent for decades, reinforcing brand recognition. The introduction of modern grays and UI tones has adapted the palette for digital use.
Where MLB uses each color
- Primary
Used for the MLB logo, navigation bars, and primary buttons.
- Secondary
Appears in call-to-action buttons, highlights, and logo details.
- Accent
Used for backgrounds, text, and as a contrast in the logo.
- Backgrounds
Light gray backgrounds are used in web and app interfaces.
- Text
Navy and gray tones are used for primary and secondary text throughout MLB's digital platforms.
- Semantic
Green, yellow, and red are used for status indicators and alerts in digital products.
MLB color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official MLB primary color is MLB Navy Blue, with the hex code #041E42.
MLB Navy Blue (#041E42) is RGB(4, 30, 66) and CMYK(100, 90, 13, 68).
MLB uses several grays: MLB Light Gray (#F5F6FA), MLB Surface Gray (#E5E6EA), MLB Border Gray (#C4C6CC), and MLB Secondary Gray (#6C707A) for backgrounds, surfaces, and text.
Use MLB Navy Blue (#041E42) for primary elements, MLB Red (#BA0C2F) for accents and calls to action, and the gray tones for backgrounds and supporting UI. Maintain strong contrast for accessibility and brand consistency.
The secondary color is MLB Red, #BA0C2F, and the accent is MLB White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
3 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies MLB's colors consistently when it generates UI.
Make something in the spirit of MLB
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.