Overwatch color palette
GamingOverwatch's color identity is defined by a bold orange and black palette, reflecting its energetic and competitive gaming environment. The colors are used consistently across its game UI, promotional materials, and esports branding.
playoverwatch.comOverwatch colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Overwatch OrangePrimary253, 186, 33
- Overwatch BlackSecondary26, 26, 26
- Overwatch WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Overwatch Light GrayBackground244, 244, 244
- Overwatch Dark SurfaceSurface35, 39, 42
- Overwatch Border GrayBorder200, 200, 200
Text
Three tiers of copy.- Overwatch BlackText26, 26, 26
- Overwatch Medium GraySecondary text109, 109, 109
- Overwatch Muted GrayMuted text160, 160, 160
Semantic
Feedback and state colors.- Overwatch Success GreenSuccess67, 181, 129
- Overwatch OrangeWarning253, 186, 33
- Overwatch Error RedError224, 58, 62
- Overwatch Info BlueInfo83, 154, 227
Use Overwatch's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
overwatch-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #539AE3;
--error: #E03A3E;
--accent: #FFFFFF;
--border: #C8C8C8;
--primary: #FDBA21;
--success: #43B581;
--surface: #23272A;
--warning: #FDBA21;
--secondary: #1A1A1A;
--text-muted: #A0A0A0;
--background: #F4F4F4;
--text-primary: #1A1A1A;
--text-secondary: #6D6D6D;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
1.2:1
Fail
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
2.9:1
Fail
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
5.8:1
Pass
Overwatch gray and neutral colors
The quiet part of the Overwatch palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Overwatch Light GrayBackground
- HEX
- RGB
- HSL
- Overwatch Dark SurfaceSurface
- HEX
- RGB
- HSL
- Overwatch Border GrayBorder
- HEX
- RGB
- HSL
- Overwatch BlackText
- HEX
- RGB
- HSL
- Overwatch Medium GraySecondary text
- HEX
- RGB
- HSL
- Overwatch Muted GrayMuted text
- HEX
- RGB
- HSL
About Overwatch's colors
Overwatch uses a high-contrast palette centered on orange, black, and white, creating a dynamic and recognizable visual identity. The palette balances energy and clarity for both game UI and esports branding.
Orange and black provide strong contrast for emphasis.
White and gray tones support readability and hierarchy.
Accent blue and green are used for status and feedback.
Psychology
The orange conveys energy, action, and optimism, while black and gray provide seriousness and focus. White adds clarity and approachability to the interface.
Evolution
The Overwatch palette has remained stable since launch, with minor adjustments to gray tones for improved accessibility. The core orange and black pairing has been consistent across all branding and UI.
Where Overwatch uses each color
- Primary
Overwatch Orange is used for logos, key buttons, and highlight elements in-game and on the website.
- Secondary
Overwatch Black is used for backgrounds, navigation bars, and esports jerseys.
- Accent
Overwatch White appears in text, icons, and as a contrasting highlight on dark backgrounds.
- Backgrounds
Overwatch Light Gray is used for page backgrounds and UI panels to provide a neutral base.
- Text
Overwatch Black and Medium Gray are used for primary and secondary text throughout the UI.
- Semantic
Success Green, Error Red, and Info Blue are used for status indicators, alerts, and feedback messages.
Overwatch color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Overwatch brand color is Overwatch Orange, with the hex code #FDBA21.
Overwatch Orange is #FDBA21, which is RGB(253, 186, 33). In CMYK, it is approximately 0, 27, 87, 1.
Overwatch uses Overwatch Black (#1A1A1A), Overwatch Medium Gray (#6D6D6D), and Overwatch Muted Gray (#A0A0A0) for its UI and backgrounds.
Use Overwatch Orange (#FDBA21) for primary actions and highlights, black and gray for backgrounds and text, and semantic colors for status indicators. Maintain high contrast for readability and brand consistency.
The secondary color is Overwatch Black, #1A1A1A, and the accent is Overwatch 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 Overwatch's colors consistently when it generates UI.
Make something in the spirit of Overwatch
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.