NIO color palette
AutomotiveNIO's brand color system is defined by a signature blue, complemented by neutral greys and crisp white, reflecting its focus on innovation and premium electric mobility. The palette is clean, modern, and technology-oriented, supporting a futuristic brand image.
nio.comNIO colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NIO BluePrimary0, 178, 226
- NIO CharcoalSecondary26, 26, 26
- NIO CyanAccent0, 193, 213
Surfaces
Page, cards and dividers.- NIO WhiteBackground255, 255, 255
- NIO Light GreySurface245, 247, 250
- NIO Border GreyBorder229, 232, 235
Text
Three tiers of copy.- NIO Text BlackText34, 34, 34
- NIO Text GreySecondary text102, 102, 102
- NIO Muted GreyMuted text174, 180, 185
Semantic
Feedback and state colors.- NIO Success GreenSuccess0, 196, 140
- NIO Warning YellowWarning255, 214, 0
- NIO Error RedError255, 75, 75
- NIO Info BlueInfo0, 152, 216
Use NIO's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nio-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0098D8;
--error: #FF4B4B;
--accent: #00C1D5;
--border: #E5E8EB;
--primary: #00B2E2;
--success: #00C48C;
--surface: #F5F7FA;
--warning: #FFD600;
--secondary: #1A1A1A;
--text-muted: #AEB4B9;
--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.8: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.4: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
2.0:1
Fail
NIO background, border and text colors
The quiet part of the NIO palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NIO WhiteBackground
- HEX
- RGB
- HSL
- NIO Light GreySurface
- HEX
- RGB
- HSL
- NIO Border GreyBorder
- HEX
- RGB
- HSL
- NIO Text BlackText
- HEX
- RGB
- HSL
- NIO Text GreySecondary text
- HEX
- RGB
- HSL
- NIO Muted GreyMuted text
- HEX
- RGB
- HSL
About NIO's colors
NIO's palette is anchored by a vibrant blue, symbolizing technology and forward-thinking, balanced by neutral greys and white for clarity and sophistication. The use of accent cyan and functional colors supports digital interfaces and brand consistency.
Primary blue is complemented by cyan for highlights.
Neutral greys provide contrast and readability.
Functional colors (green, yellow, red) are reserved for status and feedback.
Psychology
Blue conveys trust, innovation, and a sense of calm, aligning with NIO's vision for a sustainable future. The neutral tones reinforce a premium, modern feel.
Evolution
NIO's color palette has remained consistent since its inception, with the signature blue always at the forefront. Minor adjustments have been made to accent and neutral tones to improve digital accessibility.
Where NIO uses each color
- Primary
NIO Blue is used for primary navigation bars, call-to-action buttons, and brand marks.
- Secondary
NIO Charcoal appears in footers, headers, and as a background for secondary content blocks.
- Accent
NIO Cyan is used for active states, highlights, and interactive elements.
- Backgrounds
NIO White and Light Grey are used for page backgrounds and content surfaces.
- Text
Text Black and Text Grey are used for primary and secondary text throughout digital and print materials.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and notifications in the UI.
NIO color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official NIO brand color is NIO Blue, with the hex code #00B2E2.
NIO Blue (#00B2E2) has an RGB value of (0, 178, 226) and a CMYK value of (100, 21, 0, 11).
NIO uses NIO Charcoal (#1A1A1A), Light Grey (#F5F7FA), and Border Grey (#E5E8EB) as its primary neutral tones for backgrounds and UI elements.
Use NIO Blue (#00B2E2) for primary actions and branding, with neutral greys and white for backgrounds and surfaces. Reserve accent and semantic colors for interactive and status elements only.
The secondary color is NIO Charcoal, #1A1A1A, and the accent is NIO Cyan, #00C1D5. 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 NIO's colors consistently when it generates UI.
Make something in the spirit of NIO
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.