ESPN color palette
EntertainmentESPN's color identity is bold and instantly recognizable, centered around its signature red and a palette of strong neutrals for clarity and impact. The brand uses a minimalistic approach, relying on red, black, and white for maximum contrast and legibility.
espn.comESPN colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- ESPN RedPrimary204, 0, 0
- ESPN WhiteSecondary255, 255, 255
- ESPN BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- ESPN Light GrayBackground245, 245, 245
- ESPN Surface GraySurface229, 229, 229
- ESPN Border GrayBorder209, 209, 209
Text
Three tiers of copy.- ESPN Text BlackText17, 17, 17
- ESPN Text GraySecondary text102, 102, 102
- ESPN Muted GrayMuted text167, 167, 167
Semantic
Feedback and state colors.- ESPN Success GreenSuccess46, 139, 87
- ESPN Warning YellowWarning255, 180, 0
- ESPN Error RedError208, 2, 27
- ESPN Info BlueInfo0, 114, 206
Use ESPN's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
espn-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D0021B;
--accent: #000000;
--border: #D1D1D1;
--primary: #CC0000;
--success: #2E8B57;
--surface: #E5E5E5;
--warning: #FFB400;
--secondary: #FFFFFF;
--text-muted: #A7A7A7;
--background: #F5F5F5;
--text-primary: #111111;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
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
ESPN gray and neutral colors
The quiet part of the ESPN palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- ESPN Light GrayBackground
- HEX
- RGB
- HSL
- ESPN Surface GraySurface
- HEX
- RGB
- HSL
- ESPN Border GrayBorder
- HEX
- RGB
- HSL
- ESPN Text BlackText
- HEX
- RGB
- HSL
- ESPN Text GraySecondary text
- HEX
- RGB
- HSL
- ESPN Muted GrayMuted text
- HEX
- RGB
- HSL
About ESPN's colors
ESPN's palette is built around a vibrant red, supported by high-contrast neutrals for clarity and directness. The minimal use of color reinforces the brand's bold, energetic identity.
Red is paired with white and black for maximum impact.
Neutral grays provide structure and hierarchy.
Accent colors are used sparingly for status and alerts.
Psychology
Red conveys energy, excitement, and urgency, aligning with ESPN's sports focus. Black and white provide authority and clarity, ensuring content is easy to read.
Evolution
ESPN's palette has remained consistent since its inception, with red always at the center. Minor adjustments to gray tones have occurred to modernize the UI, but the core colors are unchanged.
Where ESPN uses each color
- Primary
ESPN Red is used in the logo, primary navigation highlights, and key call-to-action buttons.
- Secondary
ESPN White is the main background for content areas and forms.
- Accent
ESPN Black is used for headers, footers, and strong text elements.
- Backgrounds
ESPN Light Gray and Surface Gray are used for app backgrounds and card surfaces.
- Text
Text Black and Text Gray are used for primary and secondary text throughout the site.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
ESPN color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official ESPN brand color hex code is #CC0000, known as ESPN Red.
ESPN Red (#CC0000) in RGB is (204, 0, 0) and in CMYK is (0, 100, 100, 20).
ESPN uses Light Gray (#F5F5F5), Surface Gray (#E5E5E5), Border Gray (#D1D1D1), Text Gray (#666666), and Muted Gray (#A7A7A7) for backgrounds, surfaces, and text.
Use ESPN Red (#CC0000) for primary actions and branding, with white and black for backgrounds and text. Grays structure the UI, and semantic colors are reserved for status and alerts.
The secondary color is ESPN White, #FFFFFF, and the accent is ESPN Black, #000000. Together with the primary they make up the three brand colors at the top of this page.
4 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 ESPN's colors consistently when it generates UI.
Make something in the spirit of ESPN
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.