Vans color palette
FashionVans' color identity is rooted in bold simplicity, with a focus on black, white, and red, reflecting its skate and streetwear heritage. The palette is minimal and iconic, supporting high contrast and versatility across products and branding.
vans.comVans colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Vans RedPrimary211, 18, 69
- Vans BlackSecondary0, 0, 0
- Vans WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Vans WhiteBackground255, 255, 255
- Vans Light GraySurface245, 245, 245
- Vans Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Vans BlackText0, 0, 0
- Vans Medium GraySecondary text110, 110, 110
- Vans Muted GrayMuted text168, 168, 168
Semantic
Feedback and state colors.- Vans Success GreenSuccess60, 184, 120
- Vans Warning OrangeWarning245, 166, 35
- Vans RedError211, 18, 69
- Vans Info BlueInfo0, 116, 193
Use Vans's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
vans-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0074C1;
--error: #D31245;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #D31245;
--success: #3CB878;
--surface: #F5F5F5;
--warning: #F5A623;
--secondary: #000000;
--text-muted: #A8A8A8;
--background: #FFFFFF;
--text-primary: #000000;
--text-secondary: #6E6E6E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Vans gray and neutral colors
The quiet part of the Vans palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Vans WhiteBackground
- HEX
- RGB
- HSL
- Vans Light GraySurface
- HEX
- RGB
- HSL
- Vans Border GrayBorder
- HEX
- RGB
- HSL
- Vans BlackText
- HEX
- RGB
- HSL
- Vans Medium GraySecondary text
- HEX
- RGB
- HSL
- Vans Muted GrayMuted text
- HEX
- RGB
- HSL
About Vans's colors
Vans uses a high-contrast palette dominated by black, white, and red, emphasizing clarity and brand recognition. The minimal color system supports the brand’s utilitarian and rebellious image.
Red is used as a bold accent against neutral backgrounds.
Black and white provide strong contrast for text and logos.
Grays are used for UI elements and subtle separation.
Psychology
Red conveys energy, passion, and action, aligning with Vans' skate culture roots. Black and white emphasize simplicity, authenticity, and timelessness.
Evolution
The Vans palette has remained consistent for decades, with red, black, and white always at the core. Minor adjustments have been made to gray tones for digital clarity, but the primary colors are unchanged.
Where Vans uses each color
- Primary
Vans Red is used in the logo, key call-to-action buttons, and some product accents.
- Secondary
Vans Black appears in navigation bars, text, and as a background for the logo.
- Accent
Vans White is used for backgrounds, logo contrast, and product packaging.
- Backgrounds
White and light gray backgrounds are standard for web pages and product displays.
- Text
Black is used for primary text, with medium and muted grays for secondary and disabled text.
- Semantic
Red is used for errors and highlights, green for success messages, orange for warnings, and blue for informational alerts.
Vans color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Vans brand red is #D31245. This color is used in the logo and for key highlights.
Vans Red (#D31245) in RGB is (211, 18, 69). For CMYK, it is approximately (0, 91, 67, 17).
Vans uses #F5F5F5 (Light Gray), #E0E0E0 (Border Gray), #6E6E6E (Medium Gray), and #A8A8A8 (Muted Gray) for UI and backgrounds. These ensure clarity and hierarchy in digital interfaces.
Use Vans Red (#D31245) for logos and primary actions, with black and white for backgrounds and text. Grays provide structure in UI, and semantic colors are reserved for status messages.
The secondary color is Vans Black, #000000, and the accent is Vans White, #FFFFFF. 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 Vans's colors consistently when it generates UI.
Make something in the spirit of Vans
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.