Picker OKLCH pod tokeny
Landing pickera — potem kontrast z Fix.
Zastosowanie
Tailwind v4 @theme.
Unikaj
HEX bez pary kontrastu.
Export
@theme
@theme { --color-brand: oklch(0.55 0.14 250); }Picker kolorów OKLCH
Wybieraj percepcyjnie, potem sprawdź kontrast i użyj Fix do AA — pod tokeny i Tailwind v4.
Full studio here. Need pairs, names, or brand-from-URL? Colorise Pro. · About
Pick
Photo
Read
Kroki
Selektor kolorów 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?
Wklej HEX, skopiuj oklch().