Pokémon color palette
GamingPokémon's color identity is defined by its iconic bright yellow and deep blue, reflecting energy, fun, and adventure. The palette is bold and instantly recognizable, rooted in the brand's longstanding visual tradition.
pokemon.comPokémon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Pokémon YellowPrimary255, 203, 5
- Pokémon BlueSecondary59, 76, 202
- Pokémon RedAccent255, 26, 26
Surfaces
Page, cards and dividers.- Pokémon WhiteBackground255, 255, 255
- Pokémon Light GraySurface245, 245, 245
- Pokémon Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Pokémon BlackText33, 33, 33
- Pokémon Blue TextSecondary text59, 76, 202
- Pokémon Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Pokémon GreenSuccess67, 160, 71
- Pokémon OrangeWarning255, 160, 0
- Pokémon Error RedError211, 47, 47
- Pokémon Info BlueInfo25, 118, 210
Use Pokémon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
pokemon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FF1A1A;
--border: #D1D5DB;
--primary: #FFCB05;
--success: #43A047;
--surface: #F5F5F5;
--warning: #FFA000;
--secondary: #3B4CCA;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #212121;
--text-secondary: #3B4CCA;
}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
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.3:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.2:1
Pass
Pokémon background, border and text colors
The quiet part of the Pokémon palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Pokémon WhiteBackground
- HEX
- RGB
- HSL
- Pokémon Light GraySurface
- HEX
- RGB
- HSL
- Pokémon Border GrayBorder
- HEX
- RGB
- HSL
- Pokémon BlackText
- HEX
- RGB
- HSL
- Pokémon Blue TextSecondary text
- HEX
- RGB
- HSL
- Pokémon Muted GrayMuted text
- HEX
- RGB
- HSL
About Pokémon's colors
Pokémon's palette uses high-contrast primaries to evoke energy and playfulness, anchored by neutral backgrounds for clarity. The combination of yellow and blue is distinctive and consistent across all brand touchpoints.
Primary yellow and blue are complementary for maximum visibility.
Red accent provides emphasis for calls to action.
Neutral grays support UI clarity and legibility.
Psychology
Yellow conveys happiness, excitement, and friendliness, appealing to children and nostalgic adults alike. Blue adds trustworthiness and stability, balancing the playful yellow.
Evolution
Pokémon's core palette has remained stable since its inception, with yellow and blue always central. Minor adjustments to supporting colors and neutrals have been made for modern digital interfaces.
Where Pokémon uses each color
- Primary
Pokémon Yellow is used in the logo, main navigation highlights, and key brand visuals.
- Secondary
Pokémon Blue appears in the logo outline, buttons, and section headers.
- Accent
Pokémon Red is used for alerts, badges, and promotional highlights.
- Backgrounds
Pokémon White and Light Gray are used for website backgrounds and app screens.
- Text
Pokémon Black and Blue are used for primary and secondary text, ensuring readability.
- Semantic
Green, orange, and red are used for status indicators such as success, warning, and error messages.
Pokémon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Pokémon brand yellow is #FFCB05. This is the primary color used in the logo and branding.
Pokémon Yellow (#FFCB05) in RGB is (255, 203, 5). In CMYK, it is approximately (0, 20, 98, 0).
Pokémon uses Light Gray (#F5F5F5) for surfaces and Border Gray (#D1D5DB) for UI borders. These neutrals support clarity and legibility in digital interfaces.
Use Pokémon Yellow (#FFCB05) for primary branding, Blue (#3B4CCA) for secondary elements, and Red (#FF1A1A) for accents. Neutrals like White (#FFFFFF) and Light Gray (#F5F5F5) should be used for backgrounds and surfaces.
The secondary color is Pokémon Blue, #3B4CCA, and the accent is Pokémon Red, #FF1A1A. 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 Pokémon's colors consistently when it generates UI.
Make something in the spirit of Pokémon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.