Xiaomi color palette
TechXiaomi's color identity is defined by its vibrant orange paired with clean neutrals and subtle accents, reflecting its energetic and approachable tech brand. The palette is consistent across digital and physical touchpoints.
mi.comXiaomi colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Xiaomi OrangePrimary255, 105, 0
- Xiaomi CharcoalSecondary51, 51, 51
- Xiaomi Light GrayAccent245, 245, 245
Surfaces
Page, cards and dividers.- Xiaomi WhiteBackground255, 255, 255
- Xiaomi Surface GraySurface250, 250, 250
- Xiaomi Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Xiaomi Text BlackText34, 34, 34
- Xiaomi Text GraySecondary text117, 117, 117
- Xiaomi Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Xiaomi Success GreenSuccess76, 175, 80
- Xiaomi Warning YellowWarning255, 193, 7
- Xiaomi Error RedError244, 67, 54
- Xiaomi Info BlueInfo33, 150, 243
Use Xiaomi's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
xiaomi-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #F44336;
--accent: #F5F5F5;
--border: #E0E0E0;
--primary: #FF6900;
--success: #4CAF50;
--surface: #FAFAFA;
--warning: #FFC107;
--secondary: #333333;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #757575;
}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
15.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Xiaomi gray and neutral colors
The quiet part of the Xiaomi palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Xiaomi WhiteBackground
- HEX
- RGB
- HSL
- Xiaomi Surface GraySurface
- HEX
- RGB
- HSL
- Xiaomi Border GrayBorder
- HEX
- RGB
- HSL
- Xiaomi Text BlackText
- HEX
- RGB
- HSL
- Xiaomi Text GraySecondary text
- HEX
- RGB
- HSL
- Xiaomi Muted GrayMuted text
- HEX
- RGB
- HSL
About Xiaomi's colors
Xiaomi's palette is anchored by a bold orange, contrasted with deep grays and clean whites for clarity and energy. The supporting colors provide semantic clarity and accessible UI structure.
Primary orange is paired with dark gray for high contrast.
Light grays and white create visual hierarchy and spaciousness.
Semantic colors are reserved for status and feedback elements.
Psychology
The orange evokes warmth, enthusiasm, and approachability, aligning with Xiaomi's brand personality. The neutral grays and whites ensure readability and a modern, trustworthy feel.
Evolution
Xiaomi's palette has remained stable, with orange as its signature since inception. Minor adjustments have been made to neutrals for improved digital accessibility.
Where Xiaomi uses each color
- Primary
Xiaomi Orange is used in the logo, call-to-action buttons, and key highlights across digital and physical branding.
- Secondary
Xiaomi Charcoal appears in navigation bars, footers, and text-heavy areas for contrast.
- Accent
Xiaomi Light Gray is used for UI backgrounds and subtle dividers.
- Backgrounds
Xiaomi White is the default background for web and app interfaces.
- Text
Xiaomi Text Black and Text Gray are used for primary and secondary text, ensuring legibility.
- Semantic
Success, warning, error, and info colors are used for notifications, alerts, and status indicators.
Xiaomi color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Xiaomi primary color hex code is #FF6900. This vibrant orange is central to the brand's identity.
The RGB value of Xiaomi Orange (#FF6900) is 255, 105, 0. In CMYK, it is approximately 0, 59, 100, 0.
Xiaomi uses a range of grays including #333333 (Charcoal), #757575 (Text Gray), #BDBDBD (Muted Gray), and #F5F5F5 (Light Gray) for UI and backgrounds. These ensure clarity and accessibility across digital products.
Primary orange should be reserved for key branding and actions, while neutrals structure the UI. Semantic colors are used sparingly for feedback and status indications.
The secondary color is Xiaomi Charcoal, #333333, and the accent is Xiaomi Light Gray, #F5F5F5. Together with the primary they make up the three brand colors at the top of this page.
3 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 Xiaomi's colors consistently when it generates UI.
Make something in the spirit of Xiaomi
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.