Naar tool
OKLCH Studio

OKLCH-kleurkiezer

Kies perceptueel, check daarna contrast en gebruik Fix naar AA — ideaal voor tokens en Tailwind v4.

Full studio here. Need pairs, names, or brand-from-URL? Colorise Pro. · About

Pick
Photo
Read

Stappen

  1. 01

    Kiezen

    OKLCH + harmonieën.

  2. 02

    Contrast

    Fix indien nodig.

  3. 03

    Export

    CSS of JSON.

OKLCH-picker voor tokens

Landing van de picker: kies in OKLCH, valideer daarna contrast. Fix en foto hebben eigen URL’s.

L×C-vlak

Beter dan HSL voor schalen en toegankelijkheid.

Picker openen →

Daarna contrast

Tekst-/vlakrollen en Fix naar AA.

Contrast →

Gebruik

Tailwind v4 @theme en design systems.

Vermijd

HEX publiceren zonder contrastparen te checken.

Tailwind

@theme-blok.

@theme { --color-brand: oklch(0.55 0.14 250); }

OKLCH-kleurkiezer: 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.

SpaceBest forWatch out
OKLCHScales, accessible pairs, CSS oklch()Wide-gamut colors may need clip to sRGB
HSLQuick hue spins in familiar UIsLightness shifts often change perceived hue
HEXCopy-paste into any design toolNo structure — hard to build systems

FAQ

HEX → oklch()?

Plak HEX en kopieer oklch().

En Fix?

Contrast past lichtheid aan zonder tint-drift.