Kansas City Chiefs color palette
SportsThe Kansas City Chiefs use a bold, high-contrast palette centered on red and gold, reflecting their energetic and iconic NFL identity. Their color system is immediately recognizable and consistent across digital and physical assets.
chiefs.comKansas City Chiefs colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Chiefs RedPrimary227, 24, 55
- Chiefs GoldSecondary255, 184, 28
- Chiefs WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Chiefs Light GrayBackground246, 246, 246
- Chiefs Surface GraySurface240, 241, 242
- Chiefs Border GrayBorder196, 196, 196
Text
Three tiers of copy.- Chiefs BlackText26, 26, 26
- Chiefs Dark GraySecondary text84, 84, 84
- Chiefs Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Chiefs Sideline GreenSuccess0, 133, 66
- Chiefs GoldWarning255, 184, 28
- Chiefs RedError227, 24, 55
- Chiefs Blue AccentInfo0, 90, 139
Use Kansas City Chiefs's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
kansas-city-chiefs-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #005A8B;
--error: #E31837;
--accent: #FFFFFF;
--border: #C4C4C4;
--primary: #E31837;
--success: #008542;
--surface: #F0F1F2;
--warning: #FFB81C;
--secondary: #FFB81C;
--text-muted: #888888;
--background: #F6F6F6;
--text-primary: #1A1A1A;
--text-secondary: #545454;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Kansas City Chiefs gray and neutral colors
The quiet part of the Kansas City Chiefs palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Chiefs Light GrayBackground
- HEX
- RGB
- HSL
- Chiefs Surface GraySurface
- HEX
- RGB
- HSL
- Chiefs Border GrayBorder
- HEX
- RGB
- HSL
- Chiefs BlackText
- HEX
- RGB
- HSL
- Chiefs Dark GraySecondary text
- HEX
- RGB
- HSL
- Chiefs Muted GrayMuted text
- HEX
- RGB
- HSL
About Kansas City Chiefs's colors
The Chiefs' palette is dominated by a vibrant red and gold, supported by neutral grays and white for clarity and contrast. This combination ensures high visibility and strong brand recognition.
Primary red and gold are complementary and create visual energy.
White and grays provide balance and legibility.
Accent blue and green are rarely used, reserved for specific contexts.
Psychology
Red conveys energy, passion, and action, fitting for an NFL team. Gold adds a sense of prestige and warmth.
Evolution
The Chiefs' color palette has remained virtually unchanged since the team's inception, maintaining a classic and consistent identity. Minor updates have refined the exact shades for digital and print accuracy.
Where Kansas City Chiefs uses each color
- Primary
Chiefs Red is used for jerseys, helmets, primary buttons, and key website elements.
- Secondary
Chiefs Gold appears in logos, jersey accents, call-to-action highlights, and banners.
- Accent
Chiefs White is used for backgrounds, numbers on uniforms, and text contrast.
- Backgrounds
Chiefs Light Gray and Surface Gray are used for website backgrounds and UI panels.
- Text
Chiefs Black and Dark Gray are used for primary and secondary text on digital platforms.
- Semantic
Sideline Green, Gold, and Red are used for status indicators, alerts, and highlights.
Kansas City Chiefs color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Kansas City Chiefs primary brand color is Chiefs Red, hex code #E31837.
Chiefs Red (#E31837) is RGB(227, 24, 55) and CMYK(0, 100, 81, 4).
The Chiefs use Chiefs Light Gray (#F6F6F6), Surface Gray (#F0F1F2), Border Gray (#C4C4C4), and text grays like Chiefs Black (#1A1A1A) and Chiefs Muted Gray (#888888) in their UI and backgrounds.
Use Chiefs Red (#E31837) for primary actions and branding, Chiefs Gold (#FFB81C) for highlights, and neutrals for backgrounds and text. Maintain strong contrast for legibility and follow official guidelines for digital or print applications.
The secondary color is Chiefs Gold, #FFB81C, and the accent is Chiefs White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Kansas City Chiefs's colors consistently when it generates UI.
Make something in the spirit of Kansas City Chiefs
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.