So nutzt du: OKLCH Color Converter
- Paste any color (HEX, rgb(), hsl(), oklch()…) or use the picker.
- Adjust Lightness, Chroma and Hue — the slider tracks preview what each change will look like.
- Watch the gamut badge: if the color is outside sRGB, the HEX/RGB fallbacks are automatically gamut-mapped.
- Copy the
oklch()value, or the “CSS with fallback” snippet for older browsers.
What is OKLCH?
OKLCH is a color space designed by Björn Ottosson (2020) and added to CSS in the Color Level 4 specification. It describes a color with three intuitive values: Lightness (0–100%), Chroma (how colorful, roughly 0–0.37 for screen colors) and Hue (an angle from 0 to 360°). Unlike HSL, it is perceptually uniform: two colors with the same L really look equally light to the human eye.
Why developers are switching from HSL
- Predictable palettes: in HSL, yellow at 50% lightness looks far brighter than blue at 50%. In OKLCH, changing only the hue keeps perceived lightness — great for generating consistent button states and design-system scales (the reason Tailwind CSS v4 ships its palette in OKLCH).
- Better accessibility maths: a fixed lightness difference translates into a fairly consistent contrast difference.
- Wide-gamut colors: OKLCH can express Display P3 colors that HEX and rgb() cannot, so modern screens can show more vivid colors.
Gamut and fallbacks
Not every L/C/H combination exists on an sRGB screen. When chroma is too high, this tool keeps lightness and hue and reduces chroma until the color fits, then outputs that as the HEX/RGB fallback. In CSS, write the fallback first and the OKLCH value second; browsers that understand OKLCH use the second line:
color: #e5484d;
color: oklch(63% 0.2 25);OKLCH vs OKLab
OKLab is the same space in rectangular coordinates (L, a, b). It is ideal for mixing and gradients — try the Color Mixer — while OKLCH is easier for humans to edit.
Auch gesucht als: oklch, oklab, perceptual color, hex to oklch, oklch to hex, color picker, p3, gamut.
Passende Tools zu: OKLCH Color Converter
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und SCSS.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
- APCA Contrast Checker — Calculate the APCA lightness contrast (Lc) between text and background, see which uses it’s suitable for, and compare it with the classic WCAG 2 ratio.
Häufige Fragen
Is this an OKLCH color picker?
Do all browsers support oklch()?
oklch() (since 2023). Add a HEX or rgb() fallback line before it if you still support older browsers.