Color Scale Generator — 12-Step UI Scales in OKLCH
Turn one accent color into a complete 12-step UI color system: light and dark scales, a matching tinted gray, and alpha variants — with text steps enforced against WCAG contrast. Copy everything as CSS variables.
The interactive controls require JavaScript. You can browse named colors, contrast results, gradients, and their codes using the links below.
Color tools
- Contrast checker
Test foreground and background colors against WCAG AA and AAA.
- Palette Studio
Create palettes, lock colors, and explore color harmonies.
- Color scale generator
Build light and dark 12-step OKLCH scales for interfaces.
- Palette Lab
Preview a palette in practical interface layouts.
- Gradient editor
Design a gradient and copy its CSS.
- Image palette extractor
Extract dominant colors from an image.
Color and accessibility guides
- What a Color Contrast Ratio Actually Measures
Where the 4.5:1 number comes from, how the 1:1–21:1 scale works, and the mistakes that make text unreadable even when the math looks fine.
- WCAG AA vs AAA: Which Contrast Level Do You Need?
The real differences between WCAG conformance levels, the thresholds for normal text, large text, and UI elements, and a practical rule for choosing.
- How to Fix a Failing Contrast Ratio Without Losing Your Brand Color
Contrast comes almost entirely from lightness, not hue. How to nudge a brand color to WCAG compliance in OKLCH while keeping it recognizably yours.
- OKLCH vs HSL: Why Modern CSS Color Uses OKLCH
HSL says yellow and blue have the same lightness — your eyes disagree. What perceptual uniformity means, and where OKLCH changes gradients and palettes.
- Readable Text Over Gradients: Scrims, Worst Points, and What Fails
A gradient has no single contrast ratio — text can pass at one end and fail at the other. How to find the worst point and fix it with a scrim.
- How to Build an Accessible Color Palette From Scratch
A practical order of operations: lock the text colors first, derive the accents, give every semantic color a 3:1 UI fallback, and test pairs as you go.