Notion color palette
TechNotion's brand relies on an elegant black-and-white palette with warm undertones, creating a clean canvas that adapts to any user's workspace content.
notion.soNotion colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Notion BlackPrimary0, 0, 0
- Notion DarkSecondary55, 53, 47
- Notion BlueAccent46, 170, 220
Surfaces
Page, cards and dividers.- Notion WhiteBackground255, 255, 255
- Notion SurfaceSurface247, 246, 243
- Notion BorderBorder233, 229, 224
Text
Three tiers of copy.- Notion TextText55, 53, 47
- Notion SecondarySecondary text120, 119, 116
- Notion MutedMuted text155, 154, 151
Semantic
Feedback and state colors.- Notion GreenSuccess106, 176, 76
- Notion YellowWarning223, 171, 1
- Notion RedError224, 62, 62
- Notion Blue InfoInfo46, 170, 220
Use Notion's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
notion-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2EAADC;
--error: #E03E3E;
--accent: #2EAADC;
--border: #E9E5E0;
--primary: #000000;
--success: #6AB04C;
--surface: #F7F6F3;
--warning: #DFAB01;
--secondary: #37352F;
--text-muted: #9B9A97;
--background: #FFFFFF;
--text-primary: #37352F;
--text-secondary: #787774;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.3:1
Pass
Text on surface
Needs 4.5:1 for body text
11.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Notion background, border and text colors
The quiet part of the Notion palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Notion WhiteBackground
- HEX
- RGB
- HSL
- Notion SurfaceSurface
- HEX
- RGB
- HSL
- Notion BorderBorder
- HEX
- RGB
- HSL
- Notion TextText
- HEX
- RGB
- HSL
- Notion SecondarySecondary text
- HEX
- RGB
- HSL
- Notion MutedMuted text
- HEX
- RGB
- HSL
About Notion's colors
Notion's palette is warm-neutral rather than pure gray. Every shade carries a subtle brown-yellow undertone (see #37352F, #F7F6F3), giving the interface an organic, paper-like quality that distinguishes it from typical SaaS products.
Warm neutrals (#37352F text on #F7F6F3 surface) mimic ink on aged paper
Notion Blue (#2EAADC) is the sole accent, used exclusively for interactive elements
Content block colors (red, green, yellow, blue, purple) are desaturated to remain background-appropriate
Psychology
The warm, paper-like palette evokes creativity, writing, and craftsmanship. It feels personal rather than corporate. The subdued approach signals that Notion is a tool that gets out of the way and lets your content shine.
Evolution
Notion's visual identity has been remarkably consistent, with the warm neutral palette established from early versions. Recent updates have refined the specific gray tones and introduced a slightly more structured design system for marketing.
Where Notion uses each color
- Primary
Black is used for Notion's logo, key headlines, and the most important navigation elements.
- Secondary
Dark warm brown (#37352F) serves as the primary body text color, softer than pure black for extended reading.
- Accent
Notion Blue (#2EAADC) highlights links, selected items, and interactive controls without overwhelming the neutral canvas.
- Backgrounds
The warm off-white (#F7F6F3) surface creates the signature paper-like feel that distinguishes Notion from clinical white interfaces.
- Text
The warm gray hierarchy (#37352F → #787774 → #9B9A97) maintains readability while feeling organic.
- Semantic
Desaturated versions of primary hues serve as block and highlight colors, maintaining the calm, content-focused aesthetic.
Notion color questions
Hex codes, RGB values, neutrals and how to use the palette.
Notion uses warm-tinted neutrals instead of standard grays. The body text (#37352F) has a brown undertone, and the background (#F7F6F3) has a warm yellow tint, creating a paper-like canvas that feels more organic than typical SaaS interfaces.
Notion's primary accent color is a medium blue (#2EAADC), used for links, selected items, and interactive elements. It's the only vivid color in the default interface, keeping the focus on user content.
Notion offers desaturated versions of red, orange, yellow, green, blue, and purple for text and background highlights. These are deliberately muted so they work as subtle markers rather than attention-grabbing elements.
Notion's primary color is Notion 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 Notion Dark, #37352F, and the accent is Notion Blue, #2EAADC. Together with the primary they make up the three brand colors at the top of this page.
Notion uses #FFFFFF for backgrounds, #F7F6F3 for surfaces and #E9E5E0 for borders. Text runs #37352F, #787774 and #9B9A97 from strongest to most muted.
2 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 Notion's colors consistently when it generates UI.
Make something in the spirit of Notion
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.