miHoYo color palette
GamingmiHoYo's brand color system is defined by a vibrant blue primary, complemented by light and dark neutrals for UI clarity and accented with a soft sky blue. The palette is clean, digital, and designed for gaming interfaces.
mihoyo.commiHoYo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- miHoYo BluePrimary78, 164, 221
- miHoYo NavySecondary45, 58, 74
- miHoYo SkyAccent126, 210, 246
Surfaces
Page, cards and dividers.- miHoYo WhiteBackground247, 249, 251
- miHoYo Light GraySurface230, 237, 243
- miHoYo Border GrayBorder195, 208, 221
Text
Three tiers of copy.- miHoYo CharcoalText34, 43, 56
- miHoYo SlateSecondary text92, 107, 122
- miHoYo Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- miHoYo GreenSuccess78, 192, 155
- miHoYo GoldWarning246, 194, 68
- miHoYo RedError225, 90, 90
- miHoYo Info BlueInfo78, 164, 221
Use miHoYo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mihoyo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4EA4DD;
--error: #E15A5A;
--accent: #7ED2F6;
--border: #C3D0DD;
--primary: #4EA4DD;
--success: #4EC09B;
--surface: #E6EDF3;
--warning: #F6C244;
--secondary: #2D3A4A;
--text-muted: #A0AEC0;
--background: #F7F9FB;
--text-primary: #222B38;
--text-secondary: #5C6B7A;
}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.5:1
Pass
Text on surface
Needs 4.5:1 for body text
12.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
miHoYo background, border and text colors
The quiet part of the miHoYo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- miHoYo WhiteBackground
- HEX
- RGB
- HSL
- miHoYo Light GraySurface
- HEX
- RGB
- HSL
- miHoYo Border GrayBorder
- HEX
- RGB
- HSL
- miHoYo CharcoalText
- HEX
- RGB
- HSL
- miHoYo SlateSecondary text
- HEX
- RGB
- HSL
- miHoYo Muted GrayMuted text
- HEX
- RGB
- HSL
About miHoYo's colors
miHoYo's palette centers on a signature blue, supported by neutral grays and whites for a clean, digital look. The colors are chosen for clarity, accessibility, and a modern gaming aesthetic.
Primary blue is complemented by navy and sky blue accents.
Neutral grays and whites provide contrast and readability.
Semantic colors (green, gold, red) are reserved for status and feedback.
Psychology
The blue primary conveys trust, technology, and creativity, aligning with miHoYo's gaming innovation. Neutrals keep the interface calm and focused, reducing distraction.
Evolution
miHoYo's palette has remained consistent, with blue always as the anchor color. Minor adjustments to gray tones have improved UI clarity over time.
Where miHoYo uses each color
- Primary
Used for main navigation bars, call-to-action buttons, and brand highlights.
- Secondary
Appears in headers, footers, and secondary navigation backgrounds.
- Accent
Applied to hover states, highlights, and promotional banners.
- Backgrounds
Used as the main page background for a clean, open feel.
- Text
Charcoal and slate grays are used for primary and secondary text throughout the website and app.
- Semantic
Green, gold, and red indicate success, warnings, and errors in notifications and UI feedback.
miHoYo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official miHoYo primary color is #4EA4DD. This blue is used for branding and key UI elements.
miHoYo Blue (#4EA4DD) is RGB(78, 164, 221) and approximately CMYK(65, 26, 0, 13). Always use the hex code for digital applications.
miHoYo uses #2D3A4A (Navy), #E6EDF3 (Light Gray), #C3D0DD (Border Gray), and #A0AEC0 (Muted Gray) for backgrounds, borders, and muted text. These neutrals ensure readability and a modern interface.
Always use #4EA4DD for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for highlights and status indicators.
The secondary color is miHoYo Navy, #2D3A4A, and the accent is miHoYo Sky, #7ED2F6. 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 miHoYo's colors consistently when it generates UI.
Make something in the spirit of miHoYo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.