Neutral Colors: The Unsung Heroes
60% of your design — and often overlooked.
Why Neutrals Matter
Following the 60-30-10 rule, neutrals make up the majority of your interface. They're the canvas that lets your brand colors shine. Without well-chosen neutrals, even beautiful accent colors will feel off.
Neutrals aren't just "gray." They include whites, off-whites, blacks, and the full spectrum of grays — each with potential undertones that subtly influence mood.
Neutral Undertones
"Pure" gray is rare in professional design. Most palettes use grays with subtle undertones:
Pure Gray
No undertone — truly neutral. Can feel cold or sterile.
Warm Gray
Yellow/brown undertone. Cozy, approachable, natural.
Cool Gray
Blue undertone. Modern, tech, professional.
🎯 Pro Tip
Match your neutral undertone to your primary color. Blue primary? Use cool grays. Orange primary? Use warm grays. This creates subtle cohesion throughout your design.
The Neutral Scale
A complete neutral palette typically includes 9-11 shades from nearly-white to nearly-black:
Dark Mode Neutrals
Dark mode isn't just inverting your scale. The relationship between levels changes:
Light Mode
Background: 50-100
Text: 700-900
Contrast: ~15:1
Dark Mode
Background: 900-950
Text: 100-300
Contrast: ~12:1
Check accessibility requirements for both modes.
Where Neutrals Go
Generate Complete Palettes
Our AI creates full palettes including a complete neutral scale matched to your brand colors.
Create Your Palette