Paste any CSS colour and read it in every notation at once — HEX, RGB, HSL, Lab, LCH, and OKLCH — with contrast against a reference colour and sliders that nudge the OKLCH channels directly. Adjusting lightness in OKLCH changes lightness and nothing else, which is not true of HSL.
Step by step
01Paste the colour
A hex code, an rgb() or hsl() call, a named colour, or a modern lab(), lch(), or oklch() value. Everything is parsed the way a browser would parse it.
02Read every notation at once
The same colour in six forms, each copyable. That is the fastest way to move a value between a design file, a stylesheet, and a codebase that disagree about which notation they speak.
03Nudge it in OKLCH
Lightness, chroma, and hue as three independent sliders. Because the space is perceptually uniform, changing one leaves the other two looking unchanged — which is what makes it usable for building variants.
04Check it against a reference
Contrast is reported live against white, black, or any colour you set, so a token can be checked against the surface it will actually sit on while you adjust it.
Worked example
The classic HSL trap, in one comparison. Two colours with identical HSL lightness are not equally light — and that is the whole reason OKLCH exists.
Given
Same HSL lightness, wildly different perceived lightness
yellow hsl(60 100% 50%) oklch ~0.97 L
contrast on white: 1.07:1 invisible
blue hsl(240 100% 50%) oklch ~0.45 L
contrast on white: 8.59:1 strong
identical in HSL, half a scale apart in OKLCHHSL lightness is a geometric position in a cylinder, not a measure of how light a colour looks — which is why an HSL palette built by holding lightness constant produces steps that jump around, with the yellows washing out and the blues going murky. OKLCH lightness tracks perception, so holding it constant produces colours that genuinely match, and stepping it produces an even ramp.
Before you pick a notation
HSL is convenient and perceptually wrong
Its lightness axis ignores how the eye responds to hue, so equal-lightness colours are not equally light and equal steps are not equal steps. It is fine for a quick tint and unreliable as the basis for a palette — which is what most inconsistent-looking colour systems have in common.
OKLCH separates the three things you actually adjust
Lightness, chroma, and hue move independently and predictably. Darkening a colour does not shift its hue, and matching two colours' lightness produces colours that look matched. That is what makes it the right space to build token scales in.
Not every OKLCH value can be displayed
The space describes colours beyond what an sRGB screen can produce, so high-chroma values get clipped on the way out — sometimes shifting hue as they land. If a colour looks flatter than the numbers suggest, it is being gamut-mapped.
Hex is a container, not a colour space
#RRGGBB is just sRGB in hexadecimal, which is why it cannot express anything outside that gamut and why arithmetic on hex digits is meaningless. Convert to a perceptual space to reason about a colour, and back to hex only to write it down.
Lab and LCH are the older perceptual pair
Lab and its polar form LCH predate OKLCH and are widely supported in print and imaging workflows. OKLCH improves the blue region in particular, which is where Lab's hue lines bend most visibly, but all three beat HSL for building systems.
Everything runs locally
Parsing, conversion, and the contrast readout all happen in your browser. The share link carries the colour and the reference — enough for a colleague to open exactly what you are looking at.
The judgement call
They describe the same colours; they differ in what they make easy and what they get wrong.
A design token scale
OKLCH
Even perceptual steps and independent channels. Changing one variable does not quietly change the others.
A one-off colour in a stylesheet
HEX
Universally understood, copy-pastable, and unambiguous. There is nothing to reason about.
A colour with transparency
rgb() or hex with alpha
Both express alpha directly and every tool round-trips them without surprises.
Quick tints and shades by hand
HSL, carefully
Convenient for a single nudge. Do not build a scale on it — the steps will not look even.
Matching a print or imaging workflow
Lab or LCH
The established perceptual spaces in those pipelines, and what colour management tools expect.
Doing maths on hex digits
Never
Hex is sRGB in another base. Averaging or interpolating the digits produces colours nobody chose.
Reference
FAQ
Paste it in any notation — hex, rgb(), hsl(), a named colour, lab(), lch(), or oklch() — and every other form is shown immediately, each one copyable. Nothing is sent anywhere; the conversion happens in your browser.
A perceptually uniform colour space with three independent channels: lightness, chroma, and hue. Because equal steps look equal and changing one channel does not disturb the others, it is a far better basis for token scales and colour variants than HSL.
Because HSL lightness is a geometric position rather than a measure of perceived lightness. Yellow at 50% lightness is nearly white to the eye while blue at 50% is genuinely mid-dark — a gap of about half the scale in OKLCH. This is the single biggest reason HSL-based palettes look uneven.
An OKLCH colour looks dull when it sits outside what an sRGB display can show, so the browser maps it back into gamut — usually by reducing chroma, sometimes shifting hue slightly. High-chroma values in the blue and green regions hit this first.
No. Hex is a notation for sRGB values written in base 16, which is why it cannot express anything outside the sRGB gamut and why doing arithmetic on the digits is meaningless. Convert to a perceptual space to reason about a colour, then back to hex to write it down.
No. Parsing, conversion, and the contrast readout are all local, and the share link carries only the colour and the reference you set.
Parsing, conversion, and contrast all run in your browser. Share links carry only the colour and its reference.
Keep going
Contrast Checker
Test the converted colour on the surface it will sit on.
Palette Generator
Turn one OKLCH anchor into a full token scale.
Gradient Builder
Interpolate between two colours in OKLCH rather than sRGB.
Named Color Library
All 148 CSS named colours, with their values in every notation.