Sanity color palette
SaaSSanity's color identity centers on a vibrant red primary, supported by a minimalist grayscale palette for UI clarity and contrast. The brand uses bold color for highlights and clear, neutral tones for backgrounds and text.
sanity.ioSanity colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Sanity RedPrimary240, 62, 47
- Sanity BlackSecondary24, 24, 24
- Sanity YellowAccent255, 179, 0
Surfaces
Page, cards and dividers.- Sanity WhiteBackground255, 255, 255
- Sanity Light GraySurface247, 247, 247
- Sanity Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Sanity BlackText24, 24, 24
- Sanity Medium GraySecondary text117, 117, 117
- Sanity Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Sanity GreenSuccess0, 196, 140
- Sanity YellowWarning255, 179, 0
- Sanity RedError240, 62, 47
- Sanity BlueInfo59, 130, 246
Use Sanity's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sanity-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #F03E2F;
--accent: #FFB300;
--border: #E0E0E0;
--primary: #F03E2F;
--success: #00C48C;
--surface: #F7F7F7;
--warning: #FFB300;
--secondary: #181818;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #181818;
--text-secondary: #757575;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
16.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Sanity gray and neutral colors
The quiet part of the Sanity palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Sanity WhiteBackground
- HEX
- RGB
- HSL
- Sanity Light GraySurface
- HEX
- RGB
- HSL
- Sanity Border GrayBorder
- HEX
- RGB
- HSL
- Sanity BlackText
- HEX
- RGB
- HSL
- Sanity Medium GraySecondary text
- HEX
- RGB
- HSL
- Sanity Muted GrayMuted text
- HEX
- RGB
- HSL
About Sanity's colors
Sanity's palette is built around a high-contrast red and a range of neutral grays, creating a clean and modern interface. The use of color is purposeful, with red reserved for branding and highlights.
Primary red contrasts with neutral backgrounds.
Accent yellow is used sparingly for highlights.
Grayscale tones support readability and hierarchy.
Psychology
The bold red conveys energy and attention, aligning with Sanity's innovative positioning. Neutral grays provide a sense of stability and professionalism.
Evolution
Sanity's palette has remained consistent, with the red primary and grayscale UI established early in the brand's history. Minor adjustments have been made to gray tones for improved accessibility.
Where Sanity uses each color
- Primary
Sanity Red is featured in the logo, primary buttons, and key highlights.
- Secondary
Sanity Black is used for navigation bars and main text.
- Accent
Sanity Yellow appears in notifications and subtle highlights.
- Backgrounds
Sanity White and Light Gray are used for app backgrounds and panels.
- Text
Sanity Black and Medium Gray are used for headings and body text, with Muted Gray for secondary or disabled text.
- Semantic
Sanity Green, Yellow, and Blue are used for success, warning, and informational states respectively, while Sanity Red also serves as the error color.
Sanity color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Sanity primary color hex code is #F03E2F. This red is used for branding and key UI elements.
Sanity Red (#F03E2F) is RGB(240, 62, 47) and approximately CMYK(0, 74, 80, 6). Always use the hex code for digital applications.
Sanity uses a range of grays: Sanity Black (#181818), Medium Gray (#757575), Muted Gray (#BDBDBD), and Light Gray (#F7F7F7). These provide contrast and hierarchy in the interface.
Use Sanity Red (#F03E2F) for primary actions and branding, and rely on the neutral grays for backgrounds, surfaces, and text. Accent and semantic colors should be used sparingly for highlights and status indicators.
The secondary color is Sanity Black, #181818, and the accent is Sanity Yellow, #FFB300. 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 Sanity's colors consistently when it generates UI.
Make something in the spirit of Sanity
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.