Vercel color palette
TechVercel's stark black-and-white identity with its iconic triangle logo represents the cutting edge of web development, emphasizing speed, performance, and developer experience.
vercel.comVercel colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Vercel BlackPrimary0, 0, 0
- Vercel DarkSecondary23, 23, 23
- Vercel BlueAccent0, 112, 243
Surfaces
Page, cards and dividers.- Vercel BackgroundBackground0, 0, 0
- Vercel SurfaceSurface17, 17, 17
- Vercel BorderBorder51, 51, 51
Text
Three tiers of copy.- Vercel WhiteText237, 237, 237
- Vercel GraySecondary text161, 161, 161
- Vercel MutedMuted text102, 102, 102
Semantic
Feedback and state colors.- Vercel SuccessSuccess0, 112, 243
- Vercel WarningWarning245, 166, 35
- Vercel ErrorError238, 0, 0
- Vercel InfoInfo0, 112, 243
Use Vercel's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
vercel-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0070F3;
--error: #EE0000;
--accent: #0070F3;
--border: #333333;
--primary: #000000;
--success: #0070F3;
--surface: #111111;
--warning: #F5A623;
--secondary: #171717;
--text-muted: #666666;
--background: #000000;
--text-primary: #EDEDED;
--text-secondary: #A1A1A1;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.9:1
Pass
Text on surface
Needs 4.5:1 for body text
16.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Vercel gray, dark and neutral colors
Vercel runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Vercel BackgroundBackground
- HEX
- RGB
- HSL
- Vercel SurfaceSurface
- HEX
- RGB
- HSL
- Vercel BorderBorder
- HEX
- RGB
- HSL
- Vercel WhiteText
- HEX
- RGB
- HSL
- Vercel GraySecondary text
- HEX
- RGB
- HSL
- Vercel MutedMuted text
- HEX
- RGB
- HSL
About Vercel's colors
Vercel's palette is maximally reduced — black and white form an absolute binary with blue as the sole chromatic element. This extreme minimalism reflects the brand's focus on performance and developer tooling.
Pure black backgrounds with white text create maximum contrast and drama
Blue (#0070F3) is the only color, used exclusively for interactive states
Grayscale surface layers (#111111, #171717, #333333) provide subtle depth
Psychology
The stark black-and-white palette projects authority, technical precision, and cutting-edge modernism. It signals a company that strips away everything unnecessary — a philosophy that extends to their developer tools.
Evolution
Vercel (formerly ZEIT) has maintained a dark, minimal aesthetic since its early days. The shift from ZEIT to Vercel brought the triangle logo and solidified the pure black brand identity, with blue replacing earlier accent colors.
Where Vercel uses each color
- Primary
Black dominates as both the brand color and primary background, creating Vercel's signature dark-mode-first experience.
- Secondary
Slightly elevated dark surfaces (#111111, #171717) provide card and panel differentiation.
- Accent
Vercel Blue (#0070F3) is used for links, buttons, and interactive elements — it's the sole color in an otherwise monochrome world.
- Backgrounds
The black background makes deployment previews, code snippets, and dashboard data feel like terminal outputs — familiar to developers.
- Text
Near-white text (#EDEDED) with gray levels creates readable hierarchy without the harshness of pure white on black.
- Semantic
Blue doubles as success color (deployment complete), while orange and red handle warnings and errors respectively.
Vercel color questions
Hex codes, RGB values, neutrals and how to use the palette.
Vercel's brand is primarily black (#000000) and white (#EDEDED), with Vercel Blue (#0070F3) as the sole accent color. This maximally reduced palette reflects the brand's focus on performance and simplicity.
Vercel's dark-mode-first design reflects its developer audience's preferences and creates a premium, focused experience. The dark canvas makes deployment previews and code elements feel native to a development environment.
Vercel uses Geist — their open-source design system that includes Geist Sans and Geist Mono fonts, a component library, and design tokens. It embodies the same minimal, high-contrast aesthetic as the brand.
Vercel's primary color is Vercel Black, hex #000000 (RGB 0, 0, 0). It is the color used for the logo and the most prominent brand moments.
The secondary color is Vercel Dark, #171717, and the accent is Vercel Blue, #0070F3. Together with the primary they make up the three brand colors at the top of this page.
Vercel uses #000000 for backgrounds, #111111 for surfaces and #333333 for borders. Text runs #EDEDED, #A1A1A1 and #666666 from strongest to most muted.
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 Vercel's colors consistently when it generates UI.
Make something in the spirit of Vercel
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.