Palette Lab — Preview Colors in Real App UI
See your palette applied to nine real interface patterns — finance dashboard, crypto swap, health app, admin panel, mobile app and more — in light, dark, and glass mode. Check contrast and color-blindness safety, then copy the 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.