v0 color palette
SaaSv0 employs a minimalist and modern color system centered around deep black and neutral grays, reflecting its focus on clarity and simplicity in SaaS UI design. The palette is monochromatic with subtle accent hues for interactive elements.
v0.devv0 colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- v0 BlackPrimary0, 0, 0
- v0 CharcoalSecondary24, 24, 27
- v0 IndigoAccent99, 102, 241
Surfaces
Page, cards and dividers.- v0 WhiteBackground255, 255, 255
- v0 Light GraySurface244, 244, 245
- v0 Border GrayBorder228, 228, 231
Text
Three tiers of copy.- v0 CharcoalText24, 24, 27
- v0 Medium GraySecondary text113, 113, 122
- v0 Muted GrayMuted text161, 161, 170
Semantic
Feedback and state colors.- v0 GreenSuccess34, 197, 94
- v0 YellowWarning250, 204, 21
- v0 RedError239, 68, 68
- v0 BlueInfo59, 130, 246
Use v0's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
v0-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #EF4444;
--accent: #6366F1;
--border: #E4E4E7;
--primary: #000000;
--success: #22C55E;
--surface: #F4F4F5;
--warning: #FACC15;
--secondary: #18181B;
--text-muted: #A1A1AA;
--background: #FFFFFF;
--text-primary: #18181B;
--text-secondary: #71717A;
}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.7: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
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
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
v0 gray and neutral colors
The quiet part of the v0 palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- v0 WhiteBackground
- HEX
- RGB
- HSL
- v0 Light GraySurface
- HEX
- RGB
- HSL
- v0 Border GrayBorder
- HEX
- RGB
- HSL
- v0 CharcoalText
- HEX
- RGB
- HSL
- v0 Medium GraySecondary text
- HEX
- RGB
- HSL
- v0 Muted GrayMuted text
- HEX
- RGB
- HSL
About v0's colors
v0's color palette is rooted in monochromatic blacks and grays, with a single accent color for highlights. This approach ensures a neutral, accessible, and highly legible interface.
Primary black contrasts with white backgrounds for clarity.
Accent indigo highlights interactive elements.
Neutral grays create hierarchy and depth.
Psychology
The black and gray tones convey professionalism, focus, and modernity. Indigo as an accent adds a sense of innovation and approachability.
Evolution
v0's palette has remained consistent since launch, emphasizing stability and clarity. Minor adjustments to gray tones have improved accessibility and contrast.
Where v0 uses each color
- Primary
Used for logo, navigation bar, and primary buttons.
- Secondary
Appears in headers, footers, and UI containers.
- Accent
Highlights active states, links, and call-to-action buttons.
- Backgrounds
White and light gray backgrounds are used for main app screens and cards.
- Text
Charcoal and medium gray are used for primary and secondary text respectively.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational messages.
v0 color questions
Hex codes, RGB values, neutrals and how to use the palette.
The v0 primary color hex code is #000000. This is used for the logo and main navigation.
The RGB value of v0 Black (#000000) is rgb(0, 0, 0). This pure black is used throughout the brand's core UI.
v0 uses several gray tones: #18181B (Charcoal), #71717A (Medium Gray), #A1A1AA (Muted Gray), and #E4E4E7 (Border Gray). These provide hierarchy and subtlety in the interface.
Use #000000 for primary actions and branding, grays for backgrounds and secondary elements, and #6366F1 as the accent for interactive elements. Semantic colors are reserved for status indicators and alerts.
The secondary color is v0 Charcoal, #18181B, and the accent is v0 Indigo, #6366F1. Together with the primary they make up the three brand colors at the top of this page.
3 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 v0's colors consistently when it generates UI.
Make something in the spirit of v0
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.