Polestar color palette
AutomotivePolestar's color identity is defined by a minimalist, monochromatic palette centered on deep black, crisp white, and a range of sophisticated greys. This reflects the brand's Scandinavian design ethos and focus on modern electric mobility.
polestar.comPolestar colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Polestar BlackPrimary0, 0, 0
- Polestar WhiteSecondary255, 255, 255
- Polestar Light GreyAccent229, 229, 229
Surfaces
Page, cards and dividers.- Polestar Off WhiteBackground247, 247, 247
- Polestar Deep GreySurface26, 26, 26
- Polestar Silver GreyBorder196, 196, 196
Text
Three tiers of copy.- Polestar Black TextText0, 0, 0
- Polestar Medium Grey TextSecondary text102, 102, 102
- Polestar Muted Grey TextMuted text163, 163, 163
Semantic
Feedback and state colors.- Polestar GreenSuccess62, 180, 137
- Polestar YellowWarning245, 194, 66
- Polestar RedError224, 60, 49
- Polestar BlueInfo74, 144, 226
Use Polestar's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
polestar-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4A90E2;
--error: #E03C31;
--accent: #E5E5E5;
--border: #C4C4C4;
--primary: #000000;
--success: #3EB489;
--surface: #1A1A1A;
--warning: #F5C242;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F7F7F7;
--text-primary: #000000;
--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
19.6:1
Pass
Text on surface
Needs 4.5:1 for body text
1.2:1
Fail
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
3.0:1
Fail
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
6.9:1
Pass
Polestar gray and neutral colors
The quiet part of the Polestar palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Polestar Off WhiteBackground
- HEX
- RGB
- HSL
- Polestar Deep GreySurface
- HEX
- RGB
- HSL
- Polestar Silver GreyBorder
- HEX
- RGB
- HSL
- Polestar Black TextText
- HEX
- RGB
- HSL
- Polestar Medium Grey TextSecondary text
- HEX
- RGB
- HSL
- Polestar Muted Grey TextMuted text
- HEX
- RGB
- HSL
About Polestar's colors
Polestar's palette is rooted in a high-contrast, monochrome scheme with subtle accent colors for clarity and function. The use of black, white, and grey reinforces a sense of precision and modernity.
Primary black and white create strong contrast for legibility.
Greys are used to soften interfaces and provide hierarchy.
Accent colors are reserved for functional feedback and highlights.
Psychology
The monochrome palette communicates sophistication, clarity, and a focus on innovation. Accent colors provide intuitive cues without distracting from the core brand identity.
Evolution
Polestar's palette has remained consistent, emphasizing minimalism since its inception. The brand has refined its greys and accent colors for improved digital accessibility.
Where Polestar uses each color
- Primary
Used for logo, navigation backgrounds, and key brand elements.
- Secondary
Applied to backgrounds, negative space, and text for contrast.
- Accent
Used for UI highlights, hover states, and subtle interface elements.
- Backgrounds
Off-white backgrounds dominate digital and print layouts.
- Text
Primary black and medium grey are used for headings and body text.
- Semantic
Green, yellow, red, and blue are used for status indicators and alerts in digital products.
Polestar color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Polestar primary color hex code is #000000. This is used for the logo and key brand visuals.
Polestar Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100). Use these values for digital and print applications respectively.
Polestar uses a range of greys including #E5E5E5 (Light Grey), #1A1A1A (Deep Grey), and #A3A3A3 (Muted Grey Text). These provide depth and hierarchy in UI and print materials.
Use black and white for primary brand elements and backgrounds, with greys for UI structure and hierarchy. Reserve accent and semantic colors for functional highlights and feedback only.
The secondary color is Polestar White, #FFFFFF, and the accent is Polestar Light Grey, #E5E5E5. 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 Polestar's colors consistently when it generates UI.
Make something in the spirit of Polestar
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.