Why use OKLCH over HSL?

HSL's lightness is mathematically defined but perceptually broken — yellow at 50% looks much brighter than blue at 50%. OKLCH is built on the OKLAB color appearance model, so equal lightness values look equal across all hues. Crucial when building consistent design-system ramps.

What's the lightness range?

0 to 1 in CSS oklch() (0 = black, 1 = white). Some tools show 0–100% — both are valid. The tool defaults to the 0–1 convention used by browsers.

Why does my OKLCH value clip to RGB?

OKLCH can express colors outside the sRGB gamut (especially highly saturated greens and cyans). When converting back to sRGB the value is clipped. Use Display P3 mode if you're targeting wide-gamut displays.

oklch · oklab · perceptual · live · local

Convert to OKLCH / OKLAB

Q: Is anything sent to a server?

No — math runs in your browser.

Modern perceptual color spaces. Equal-lightness OKLCH values look equally bright unlike HSL. Supported by every evergreen browser since 2023.

OKLCH / OKLAB Converter

Lightness

62.31%

perceptual

Chroma

0.188

color amount

Hue

259.8°

angle

Status

valid

live

input · color

HEX or pick

Live swatch

output · preview

OKLCH

oklch(62.31% 0.188 259.8)

OKLAB

oklab(62.31% -0.0332 -0.1851)

RGB

rgb(59, 130, 246)

Quick Start

How to use OKLCH and OKLAB

Paste a color and read the modern perceptual representation alongside the legacy sRGB triple.

01
Pick or paste HEX
Use the native swatch or type a HEX value.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
in · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
Inspect OKLCH
L (lightness 0-100%), C (chroma), H (hue 0-360°).
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
readhex · rgb · hslP3gamut-mappedlive
oklch · optionslive · live
```
oklch(60% 0.16 257)
```
options applied · livelive
03
Compare against OKLAB
OKLAB is the cartesian form: L, a, b. Easier to interpolate.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
mathWCAG 2.2APCAAA · AAAcontrast
oklab · convertedcart · ready
```
oklab(60% -0.04 -0.16)
```
converted · liveWCAG-aware
04
Use in tokens
Drop OKLCH straight into your stylesheet or design tokens.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
color: oklch(60% .16 257)
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to reach for OKLCH

Design tokens, perceptual scales, smoother gradients.

Design tokens

Build perceptually-uniform color systems. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Tonal scales

Step lightness for accessible UI hover/focus states. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Gradients

Smoother color interpolation in OKLAB space. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

WCAG-friendly

Perceptual lightness aligns better with WCAG luminance. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

a11y

Wide-gamut output

Pair with display-p3 for vibrant screens. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

Future-proof CSS

Modern CSS Color 4 syntax — well-supported. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

css4

FAQ

Frequently asked questions

What is OKLCH?

A perceptually-uniform color space derived from OKLAB. Equal lightness values actually look equally bright.

Why not just use HSL?

HSL's lightness is mathematical, not perceptual. Two HSL colors with the same L can look very different in brightness.

How wide is browser support?

Every evergreen browser since 2023. Safari, Chrome, Firefox, Edge all ship it.

What's chroma?

How saturated the color is — 0 is grey, up to ~0.4 for vivid sRGB colors.

Is anything sent to a server?

No — conversion runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!