Understand
Palette doctor
Paste your colors and see what's wrong with them, in plain English.
CSS, a brand guide, Tailwind classes — hex codes and utilities like bg-slate-900 both get picked up. Nothing is uploaded.
Some real problems here
Out of 100 — readability, duplication, color-vision safety.
Reading this as a light palette
Detected · everything is measured against the lightest surface
3 things to look at
Your main button blends into the background
Must fixPeople will scan past the thing you most want them to click. This is the single most expensive palette mistake there is.
Your text is hard to read on your background
Worth fixingSmall text will be uncomfortable for older readers and in bright light.
Two of your colors are the same color
Worth fixingNobody can see the difference, but every one of them is another value to keep in sync forever. They multiply work without adding meaning.
Fix my palette
Repairs 3 of 3 findings by moving brightness and intensity only. Your hues don't move, so it still looks like yours.
Seeing what's wrong is always free.
Your colors, in plain words
Medium · Soft
Good for borders, icons and secondary text
Medium · Soft
Good for borders, icons and secondary text
Light · Bold
Good for buttons and highlights
Light · Soft
Good for page backgrounds and cards
Near-white · Balanced
Good for page backgrounds and cards
What it checks
Readable text
Every text-and-background pair, and who it fails.
WCAG 4.5:1
Findable buttons
A control that doesn't separate from its surface is invisible.
3:1 non-text
Duplicate colors
Two names, one color. Most palettes have a pair.
ΔE < 2.3
Color blindness
Pairs that carry meaning but collapse for 1 in 12 men.
3 types simulated
Greyscale
Same brightness everywhere flattens to one grey in print.
Lightness spread
Shouting colors
Full saturation tires the eye and leaves no room to hover.
Chroma ceiling
Then take it somewhere
Fewer colors
Drag to the size you want and see what each stop costs.
Semantic tokens
surface, border, text-muted — each measured, not assumed.
The audit
Findings and thresholds as Markdown for a pull request.
Every answer here is arithmetic
Deterministic · Offline · <1ms · No model
- WCAG relative luminance
- Every contrast ratio on the page, to the letter of the spec.
- CIEDE2000
- How far apart two colors actually look, not how far apart their hex is.
- OKLCH
- Repairs move in perceptual space, so a step is the same size on every hue.