Call of Duty color palette
GamingCall of Duty's color identity is built around a stark, high-contrast palette of black, white, and military-inspired grays, reflecting its gritty, realistic shooter theme. The brand's primary color is a deep black, with white and steel gray used for contrast and clarity.
callofduty.comCall of Duty colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Call of Duty BlackPrimary0, 0, 0
- Call of Duty WhiteSecondary255, 255, 255
- COD Steel GrayAccent196, 196, 196
Surfaces
Page, cards and dividers.- COD Dark BackgroundBackground24, 24, 24
- COD Panel GraySurface35, 35, 35
- COD Border GrayBorder58, 58, 58
Text
Three tiers of copy.- COD Primary TextText255, 255, 255
- COD Secondary TextSecondary text196, 196, 196
- COD Muted TextMuted text122, 122, 122
Semantic
Feedback and state colors.- COD Success GreenSuccess107, 191, 71
- COD Warning YellowWarning255, 194, 14
- COD Error RedError215, 38, 61
- COD Info BlueInfo58, 154, 217
Use Call of Duty's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
call-of-duty-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A9AD9;
--error: #D7263D;
--accent: #C4C4C4;
--border: #3A3A3A;
--primary: #000000;
--success: #6BBF47;
--surface: #232323;
--warning: #FFC20E;
--secondary: #FFFFFF;
--text-muted: #7A7A7A;
--background: #181818;
--text-primary: #FFFFFF;
--text-secondary: #C4C4C4;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
10.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.0:1
Pass
Muted text on background
Needs 3:1 for large text
4.1:1
Pass
Muted text on surface
Needs 3:1 for large text
3.7:1
Pass
Call of Duty gray, dark and neutral colors
Call of Duty runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- COD Dark BackgroundBackground
- HEX
- RGB
- HSL
- COD Panel GraySurface
- HEX
- RGB
- HSL
- COD Border GrayBorder
- HEX
- RGB
- HSL
- COD Primary TextText
- HEX
- RGB
- HSL
- COD Secondary TextSecondary text
- HEX
- RGB
- HSL
- COD Muted TextMuted text
- HEX
- RGB
- HSL
About Call of Duty's colors
Call of Duty's palette is dominated by monochromatic blacks, whites, and grays, evoking a modern military aesthetic. Accent colors are used sparingly for status indicators and UI clarity.
High contrast between black and white for readability.
Grays unify interface elements and backgrounds.
Accent colors highlight critical game states.
Psychology
The black and gray tones convey seriousness, realism, and intensity, aligning with the franchise's mature themes. Sparse use of color draws attention to important information without distraction.
Evolution
The core black, white, and gray palette has remained consistent since the franchise's inception. Occasional accent colors have been introduced for UI clarity, but the main colors have not changed.
Where Call of Duty uses each color
- Primary
Used for the Call of Duty logo, main navigation bars, and backgrounds.
- Secondary
Applied to text, icons, and highlights for strong contrast against dark backgrounds.
- Accent
Used for UI highlights, hover states, and subtle interface elements.
- Backgrounds
Dark grays and black dominate website and launcher backgrounds.
- Text
White and light gray are used for primary and secondary text across all digital platforms.
- Semantic
Green, yellow, red, and blue accents indicate success, warnings, errors, and informational states in menus and HUDs.
Call of Duty color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Call of Duty brand color is black, with the official hex code #000000.
Call of Duty Black is RGB(0, 0, 0) and CMYK(0, 0, 0, 100), corresponding to hex #000000.
Call of Duty uses a range of grays, including #181818 for backgrounds, #232323 for surfaces, #3A3A3A for borders, and #C4C4C4 for secondary text and accents.
Use black (#000000) and dark grays for backgrounds and navigation, with white (#FFFFFF) and steel gray (#C4C4C4) for text and highlights. Reserve accent colors for semantic UI states and avoid overuse to maintain the brand's serious tone.
The secondary color is Call of Duty White, #FFFFFF, and the accent is COD Steel Gray, #C4C4C4. 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 Call of Duty's colors consistently when it generates UI.
Make something in the spirit of Call of Duty
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.