For the best experience, open this on desktop — tuning controls, the color wheel, and the full compatibility breakdown are hidden or simplified at this width.
Primary, 3 accents, status colors, a tunable Paper neutral system, 100–900 ramps, and a per-pair compatibility breakdown. Export-ready. No signup.
Step 1 — your color
OR
Pick tags to refine suggestions
Topic — what is this for?
Feel — what mood?
Step 2 — how the accents are derived
Weights
Hue0.25
Chroma0.15
Lightness0.15
Accessibility0.30
Modernity0.15
Primary hue gap60°
Accent hue gap30°
Suggested variants% = compatibility with your typed input · click to swap as primary
HSL Math
SchemeAnalogous
Saturation drop30%
Lightness bias+0%
Material Library
FilterAll
Sweet-spot center0.22
Min distance from primary0.05
Hybrid
SchemeAnalogous
Saturation drop30%
Snap aggressivenessMedium
⚠Low separation — these colors are too similar to your primary to work as distinct accents. Try another method, or adjust the controls above.
View
Grades
WCAG
Palette
% = pair compatibility with primary · click body to copy · lock to keep
Status colors
Adaptive shift toward primary hue
Paper
Neutrals tinted toward the primary hue — independent of Grid / Line view
Tint strength0.014
Hue offset0°
Bg lightness0.985
Text lightness0.13
Compatibility breakdown
Each row is a pair of swatches. The five components (hue / chroma / lightness / accessibility / modernity) are scored 0–100; the overall % is their weighted sum using the Weights sliders above.