Supercell color palette
GamingSupercell's brand identity is defined by a stark monochrome palette, emphasizing bold black and white contrasts with minimal accent colors. This approach reflects the company's straightforward, game-focused ethos.
supercell.comSupercell colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Supercell BlackPrimary0, 0, 0
- Supercell WhiteSecondary255, 255, 255
- Supercell GoldAccent255, 215, 0
Surfaces
Page, cards and dividers.- Supercell Dark GrayBackground26, 26, 26
- Supercell Surface GraySurface34, 34, 34
- Supercell Border GrayBorder51, 51, 51
Text
Three tiers of copy.- Supercell White TextText255, 255, 255
- Supercell Light Gray TextSecondary text179, 179, 179
- Supercell Muted GrayMuted text125, 125, 125
Semantic
Feedback and state colors.- Supercell Success GreenSuccess75, 181, 67
- Supercell Warning YellowWarning255, 179, 0
- Supercell Error RedError229, 57, 53
- Supercell Info BlueInfo33, 150, 243
Use Supercell's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
supercell-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #E53935;
--accent: #FFD700;
--border: #333333;
--primary: #000000;
--success: #4BB543;
--surface: #222222;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #7D7D7D;
--background: #1A1A1A;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}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.4: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
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.2:1
Pass
Muted text on surface
Needs 3:1 for large text
3.9:1
Pass
Supercell gray, dark and neutral colors
Supercell 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.
- Supercell Dark GrayBackground
- HEX
- RGB
- HSL
- Supercell Surface GraySurface
- HEX
- RGB
- HSL
- Supercell Border GrayBorder
- HEX
- RGB
- HSL
- Supercell White TextText
- HEX
- RGB
- HSL
- Supercell Light Gray TextSecondary text
- HEX
- RGB
- HSL
- Supercell Muted GrayMuted text
- HEX
- RGB
- HSL
About Supercell's colors
Supercell uses a minimalistic black and white palette, creating a strong visual identity centered on contrast and clarity. Gold and other accent colors are reserved for highlights and special elements.
Primary black and white create high contrast.
Gold accent draws attention to key actions.
Grays provide depth and hierarchy in UI.
Psychology
The monochrome palette conveys simplicity, professionalism, and focus, aligning with Supercell's direct approach to gaming. Gold accents add a sense of achievement and premium quality.
Evolution
Supercell's palette has remained largely unchanged since its inception, maintaining a consistent black-and-white identity. Occasional accent colors have been introduced for in-game or promotional purposes.
Where Supercell uses each color
- Primary
Used in the Supercell logo, headers, and navigation bars.
- Secondary
Applied to backgrounds, text, and UI elements for contrast.
- Accent
Utilized for buttons, highlights, and achievement indicators.
- Backgrounds
Dark gray backgrounds are common in web and app interfaces.
- Text
White and light gray are used for primary and secondary text.
- Semantic
Success, warning, and error colors are used in notifications and status indicators.
Supercell color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Supercell brand color is black, with the hex code #000000.
Supercell Black is #000000, which is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
Supercell uses a range of grays such as #1A1A1A for backgrounds and #333333 for borders, providing depth and structure in the UI.
The black and white palette should dominate, with gold and semantic colors used sparingly for emphasis and status indications.
The secondary color is Supercell White, #FFFFFF, and the accent is Supercell Gold, #FFD700. 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 Supercell's colors consistently when it generates UI.
Make something in the spirit of Supercell
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.