Choisissez en espace perceptuel, puis validez le contraste et appliquez Fix vers AA — idéal pour tokens et Tailwind v4.
Full studio here. Need pairs, names, or brand-from-URL? Colorise Pro. · About
Landing du sélecteur : choisissez en OKLCH, puis validez le contraste. Fix et photo ont leurs propres URLs.
Tailwind v4 @theme et design systems.
Publier du HEX sans vérifier les paires de contraste.
Bloc @theme.
@theme { --color-brand: oklch(0.55 0.14 250); }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 |
Collez HEX et copiez oklch() immédiatement.
Contraste corrige la luminosité sans dérive de teinte.