Vercel colors
The Vercel color palette has 4 colors: Black #000000, White #FFFFFF, Off-white #FAFAFA and Blue #0070F3. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from its live website code checked on 16 October 2026.
Vercel color codes
| Color | Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Black | Primary | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | oklch(0% 0 0) |
| White | Background | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | oklch(100% 0 0) |
| Off-white | Neutral | #FAFAFA | rgb(250, 250, 250) | hsl(0, 0%, 98%) | oklch(98.5% 0 0) |
| Blue | Accent | #0070F3 | rgb(0, 112, 243) | hsl(212, 100%, 48%) | oklch(57.3% 0.214 258.2) |
Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.
Where the Vercel colors come from
Vercel does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors vercel.com actually renders, which can differ slightly from print or logo colors.
- Source (live website CSS or SVG): https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2xqqpo47ayxp8.css checked 2026-10-16
- Also: https://vercel.com/ checked 2026-10-16
Vercel color contrast
White text on Vercel black has a contrast ratio of 21.00:1 and passes WCAG AAA for any text size. Used as a text color, Black reaches 21.00:1 on white and 1.00:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| White on Off-white | 1.04:1 | Fails | Lc 0.0 | Not readable |
| Black on Off-white | 20.11:1 | AAA | Lc 103.0 | Preferred for body text |
| White on Blue | 4.55:1 | AA | Lc -76.2 | Fine for body text |
| Black on Blue | 4.61:1 | AA | Lc 33.4 | Non-text elements, placeholder text |
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| Blue on Off-white | 4.36:1 | AA large text | Lc 67.7 | Content text, not long reading |
Vercel colors in CSS and Tailwind
Copy the Vercel palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Black, for hover states, borders and tinted backgrounds.
:root {
--vercel-black: #000000;
--vercel-white: #FFFFFF;
--vercel-off-white: #FAFAFA;
--vercel-blue: #0070F3;
}@import "tailwindcss";
@theme {
--color-vercel-black: #000000;
--color-vercel-white: #FFFFFF;
--color-vercel-off-white: #FAFAFA;
--color-vercel-blue: #0070F3;
}@theme {
--color-vercel-50: #F5F5F5;
--color-vercel-100: #EAEAEA;
--color-vercel-200: #D9D9D9;
--color-vercel-300: #C0C0C0;
--color-vercel-400: #A0A0A0;
--color-vercel-500: #898989;
--color-vercel-600: #737373;
--color-vercel-700: #616161;
--color-vercel-800: #4F4F4F;
--color-vercel-900: #414141;
--color-vercel-950: #000000;
}Named colors closest to the Vercel palette
The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.
How to use a Vercel-style palette
- Lead with Black #000000 for buttons, links and key highlights, with white text on it.
- Give most of the layout to White #FFFFFF and Off-white #FAFAFA, about 60% of the screen, so Black stands out.
- Keep Blue for small accents (around 10%): status colors, illustrations or charts.
- As text on a white page, Black reaches 21.00:1: it passes WCAG AAA for any text size.
To see how vercel.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Black into a full light and dark color system with accessible roles, open it in the Color System Studio.
More brand colors
- Google colors#4285F4 #EA4335 #FBBC05 #34A853
- Apple colors#0071E3 #0066CC #1D1D1F #F5F5F7
- T-Mobile colors#E20074 #A7005A #770141 #000000
- Microsoft colors#F25022 #7FBA00 #00A4EF #FFB900
- Figma colors#FF3737 #FF7237 #874FFF #00B6FF
- Shopify colors#95BF47 #5E8E3E #008060 #18181B
- Trello colors#0052CC #2684FF #253858
- Duolingo colors#58CC02 #1CB0F6 #FF4B4B #FFC800
- Dropbox colors#0061FE #1E1919 #F7F5F2 #14C8EB
- GitHub colors#0FBF3E #101411 #F2F5F3 #909692
- Slack colors#4A154B #E01E5A #36C5F0 #2EB67D
- Notion colors#000000 #0075DE #191918 #FFB110
Trademarks
Frequently asked questions
What is the Vercel hex color?
The main Vercel color is Black #000000, which is rgb(0, 0, 0) in RGB. It comes from the CSS and SVG files of Vercel's live website (Vercel publishes no official hex values), checked on 16 October 2026.
What colors does Vercel use?
Vercel uses 4 core colors: Black #000000, White #FFFFFF, Off-white #FAFAFA and Blue #0070F3.
What is Vercel black in RGB, HSL and OKLCH?
Vercel black #000000 is rgb(0, 0, 0), hsl(0, 0%, 0%) and oklch(0% 0 0). The closest named color is Black #000000.
Should text on Vercel black be white or black?
White text reads better on Vercel black: it has a contrast ratio of 21.00:1, which passes WCAG AAA for any text size.
Where do these Vercel colors come from?
The hex values were read from Vercel's live website code at https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2xqqpo47ayxp8.css on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.
Can I use the Vercel colors in my own design?
Colors on their own are not owned, but Vercel's name, logo and the way it combines its colors are trademarks. Use these values to match Vercel when you refer to it, follow its official guidelines, and do not imply a link to Vercel in your own brand.
Use the Vercel colors
Check vercel.com live, build a color system from Black, or remix the palette.