Base color
Pick a starting colour — the palette rebuilds from it.
H
S
L
Generated palette
Click any swatch to copy its hex value. Roles are assigned by lightness.
Live preview
Typography, controls and forms rendered with the current palette.
Case Study
Design with confidence
A well-balanced palette shapes hierarchy, mood, and trust. Preview typography, controls and accents together before committing.
H1Display heading
H2Section title
PBody copy sits comfortably on the surface with strong readability.
SMSupporting caption or metadata.
Read more in the documentation.
Buttons
Form
Accent card
Accents work best in small doses — badges, borders, focus rings, highlights.
WCAG contrast
Ratios between palette colours. AA ≥ 4.5 (body) or ≥ 3.0 (large text). AAA ≥ 7.0.
Design tokens
Export the palette in your preferred format.
Color Library
Over 240 named colours across 11 shade families. Click any name to use it as your base.