Skip to content
ToolQivo

OKLCH Color Picker

Pick colours in OKLCH, the space modern CSS is built on.

Color Tools Reviews Free · no sign-up

OKLCH

CSS 
The oklch() value appears here

Quick Tool Overview

The OKLCH Color Picker builds colours in the space modern CSS has settled on, where equal lightness genuinely looks equally bright at every hue, and draws the sRGB gamut boundary live as you move the chroma slider.

What it does
Picks and converts colours in OKLCH
You give it
Lightness, chroma and hue — or an existing colour
You get back
The oklch() value with a HEX fallback
Best for
Design systems and consistent colour scales
Color Tools Free, unlimited use No sign-up Runs in your browser

About the OKLCH Color Picker

OKLCH is the notation modern CSS work is converging on, and once you have built a palette in it the reason is obvious: lightness behaves. Set L to 60% and every hue at that lightness genuinely looks equally bright, which is simply not true in HSL, where yellow at 50% lightness blinds you and blue at 50% is nearly black.

That property is what makes a design system possible. A scale from 50 to 950 built by moving lightness in OKLCH produces shades that match across every hue in the palette, so a red-600 and a blue-600 carry the same visual weight — which is exactly what Tailwind v4 moved to OKLCH for.

The picker shows the sRGB gamut boundary as you move, because the practical difficulty with OKLCH is that most of the space is not displayable. The maximum chroma for your current lightness and hue is drawn live, so you can see how much saturation is available before the colour has to be mapped back in.

Key features of the OKLCH Color Picker

Lightness that behaves

L 60% looks equally bright at every hue, which is what lets a red-600 and a blue-600 carry the same weight.

The gamut boundary drawn

The chroma slider marks where sRGB runs out for your current lightness and hue, so the limit is visible rather than discovered.

What Tailwind v4 uses

The same space the framework moved its whole palette to, so values here drop straight into a modern config.

HEX fallback included

A fallback declaration for browsers from before 2023, emitted alongside the oklch() value.

Start from any colour

Paste an existing HEX code to see its OKLCH components and adjust from there.

How to use the OKLCH Color Picker

  1. 1

    Drag lightness, chroma and hue

    The three sliders are the colour. The preview updates as you move.

  2. 2

    Watch the gamut line

    The chroma slider marks where sRGB runs out for your current lightness and hue.

  3. 3

    Copy the CSS

    The oklch() value, with a HEX fallback for older browsers.

  4. 4

    Or start from a HEX

    Paste an existing colour to see its OKLCH components and work from there.

Frequently asked questions

Because HSL lightness is a geometric position, not a perceptual one. OKLCH was built so that equal lightness values look equally bright at every hue, which is the property you need to build a consistent palette.

Reviews of the OKLCH Color Picker

What people who use the OKLCH Color Picker 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 OKLCH Color Picker. It takes half a minute and no account.

Write the first review

More color tools