Genshin Impact color palette
GamingGenshin Impact's brand color system is built around a signature light blue, complemented by elegant neutrals and accent golds, reflecting its fantasy and adventure themes. The palette is consistent across its website, game UI, and promotional materials.
genshin.hoyoverse.comGenshin Impact colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Genshin BluePrimary89, 175, 255
- Celestia SkySecondary230, 240, 250
- Primogem GoldAccent255, 217, 102
Surfaces
Page, cards and dividers.- Mondstadt MistBackground246, 248, 251
- Teyvat WhiteSurface255, 255, 255
- Statue SilverBorder214, 226, 241
Text
Three tiers of copy.- Abyss BlackText34, 43, 58
- Hilichurl GraySecondary text91, 107, 124
- Liyue SlateMuted text165, 179, 197
Semantic
Feedback and state colors.- Anemo GreenSuccess77, 213, 153
- Pyro AmberWarning255, 184, 77
- Abyss Mage RedError255, 107, 107
- Hydro SkyInfo142, 207, 255
Use Genshin Impact's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
genshin-impact-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #8ECFFF;
--error: #FF6B6B;
--accent: #FFD966;
--border: #D6E2F1;
--primary: #59AFFF;
--success: #4DD599;
--surface: #FFFFFF;
--warning: #FFB84D;
--secondary: #E6F0FA;
--text-muted: #A5B3C5;
--background: #F6F8FB;
--text-primary: #222B3A;
--text-secondary: #5B6B7C;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.4:1
Pass
Text on surface
Needs 4.5:1 for body text
14.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.0:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Genshin Impact background, border and text colors
The quiet part of the Genshin Impact palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mondstadt MistBackground
- HEX
- RGB
- HSL
- Teyvat WhiteSurface
- HEX
- RGB
- HSL
- Statue SilverBorder
- HEX
- RGB
- HSL
- Abyss BlackText
- HEX
- RGB
- HSL
- Hilichurl GraySecondary text
- HEX
- RGB
- HSL
- Liyue SlateMuted text
- HEX
- RGB
- HSL
About Genshin Impact's colors
Genshin Impact's palette uses a harmonious blend of blue, gold, and soft neutrals to evoke a sense of fantasy and adventure. The colors are chosen to be both inviting and readable across digital interfaces.
Primary blue pairs with gold accents for contrast.
Neutrals provide balance and readability.
Accent colors reflect in-game elemental themes.
Psychology
The signature blue conveys trust, calm, and exploration, while gold accents suggest value and reward. Soft backgrounds and grays create an inviting, immersive experience.
Evolution
The color palette has remained stable since launch, maintaining consistency across updates. Minor adjustments have refined neutral tones for improved accessibility.
Where Genshin Impact uses each color
- Primary
Used for main navigation highlights, call-to-action buttons, and key UI elements.
- Secondary
Applied to backgrounds, cards, and secondary navigation areas.
- Accent
Used for rewards, highlights, and special event banners.
- Backgrounds
Predominantly seen in app and website backgrounds for a light, airy feel.
- Text
Primary and secondary text colors are used for headers, body text, and muted labels throughout the UI.
- Semantic
Success, warning, and error colors appear in notifications, system messages, and elemental indicators.
Genshin Impact color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Genshin Impact brand color is #59AFFF, known as Genshin Blue. This color is used for major highlights and navigation elements.
Genshin Blue (#59AFFF) in RGB is (89, 175, 255). For CMYK, it is approximately (65, 31, 0, 0).
Genshin Impact uses several neutrals: Abyss Black (#222B3A) for primary text, Hilichurl Gray (#5B6B7C) for secondary text, and Liyue Slate (#A5B3C5) for muted text. These ensure readability and a clean interface.
Use Genshin Blue (#59AFFF) for primary actions and navigation, Celestia Sky (#E6F0FA) for backgrounds, and Primogem Gold (#FFD966) for accents and highlights. Neutral tones support text and surfaces for clarity.
The secondary color is Celestia Sky, #E6F0FA, and the accent is Primogem Gold, #FFD966. Together with the primary they make up the three brand colors at the top of this page.
4 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 Genshin Impact's colors consistently when it generates UI.
Make something in the spirit of Genshin Impact
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.