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 logo is a trademark of Notion. Used for informational purposes.
Brand Colors
Notion Black
primary
Notion Dark
secondary
Notion Blue
accent
Surfaces & Borders
Notion White
background
Notion Surface
surface
Notion Border
border
Typography
Notion Text
textPrimary
Notion Secondary
textSecondary
Notion Muted
textMuted
Semantic Colors
Notion Green
success
Notion Yellow
warning
Notion Red
error
Notion Blue Info
info
Accessibility
textPrimary / background
textPrimary / surface
textSecondary / background
textSecondary / surface
textMuted / background
textMuted / surface
Color Theory
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
Color 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.
How Notion Uses 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.
Typography
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.
Agent integration
Use Notion's Colors in Your Agent
Terminal
Copies full install command. Saves skill to .claude/skills/notion/ — auto-detected on next run.
Included in the skill file
- 113 color roles — hex, HSL, and CSS variable names
- 2WCAG contrast rules for accessible pairings
- 3Auto-applies Notion's palette when generating UI
Frequently Asked Questions
Create Something Inspired by Notion
Generate a unique color palette inspired by Notion's aesthetic using AI.