Vercel Analytics color palette
SaaSVercel Analytics uses a minimalist, monochromatic palette centered around deep black and grayscale tones, reflecting its focus on clarity and developer-centric design. The color system emphasizes contrast and simplicity, with subtle accent highlights for interactive elements.
vercel.comVercel Analytics colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Vercel BlackPrimary0, 0, 0
- Vercel CharcoalSecondary17, 17, 17
- Vercel WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Vercel Deep BlackBackground10, 10, 10
- Vercel Surface GraySurface24, 24, 27
- Vercel Border GrayBorder39, 39, 42
Text
Three tiers of copy.- Vercel Text WhiteText250, 250, 250
- Vercel Text GraySecondary text161, 161, 170
- Vercel Muted GrayMuted text82, 82, 91
Semantic
Feedback and state colors.- Vercel GreenSuccess34, 197, 94
- Vercel YellowWarning250, 204, 21
- Vercel RedError239, 68, 68
- Vercel BlueInfo59, 130, 246
Use Vercel Analytics's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
vercel-analytics-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #EF4444;
--accent: #FFFFFF;
--border: #27272A;
--primary: #000000;
--success: #22C55E;
--surface: #18181B;
--warning: #FACC15;
--secondary: #111111;
--text-muted: #52525B;
--background: #0A0A0A;
--text-primary: #FAFAFA;
--text-secondary: #A1A1AA;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
17.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Vercel Analytics gray, dark and neutral colors
Vercel Analytics 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 Deep BlackBackground
- HEX
- RGB
- HSL
- Vercel Surface GraySurface
- HEX
- RGB
- HSL
- Vercel Border GrayBorder
- HEX
- RGB
- HSL
- Vercel Text WhiteText
- HEX
- RGB
- HSL
- Vercel Text GraySecondary text
- HEX
- RGB
- HSL
- Vercel Muted GrayMuted text
- HEX
- RGB
- HSL
About Vercel Analytics's colors
Vercel Analytics employs a monochromatic palette dominated by blacks and grays, with high-contrast white accents for clarity. Semantic colors are reserved for status and feedback, ensuring focus on content and data.
Primary black contrasts with white for maximum legibility.
Grays provide depth and hierarchy across UI surfaces.
Accent and semantic colors are used sparingly for emphasis.
Psychology
The black and grayscale palette communicates professionalism, focus, and modernity. Accent colors provide clear, immediate feedback without distracting from core content.
Evolution
Vercel's palette has remained consistent since its inception, reinforcing its brand identity. Minor adjustments have been made to gray tones for improved accessibility and contrast.
Where Vercel Analytics uses each color
- Primary
Used for navigation bars, headers, and primary backgrounds.
- Secondary
Applied to secondary backgrounds, cards, and overlays.
- Accent
Used for highlights, icons, and interactive elements.
- Backgrounds
Dominates the app screens and dashboard backgrounds.
- Text
Text colors are used for primary content, secondary information, and muted labels.
- Semantic
Success, warning, error, and info colors appear in charts, notifications, and status indicators.
Vercel Analytics color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Vercel Analytics brand color is #000000, known as Vercel Black. This is used throughout their website and product interfaces.
The primary color #000000 in RGB is (0, 0, 0). In CMYK, it is (0, 0, 0, 100).
Vercel Analytics uses a range of grays including #111111 (Vercel Charcoal), #18181B (Vercel Surface Gray), #27272A (Vercel Border Gray), and #A1A1AA (Vercel Text Gray). These create depth and hierarchy in the UI.
Use the primary and secondary blacks and grays for backgrounds and surfaces, with white and semantic colors reserved for text, highlights, and status indicators. Maintain high contrast for accessibility and clarity.
The secondary color is Vercel Charcoal, #111111, and the accent is Vercel 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 Vercel Analytics's colors consistently when it generates UI.
Make something in the spirit of Vercel Analytics
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.