Blizzard color palette
GamingBlizzard Entertainment's color identity is defined by a distinctive blue, conveying a sense of fantasy and digital immersion. The palette is anchored by "Blizzard Blue" and complemented by dark, neutral UI tones.
blizzard.comBlizzard colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Blizzard BluePrimary0, 174, 255
- Blizzard NavySecondary35, 91, 140
- Blizzard GoldAccent255, 214, 0
Surfaces
Page, cards and dividers.- Blizzard DarkBackground16, 20, 26
- Blizzard SurfaceSurface26, 35, 46
- Blizzard BorderBorder44, 58, 77
Text
Three tiers of copy.- Blizzard WhiteText255, 255, 255
- Blizzard Light GraySecondary text179, 199, 214
- Blizzard Muted GrayMuted text107, 123, 140
Semantic
Feedback and state colors.- Blizzard Success GreenSuccess62, 213, 152
- Blizzard Warning OrangeWarning255, 179, 0
- Blizzard Error RedError255, 76, 76
- Blizzard Info BlueInfo0, 207, 255
Use Blizzard's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
blizzard-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00CFFF;
--error: #FF4C4C;
--accent: #FFD600;
--border: #2C3A4D;
--primary: #00AEFF;
--success: #3ED598;
--surface: #1A232E;
--warning: #FFB300;
--secondary: #235B8C;
--text-muted: #6B7B8C;
--background: #10141A;
--text-primary: #FFFFFF;
--text-secondary: #B3C7D6;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.5:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
10.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.1:1
Pass
Muted text on background
Needs 3:1 for large text
4.3:1
Pass
Muted text on surface
Needs 3:1 for large text
3.7:1
Pass
Blizzard background, border and text colors
Blizzard 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.
- Blizzard DarkBackground
- HEX
- RGB
- HSL
- Blizzard SurfaceSurface
- HEX
- RGB
- HSL
- Blizzard BorderBorder
- HEX
- RGB
- HSL
- Blizzard WhiteText
- HEX
- RGB
- HSL
- Blizzard Light GraySecondary text
- HEX
- RGB
- HSL
- Blizzard Muted GrayMuted text
- HEX
- RGB
- HSL
About Blizzard's colors
Blizzard's palette is built around a vibrant blue, supported by dark neutrals and gold for highlights. The colors evoke a sense of technology, fantasy, and clarity.
Primary blue paired with deep navy for contrast.
Gold accent highlights important UI elements.
Dark backgrounds allow blue and gold to stand out.
Psychology
Blue conveys trust, stability, and a digital atmosphere, fitting for a gaming brand. Gold adds a sense of achievement and prestige.
Evolution
Blizzard's core blue and dark palette have remained consistent since the early 2000s. Minor adjustments have refined accent and neutral tones for modern UI clarity.
Where Blizzard uses each color
- Primary
Blizzard Blue is used in the logo, primary buttons, and key navigation highlights.
- Secondary
Blizzard Navy appears in navigation bars, footers, and secondary buttons.
- Accent
Blizzard Gold is used for notifications, highlights, and call-to-action elements.
- Backgrounds
Blizzard Dark serves as the main background for web and app screens.
- Text
Blizzard White and Blizzard Light Gray are used for primary and secondary text, respectively.
- Semantic
Success, warning, and error colors are used for system messages and status indicators.
Blizzard color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Blizzard brand color is Blizzard Blue, hex code #00AEFF.
Blizzard Blue (#00AEFF) is RGB(0, 174, 255). For CMYK, use (100, 32, 0, 0).
Blizzard uses Blizzard Dark (#10141A) and Blizzard Surface (#1A232E) for backgrounds and surfaces, providing a modern, immersive UI.
Use Blizzard Blue for primary actions and branding, with Blizzard Navy and Gold for secondary and accent roles. Neutrals and semantic colors support UI clarity and accessibility.
The secondary color is Blizzard Navy, #235B8C, and the accent is Blizzard Gold, #FFD600. 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 Blizzard's colors consistently when it generates UI.
Make something in the spirit of Blizzard
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.