Volkswagen color palette
AutomotiveVolkswagen's color identity centers on a deep blue primary, complemented by crisp whites and neutral grays, reflecting clarity and reliability. The palette is consistent across digital and print, emphasizing trust and simplicity.
vw.comVolkswagen colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Volkswagen BluePrimary21, 31, 93
- Volkswagen WhiteSecondary255, 255, 255
- Volkswagen CyanAccent0, 147, 208
Surfaces
Page, cards and dividers.- Volkswagen Light GrayBackground245, 246, 247
- Volkswagen Surface GraySurface229, 229, 229
- Volkswagen Border GrayBorder176, 181, 188
Text
Three tiers of copy.- Volkswagen Blue TextText21, 31, 93
- Volkswagen CharcoalSecondary text34, 34, 34
- Volkswagen Muted GrayMuted text108, 111, 115
Semantic
Feedback and state colors.- Volkswagen Success GreenSuccess60, 179, 113
- Volkswagen Warning YellowWarning255, 179, 0
- Volkswagen Error RedError215, 38, 61
- Volkswagen Info CyanInfo0, 147, 208
Use Volkswagen's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
volkswagen-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0093D0;
--error: #D7263D;
--accent: #0093D0;
--border: #B0B5BC;
--primary: #151F5D;
--success: #3CB371;
--surface: #E5E5E5;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #6C6F73;
--background: #F5F6F7;
--text-primary: #151F5D;
--text-secondary: #222222;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.0:1
Pass
Text on surface
Needs 4.5:1 for body text
12.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Muted text on background
Needs 3:1 for large text
4.7:1
Pass
Muted text on surface
Needs 3:1 for large text
4.0:1
Pass
Volkswagen background, border and text colors
The quiet part of the Volkswagen palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Volkswagen Light GrayBackground
- HEX
- RGB
- HSL
- Volkswagen Surface GraySurface
- HEX
- RGB
- HSL
- Volkswagen Border GrayBorder
- HEX
- RGB
- HSL
- Volkswagen Blue TextText
- HEX
- RGB
- HSL
- Volkswagen CharcoalSecondary text
- HEX
- RGB
- HSL
- Volkswagen Muted GrayMuted text
- HEX
- RGB
- HSL
About Volkswagen's colors
Volkswagen's palette is built on a strong blue foundation, supported by clean whites and functional grays. The colors are chosen for clarity, trust, and a timeless, approachable feel.
Primary blue paired with white for maximum contrast.
Accent cyan used to highlight interactive elements.
Neutral grays provide structure and readability.
Psychology
The deep blue conveys reliability, professionalism, and trustworthiness, aligning with Volkswagen's brand values. Whites and grays add a sense of openness and modernity.
Evolution
Volkswagen's palette has remained stable, with blue as the core brand color for decades. Minor adjustments have modernized the supporting grays and accent tones for digital clarity.
Where Volkswagen uses each color
- Primary
Used for the logo, navigation bars, and primary call-to-action buttons.
- Secondary
Backgrounds, negative space, and text contrast elements.
- Accent
Links, icons, and highlights in digital interfaces.
- Backgrounds
Main page backgrounds and content areas.
- Text
Headlines and important information use blue or charcoal; muted gray for secondary text.
- Semantic
Success, warning, and error colors are used for notifications and status indicators.
Volkswagen color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Volkswagen primary color hex code is #151F5D. This deep blue is used for the logo and key brand elements.
Volkswagen Blue (#151F5D) in RGB is 21, 31, 93. In CMYK, it is approximately 77, 67, 0, 64.
Volkswagen uses several grays, including #F5F6F7 (Light Gray), #E5E5E5 (Surface Gray), and #B0B5BC (Border Gray) for backgrounds and interface elements.
The primary blue (#151F5D) should dominate branding and navigation, while white and grays provide clarity and separation. Accent cyan (#0093D0) is reserved for interactive or highlighted elements.
The secondary color is Volkswagen White, #FFFFFF, and the accent is Volkswagen Cyan, #0093D0. Together with the primary they make up the three brand colors at the top of this page.
6 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 Volkswagen's colors consistently when it generates UI.
Make something in the spirit of Volkswagen
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.