Skip to content
ToolQivo

HEX to OKLCH Converter

HEX and RGB to the OKLCH colour space for modern CSS — and back, gamut-mapped.

Converters Reviews Free · no sign-up

Paste an oklch() value to convert the other way — out-of-gamut colours are mapped into sRGB the way CSS does it.

OKLCH
—

Quick Tool Overview

The HEX to OKLCH Converter turns HEX, RGB and named colours into CSS oklch() values and converts oklch() back to HEX with CSS Color 4 gamut mapping, showing lightness, chroma and hue and a fallback rule.

What it does
Converts HEX and RGB to OKLCH and back
You give it
A HEX, rgb(), colour name or oklch() value
You get back
oklch() or HEX with L, C, h and CSS
Best for
Modern CSS, design tokens and Tailwind v4
Converters Free, unlimited use No sign-up Runs in your browser

About the HEX to OKLCH Converter

OKLCH is the colour space modern CSS is moving to. Its lightness is perceptual — two colours with the same L really do look equally light — which makes it far better than HSL for building palettes, hover states and accessible contrast, and it can describe the wider colours of P3 displays. Tailwind CSS v4 defines its whole palette in it.

Paste a HEX, RGB or named colour and get the oklch() value, at CSS-friendly or full precision, with its lightness, chroma and hue broken out and a ready-made CSS rule with a HEX fallback. Paste an oklch() value to go the other way: colours outside the sRGB gamut are mapped the way the CSS specification describes, by reducing chroma while keeping lightness and hue.

Key features of the HEX to OKLCH Converter

Correct OKLab maths

Uses the OKLab definition adopted by CSS, verified against the specification’s red.

Spec gamut mapping

Out-of-gamut OKLCH colours are brought into sRGB by reducing chroma, as browsers do.

Fallback snippet

A CSS rule with a HEX fallback followed by the oklch() value, ready to paste.

Two precisions

Short values for stylesheets or full precision for design tokens.

Components broken out

Lightness, chroma and hue are shown separately with a gamut check.

How to use the HEX to OKLCH Converter

  1. 1

    Paste a colour

    HEX, rgb(), a name, or an oklch() value to convert back.

  2. 2

    Choose the precision

    CSS-friendly rounding or full precision for design tokens.

  3. 3

    Read L, C and h

    Lightness, chroma and hue are shown separately, with a gamut check.

  4. 4

    Copy the CSS

    Take the oklch() value alone or the rule with a HEX fallback.

Frequently asked questions

A cylindrical form of the OKLab colour space: L is perceived lightness, C is chroma (colourfulness) and h is the hue angle. It was designed by Björn Ottosson in 2020.

Reviews of the HEX to OKLCH Converter

What people who use the HEX to OKLCH Converter think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the HEX to OKLCH Converter. It takes half a minute and no account.

Write the first review

More converters