OKLCH Color Picker

OKLCH is a perceptually uniform color space defined by Lightness, Chroma, and Hue. Unlike HSL or RGB, equal numeric changes in OKLCH lightness look equally different to the human eye, and changing the hue does not unexpectedly shift perceived brightness. This makes it ideal for building consistent tonal palettes and accessible color systems.

No. This OKLCH color picker runs entirely in your browser. All conversions, gamut checks, palette generation, and exports happen locally in JavaScript - nothing is uploaded, logged, or transmitted anywhere.

A gamut is the range of colors a display can actually show. OKLCH can describe colors that are more saturated than a screen can render. When a color is out of the sRGB gamut, most standard monitors cannot display it exactly; Display-P3 is a wider gamut available on many modern screens. The tool flags when your color exceeds each gamut so you know it will be clamped on those displays.

Tailwind v4 uses native CSS color tokens, so you can paste the generated @theme block straight into your CSS. Each step becomes a --color-<name>-<step> token (e.g. --color-brand-500) that Tailwind exposes as utilities like bg-brand-500 and text-brand-700. The tool outputs the values as oklch() so they stay perceptually uniform.

The palette keeps your base hue fixed and sweeps lightness across the standard Tailwind steps (50–950). Chroma is gently reduced toward the lightest and darkest ends so the ramp stays natural and in-gamut, instead of getting muddy or clipping. The result is an even, accessible scale built around your chosen color.

They estimate how readable text would be in your color against black and white. WCAG 2.1 gives the classic contrast ratio (AA needs 4.5:1 for normal text) and is still the standard you comply with today. APCA is a newer, perceptually-tuned method that was explored for WCAG 3 but removed from the working draft in 2023, so WCAG 3 has not settled on a contrast algorithm yet - treat APCA as a helpful preview, not an official requirement. Use both to check whether a palette step works as a text or background color before shipping it.

Yes. The current color is encoded in the page URL, so copying the link preserves your exact L, C, and H values. Anyone who opens it lands on the same color and generated palette - no account or save step required.