Seletor OKLCH
Landing do picker — depois valide contraste com Fix.
Uso
@theme Tailwind v4.
Evite
Tokens sem par acessível.
Export
@theme
@theme { --color-brand: oklch(0.55 0.14 250); }Seletor de cor OKLCH
Escolha em OKLCH perceptual, depois verifique contraste e use Fix para AA — ideal para tokens e Tailwind v4.
Full studio here. Need pairs, names, or brand-from-URL? Colorise Pro. · About
Pick
Photo
Read
Passos
Seletor de cor 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.
| 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
HEX → oklch?
Cole HEX e copie oklch().