OKLCH Color Picker

OKLCH color picker — axes, HEX ↔ oklch(), Tailwind scales

This page is only the perceptual picker: lightness × chroma on one plane, hue on its own control, live UI preview, and export. Contrast Fix and photo extract live on their own landings so this URL answers picker-specific questions without cloning the Fix-first homepage.

What each OKLCH axis does

L (0–1) is perceptual lightness — raise it and the color looks lighter without the hue spin HSL often causes. C is chroma (colorfulness); keep it modest for UI text, push it for accents. H is hue in degrees. Worked example: start at oklch(0.62 0.18 35) (warm brand), drop L to 0.45 for a text role, then open Contrast with ?fg=&bg= to Fix AA while hue 35° stays put.

Try the plane →

HEX ↔ oklch() with ?c=

Paste #c73d16 or open /en/oklch-picker?c=c73d16. The strip shows HEX and oklch() together. Wide-gamut Display P3 colors may clip to sRGB for CSS that targets today’s web; we flag out-of-sRGB when relevant so you do not ship an unprintable token by accident.

Building a Tailwind v4 scale

Pick a 500-ish seed, generate tints/shades or a UI scale in the side panel, then export @theme. Cross-check stops on /en/tailwind for WCAG pairs, or Fix any text role on /en/contrast.

Fix a seed on a surface →

Tailwind OKLCH reference →

Why this picker vs oklch.com

oklch.com is excellent for exploring the space. OKLCH Studio adds Fix (AA without hue drift), on-device photo palette, shareable ?c= / ?fg=&bg= links, and Tailwind @theme export in the same free studio — so the picker is a step in a shipping workflow, not only a converter.

When to use this picker page

Design-token work, HEX→oklch() migration, Tailwind v4 @theme seeds, and any case where you need L and C editable together before you care about contrast Fix.

Picker mistakes

Copying HEX without checking contrast; pushing chroma until text fails AA; treating HSL lightness as perceptual; ignoring Display P3 clip warnings when targeting sRGB CSS.

Deep link + @theme

Share a color with ?c=, then drop the token into Tailwind v4.

/* https://colorise.online/en/oklch-picker?c=c73d16 */
@theme {
  --color-brand: oklch(0.62 0.18 35);
}

OKLCH color picker: OKLCH vs HSL vs HEX

HEX stores a display color. HSL is convenient but not perceptual. OKLCH separates lightness, chroma, and hue the way your eye expects — better for scales, contrast Fix, and UI tokens.

Space	Best for	Watch out
OKLCH	Scales, accessible pairs, CSS oklch()	Wide-gamut colors may need clip to sRGB
HSL	Quick hue spins in familiar UIs	Lightness shifts often change perceived hue
HEX	Copy-paste into any design tool	No structure — hard to build systems

FAQ

What is an OKLCH color picker?

A tool that edits lightness, chroma, and hue separately. This page uses an L×C plane plus a hue control so perceptual edits stay stable — unlike HSL, where “lightness” is not how light the color looks.

How do I convert HEX to oklch() here?

Paste HEX into the picker or open ?c=rrggbb (no #). Copy oklch() from the result strip. The reverse path (edit OKLCH → copy HEX) works the same way.

Does oklch() work in all browsers?

Modern evergreen browsers support oklch() in CSS Color 4. For older targets, keep a HEX fallback. This picker always shows both.

Wide gamut / Display P3?

OKLCH can describe colors outside sRGB. When a color is out of sRGB gamut we note clipping so your CSS token stays displayable on typical screens.

How is this different from the homepage?

Home leads with Contrast Fix. This URL’s guide and FAQ stay on axes, conversion, gamut, and Tailwind scales — not the Fix-first homepage story.

Can I share a picked color?

Copy link writes ?c= (HEX without #) so a teammate opens the same color on this picker page.

Picker workflow

Set hue, then L×C

Preview and scales

Export or Fix