Super Boring Tools

Search tools

Find a tool by name or what it does.

HEX to OKLCH Converter

Paste a hex color and get the CSS oklch() value with lightness, chroma, and hue.

3, 4, 6, or 8 digit hex, with or without #. Converts live, all in your browser.

OKLCH

CSSoklch(58.54% 0.2041 277.12)
58.54%
Lightness (L)
0.2041
Chroma (C)
277.12°
Hue (H)

Everything is converted in your browser. Nothing is uploaded.

How to convert HEX to OKLCH online

  1. Enter a hex color

    Type or paste a 3, 4, 6, or 8 digit hex code, with or without the # prefix, or use the color picker.

  2. Read the OKLCH values

    The CSS oklch() string, lightness, chroma, and hue update live as you type, next to a color swatch.

  3. Pick a lightness format

    Switch lightness between a percentage and a 0 to 1 number to match how your stylesheet writes oklch().

  4. Copy the result

    Copy the oklch() value on its own from the row button, or copy every value at once with the main button.

Why use this tool

CSS-ready oklch() output

The result is a valid oklch() value you can paste straight into a stylesheet, with lightness as a percentage or a 0 to 1 number.

Alpha carried through

An 8 digit hex code keeps its transparency: the alpha channel appears in the oklch() value using slash notation.

Separate L, C, and H readouts

Lightness, chroma, and hue are shown as individual values beside a live swatch, so you can adjust one channel with confidence.

Handles shorthand and greys

Shorthand 3 and 4 digit hex codes expand automatically, and grey colors are flagged so a meaningless hue angle never misleads you.

Runs entirely in your browser

Colors are converted on your device. Nothing is uploaded and there is no signup.

About this tool

This tool converts any hex color into OKLCH, the perceptual color notation supported by modern CSS. Enter a 3, 4, 6, or 8 digit hex code, or pick a color from the swatch, and the matching oklch() value appears instantly alongside separate lightness, chroma, and hue readouts and a live preview of the color.

OKLCH is designed so equal numeric steps look like equal visual steps. Lightness runs from 0 for black to 1 for white and tracks how bright a color actually appears, chroma measures how colorful it is with 0 meaning pure grey, and hue is an angle from 0 to 360 degrees. That makes OKLCH a better base than HSL for tint scales, design tokens, and accessible palettes: lower the L of an OKLCH color and only its perceived brightness changes, while HSL lightness shifts can also change apparent saturation. Every color a hex code can express converts exactly, so nothing on this path needs to be clamped or approximated.

A few practical details: an 8 digit hex code carries its alpha channel into the output using slash notation, greys report a chroma of effectively zero with the hue shown as 0, and the lightness toggle switches between the percentage form and the plain number form of oklch(). For other color spaces, try the RGB to LAB converter or the HWB color converter.

Frequently asked questions

How does the HEX to OKLCH conversion work?
The hex code is read as an sRGB color, converted to a perceptually uniform color space, and expressed as lightness, chroma, and hue. The result matches what CSS itself computes for oklch(), so the copied value renders the exact same color.
Is my color data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.
Which hex formats are supported?
Codes with 3, 4, 6, or 8 hex digits, with or without the # prefix. The 4 and 8 digit forms include an alpha channel, which is kept in the oklch() output as slash notation.
Why is the hue 0 for grey colors?
On the grey axis chroma is effectively zero, so the hue angle has no visual meaning. The tool reports 0 and shows a note instead of an arbitrary angle.
Should lightness be a percentage or a number?
CSS accepts both: 62.8% and 0.628 mean the same lightness. Use the toggle to match the convention in your codebase; many design token setups prefer the percentage form.
Why use OKLCH instead of HSL?
OKLCH is perceptually uniform, so changing one channel changes only what it names. Two colors with the same OKLCH lightness look equally bright, which is not true of HSL, making OKLCH better for palettes and contrast work.

Related tools