Color tools
A small kit of the color tools I reach for most when designing and building for the web. Everything runs locally in your browser — nothing is uploaded, and there is no sign-up. Pick a color once and it threads through every tool below.
Picker & converter
Pick or type a color and read it back in every format you need — copy any one with a click.
CMYK is a naïve sRGB approximation — for print, trust your ICC-managed proof. OKLCH and LAB are the perceptual spaces worth knowing.
Contrast checker
WCAG 2.1 contrast ratio between text and its background, with the pass/fail thresholds designers and devs are held to.
AA needs 4.5:1 for normal text, 3:1 for large. AAA needs 7:1 and 4.5:1. UI components and graphics need 3:1.
Harmonies
Classic color-wheel relationships built off the picker color. Click any swatch to copy its hex.
Tonal scale
A 50–950 ramp from the picker color, stepped in OKLCH lightness so the steps look even. Drop straight into a design-token set.
Mixer
Blend two colors. The space you interpolate in changes the result a lot — sRGB muddies through grey, OKLCH stays vivid.
Gradient builder
Two-stop CSS gradient with adjustable angle. Copy the rule, including an OKLCH version for richer transitions.
Want to see how the same color shifts between sRGB, Display P3, Rec. 2020 and HDR? That lives next door in colorspace tools.