How to use the OKLCH Color Converter
- Paste any colour (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 colour 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 colour space designed by Björn Ottosson (2020) and added to CSS in the Color Level 4 specification. It describes a colour with three intuitive values: Lightness (0–100%), Chroma (how colourful, roughly 0–0.37 for screen colours) and Hue (an angle from 0 to 360°). Unlike HSL, it is perceptually uniform: two colours 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 colours: OKLCH can express Display P3 colours that HEX and rgb() cannot, so modern screens can show more vivid colours.
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 colour 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.
Tools that pair well with the OKLCH Color Converter
- 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.
- CSS Variables to Tailwind — Turn your :root colour variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
- Color Name Finder — Paste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
- Color Blindness Simulator — Upload a screenshot or design and see it through eight types of colour vision deficiency side by side — or test a palette for colours that become indistinguishable.
Frequently asked questions
Do all browsers support oklch()?
oklch() (since 2023). Add a HEX or rgb() fallback line before it if you still support older browsers.