Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Reads any CSS colour — hex, `rgb()`, `hsl()`, `lab()`, `oklch()`, a keyword — and shows it in every notation at once, on a light and a dark ground. It also says when a colour is outside sRGB and what the nearest reachable one is.
Read as HEX · nearest keyword is mediumslateblue (#7b68ee), ΔEok 0.050
On light
Text in this colour
Body text beside it, for scale.
On dark
Text in this colour
Body text beside it, for scale.
| HEX | #5b6cffWhat every design tool copies. | |
|---|---|---|
| RGB | rgb(91 108 255)The channels as a display receives them. | |
| HSL | hsl(233.78 100% 67.84%)A rearrangement of sRGB. Its “lightness” is not perceptual. | |
| HWB | hwb(233.78 35.69% 0%)The same wheel described as a hue plus white and black. | |
| LAB | lab(50.851% 29.157 -76.75)CIE L*a*b*, D50-referred as CSS defines it. | |
| LCH | lch(50.851% 82.102 290.8)L*a*b* in polar form. Chroma runs to about 150. | |
| OKLAB | oklab(60.153% 0.0114 -0.2164)Rectangular OKLab. Euclidean distance here is perceptual distance. | |
| OKLCH | oklch(60.153% 0.2167 273.01)The one worth defaulting to — see the note below. |
Why OKLCH is the one to default to
- Interpolation stays saturated. A straight line between two colours in sRGB passes near the neutral axis, so a blue-to-yellow gradient goes grey in the middle. In OKLCH the path travels round the hue wheel and the midpoint keeps its chroma. This is the single biggest visible difference and the reason CSS grew
in oklch. - Lightness means lightness. Two HSL colours at
50%can differ in perceived brightness by a factor of three —hsl(60 100% 50%)is yellow andhsl(240 100% 50%)is navy. OKLCH’s L is calibrated against perception, so a 50–950 scale built on it has even steps instead of a cliff in the middle. - Distance means difference. Euclidean distance in OKLab is a usable ΔE, which is what makes “nearest named colour” above give sensible answers where an RGB distance calls a deep purple
darkslateblue.
This colour is L 60.2%, C 0.2167, H 273.0°. Holding L and H and moving C alone gives you the tint ramp; holding L and C and moving H gives you a harmonious palette. Neither works in HSL.
How to use it
Paste the colour
Any notation. The line under the box says which one it was read as, and names the nearest CSS keyword with the perceptual distance to it.
Look at both grounds
A colour is only half-specified without the surface it sits on. A mid-blue that reads as confident on white reads as unlit on a dark ground, and no notation shows that.
Copy the notation you need
Each row has its own copy button and a line saying what that space is for. The row matching your input is highlighted.
Common questions
Why does the page keep recommending OKLCH?
Three testable reasons. Interpolation stays saturated, so a blue-to-yellow gradient does not go grey in the middle. Its lightness is perceptual, so a 50–950 ramp has even steps. And distance in it is perceived difference, which is what makes "nearest named colour" give sensible answers.
What does "outside sRGB" mean for my colour?
That the exact colour needs channel values below 0 or above 1, which a display cannot produce. The swatch shows the nearest colour it can — found by keeping lightness and hue and lowering chroma, which gives up only the saturation the screen never had. A P3 display can show more of it.
Is HSL lightness the same as OKLCH lightness?
No, and this is the trap. `hsl(60 100% 50%)` is a bright yellow and `hsl(240 100% 50%)` is a navy — same "lightness", perceived brightness different by a factor of three. HSL is a rearrangement of sRGB, not a perceptual space.
Are LAB and OKLAB the same?
Different spaces with the same idea. CIE L*a*b* dates from 1976 and has known non-uniformities, particularly in the blues, where a hue shift appears as you change lightness. OKLab was fitted to newer data specifically to fix that, which is why it is the one worth using.
Feed it from
Palette Extractor
Pulls an N-colour palette out of an image and exports it as hex, CSS variables or an ASE swatch.
Average & Dominant Colour
Returns one representative colour for an image — mean, median or most frequent — as a colour asset.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
CSS Gradient Builder
Builds linear, radial and conic gradients with draggable stops and emits the CSS, in sRGB or OKLCH.
Next
These accept what this tool produces, so the result can go straight in.
Print Colour Converter
Converts RGB to CMYK with the plain formula (no ICC or paper profile) and flags saturated colours a four-ink press will dull.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Tint & Shade Scale
Generates a 50–950 lightness scale from one colour with perceptually even steps, ready as design tokens.
Nearest Tailwind Colour
Finds the closest Tailwind palette entry to any colour and shows the perceptual distance.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.
Palette Generator
Builds a harmonious palette from a base colour using complementary, triadic and analogous rules.