NFL color palette
SportsThe NFL's color identity is built around a strong, patriotic palette featuring deep blue, vibrant red, and crisp white, reflecting its American heritage. The brand uses these colors consistently across its digital and physical assets.
nfl.comNFL colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NFL BluePrimary1, 51, 105
- NFL RedSecondary213, 10, 10
- NFL WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- NFL Light GrayBackground245, 245, 245
- NFL Surface GraySurface229, 229, 229
- NFL Border GrayBorder204, 204, 204
Text
Three tiers of copy.- NFL CharcoalText34, 34, 34
- NFL Medium GraySecondary text102, 102, 102
- NFL Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- NFL GreenSuccess0, 135, 75
- NFL YellowWarning255, 184, 28
- NFL RedError213, 10, 10
- NFL Info BlueInfo0, 90, 139
Use NFL's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nfl-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #005A8B;
--error: #D50A0A;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #013369;
--success: #00874B;
--surface: #E5E5E5;
--warning: #FFB81C;
--secondary: #D50A0A;
--text-muted: #999999;
--background: #F5F5F5;
--text-primary: #222222;
--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
14.6:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6: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.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
NFL gray and neutral colors
The quiet part of the NFL palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NFL Light GrayBackground
- HEX
- RGB
- HSL
- NFL Surface GraySurface
- HEX
- RGB
- HSL
- NFL Border GrayBorder
- HEX
- RGB
- HSL
- NFL CharcoalText
- HEX
- RGB
- HSL
- NFL Medium GraySecondary text
- HEX
- RGB
- HSL
- NFL Muted GrayMuted text
- HEX
- RGB
- HSL
About NFL's colors
The NFL color palette is rooted in the American flag, using blue, red, and white as core elements. Neutral grays provide balance and clarity for digital interfaces.
Primary blue and red are complementary and evoke patriotism.
White is used for contrast and clarity.
Grays support legibility and modern UI design.
Psychology
Blue conveys trust, authority, and tradition, while red adds energy and excitement. The palette is designed to feel both classic and bold, reinforcing the NFL's legacy.
Evolution
The NFL's core palette has remained stable for decades, with minor adjustments to blue and red for digital consistency. Neutral grays have been added more recently to support modern web and app interfaces.
Where NFL uses each color
- Primary
NFL Blue is used in the logo, navigation bars, and key call-to-action buttons.
- Secondary
NFL Red highlights important elements such as alerts and secondary buttons.
- Accent
NFL White is used for backgrounds, text, and logo elements.
- Backgrounds
NFL Light Gray is used as the main page background on the website and apps.
- Text
NFL Charcoal and Medium Gray are used for primary and secondary text throughout digital products.
- Semantic
NFL Green, Yellow, and Red are used for status indicators such as success, warning, and error messages.
NFL color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official NFL primary brand color is NFL Blue, hex code #013369. This color is used prominently in the logo and across digital assets.
NFL Blue (#013369) has an RGB value of (1, 51, 105) and a CMYK value of (100, 51, 0, 59). These values ensure color consistency across print and digital media.
The NFL uses several grays for UI: NFL Light Gray (#F5F5F5) for backgrounds, NFL Surface Gray (#E5E5E5) for surfaces, and NFL Border Gray (#CCCCCC) for borders and dividers.
NFL Blue (#013369) should be dominant, with NFL Red (#D50A0A) as an accent and NFL White (#FFFFFF) for contrast. Grays and semantic colors support UI clarity and accessibility.
The secondary color is NFL Red, #D50A0A, and the accent is NFL White, #FFFFFF. 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 NFL's colors consistently when it generates UI.
Make something in the spirit of NFL
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.