Huawei color palette
TechHuawei's color identity centers on a bold, vibrant red, reflecting its Chinese heritage and technological ambition. The palette is supported by neutral grays and dark tones for clarity and professionalism.
huawei.comHuawei colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Huawei RedPrimary255, 0, 0
- Huawei CharcoalSecondary34, 34, 34
- Huawei Accent RedAccent230, 0, 18
Surfaces
Page, cards and dividers.- Huawei WhiteBackground255, 255, 255
- Huawei Light GraySurface245, 245, 245
- Huawei Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Huawei Text BlackText34, 34, 34
- Huawei Text GraySecondary text102, 102, 102
- Huawei Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Huawei Success GreenSuccess67, 178, 68
- Huawei Warning YellowWarning255, 179, 0
- Huawei Error RedError211, 47, 47
- Huawei Info BlueInfo25, 118, 210
Use Huawei's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
huawei-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #E60012;
--border: #E0E0E0;
--primary: #FF0000;
--success: #43B244;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #222222;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Huawei gray and neutral colors
The quiet part of the Huawei palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Huawei WhiteBackground
- HEX
- RGB
- HSL
- Huawei Light GraySurface
- HEX
- RGB
- HSL
- Huawei Border GrayBorder
- HEX
- RGB
- HSL
- Huawei Text BlackText
- HEX
- RGB
- HSL
- Huawei Text GraySecondary text
- HEX
- RGB
- HSL
- Huawei Muted GrayMuted text
- HEX
- RGB
- HSL
About Huawei's colors
Huawei's palette is anchored by a powerful red, symbolizing energy and innovation, complemented by neutral grays for balance. The use of color is direct and purposeful, supporting clear communication.
Red contrasts with white and dark gray for high visibility.
Accent red is used for highlights and calls to action.
Neutral grays provide structure and readability.
Psychology
Red conveys strength, confidence, and a pioneering spirit, aligning with Huawei's global presence. The neutral tones add professionalism and trust.
Evolution
Huawei's red has remained consistent as the brand's core identity color. The supporting palette of grays and whites has been refined for digital clarity and accessibility.
Where Huawei uses each color
- Primary
Huawei Red is used in the logo, key buttons, and major calls to action.
- Secondary
Huawei Charcoal appears in navigation bars, footers, and headings.
- Accent
Huawei Accent Red is applied to hover states, highlights, and important icons.
- Backgrounds
Huawei White and Light Gray are used for page backgrounds and content areas.
- Text
Text Black and Text Gray are used for primary and secondary text throughout the website and apps.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for system messages and status indicators.
Huawei color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Huawei primary color hex code is #FF0000. This red is central to the brand's identity.
Huawei Red (#FF0000) has RGB values of 255, 0, 0 and CMYK values of 0, 100, 100, 0.
Huawei uses several neutral tones including Huawei Charcoal (#222222), Light Gray (#F5F5F5), and Border Gray (#E0E0E0) for backgrounds, borders, and text.
Use Huawei Red (#FF0000) for primary branding and actions, with grays and whites for backgrounds and text. Accent and semantic colors are reserved for highlights and status indicators.
The secondary color is Huawei Charcoal, #222222, and the accent is Huawei Accent Red, #E60012. 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 Huawei's colors consistently when it generates UI.
Make something in the spirit of Huawei
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.