Advanced Colour Converter
Enter a colour in any notation and see it in every other. HEX, RGB, HSL and HSV are different ways of writing the same sRGB values; LAB, LCH, OKLAB and OKLCH are perceptual spaces that describe how a colour looks rather than how a screen produces it.
How to use this tool
- Type or paste a colour in any supported notation — hex, rgb(), hsl(), lab(), oklch() and the rest are all recognised.
- Every other format appears immediately beneath the result.
- Use the copy button to take the primary value, or select any listed format directly.
- Enter a second colour in the comparison field to check the WCAG contrast ratio between them.
- If a colour you enter in LAB or OKLCH lies outside the sRGB gamut, the tool says so rather than silently clamping it.
The formula
Colour formats fall into two groups. HEX, RGB, HSL and HSV are different ways of writing the same sRGB values, so converting between them is arithmetic. LAB, LCH, OKLAB and OKLCH are perceptual spaces built on CIE XYZ, and reaching them means undoing the gamma encoding first.
sRGB → linear RGB → XYZ → LAB / OKLAB
linear = ((sRGB + 0.055) ÷ 1.055)^2.4
LCH: C = √(a² + b²), H = atan2(b, a)- linear RGB
- Gamma removed, so channel values are proportional to light
- XYZ
- Device-independent reference space defined by the CIE
- D50 / D65
- Reference white points; LAB uses D50, OKLAB uses D65
The gamma step matters. sRGB values are perceptually spaced rather than linear in light, so averaging two hex colours directly gives a darker result than blending the same colours physically would.
Worked examples
A hex colour in every format
- Given
- #3a86ff
- Result
- rgb(58 134 255) · hsl(217 100% 61%) · oklch(0.6624 0.1856 260.16)
The hex digits are read as three bytes, giving red 58, green 134 and blue 255. HSL and the perceptual spaces are then derived from those.
Checking accessible contrast
- Given
- #767676 compared against #ffffff
- Result
- 4.54:1 — passes WCAG AA
Relative luminance is computed for both colours after removing gamma, then compared as (lighter + 0.05) ÷ (darker + 0.05). AA requires 4.5:1 for body text, so this passes by a small margin.
A colour outside the sRGB gamut
- Given
- oklch(0.7 0.4 150)
- Result
- Reported as out of gamut
That chroma is higher than sRGB can reproduce at this lightness and hue. The converter flags it rather than clamping quietly, so you know the preview is an approximation.
Frequently asked questions
HSL treats lightness as a simple arithmetic value, so two colours with the same L can look very different in brightness — yellow at 50% lightness appears far brighter than blue at 50%. OKLCH is built on a perceptual model, so equal lightness values genuinely look equally light. That makes it much better for generating consistent palettes.
Because arithmetic conversion cannot model ink. Real CMYK output depends on the press, the ink set, the paper and an ICC colour profile for that combination. The values here are the standard naive conversion — fine for rough estimation and screen mockups, but not a substitute for a proofing workflow.
Both aim to be perceptually uniform, but OKLab is newer and noticeably better behaved in the blues, where CIE LAB shows a hue shift when lightness changes. LAB also uses a D50 white point in CSS while OKLab uses D65. For gradients and palette generation, OKLab tends to give more predictable results.
Only where the format supports it. HEXA, RGBA, HSLA, LAB, LCH, OKLAB and OKLCH all carry alpha; HEX, RGB, HSL, HSV, CMYK and XYZ do not, so it is dropped there. Alpha never affects the colour components themselves — it describes transparency, not hue or lightness.
A gamut is the range of colours a device can actually produce. LAB, LCH and OKLCH can describe colours more saturated than any sRGB screen can show. When you enter one, the preview shows the closest displayable approximation and the tool flags the discrepancy rather than pretending the colour is reproducible.
Hex and rgb() are universally supported and fine for fixed colours. For anything generated — hover states, tints, whole palettes — oklch() is worth the switch because adjusting lightness or chroma behaves predictably. Browser support is good in current versions, so provide a hex fallback if you need to reach older ones.
Related tools
Convert px, rem, em, pt, vh, vw and every other CSS length with a custom root font size.
Screen PPI CalculatorCalculate a display’s pixel density, dot pitch and quality class from its resolution and size.
Image Resolution CalculatorWork out megapixels, aspect ratio and print size from any resolution, HD through 8K.