Vai allo strumento
OKLCH Studio

Selettore colore OKLCH

Scegli in spazio percettivo, poi valida il contrasto e usa Fix per AA — ideale per token e Tailwind v4.

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

Pick
Photo
Read

Passi

  1. 01

    Scegliere

    OKLCH + armonie.

  2. 02

    Contrasto

    Fix se serve.

  3. 03

    Export

    CSS o JSON.

Selettore OKLCH per token

Landing del picker: scegli in OKLCH, poi valida il contrasto. Fix e foto hanno URL dedicate.

Piano L×C

Meglio di HSL per scale e accessibilità.

Apri selettore →

Poi contrasto

Ruoli testo/fondo e Fix ad AA.

Contrasto →

Uso

Tailwind v4 @theme e design system.

Evita

Pubblicare HEX senza controllare le coppie di contrasto.

Tailwind

Blocco @theme.

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

Selettore colore OKLCH: 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()?

Incolla HEX e copia oklch().

E Fix?

Il contrasto corregge la luminosità senza drift di tinta.