Comment utiliser : 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.
Aussi recherché comme : oklch, oklab, perceptual color, hex to oklch, oklch to hex, color picker, p3, gamut.
Outils complémentaires : 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.
- Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et 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.
Questions fréquentes
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.