OKLCH Color Converter
CSS Value
oklch(0.6 0.15 250)
How it works
OKLCH is a perceptually uniform colour space that expresses colours as Lightness (L), Chroma (C), and Hue (H). Introduced by Björn Ottosson in 2020 and added to CSS Level 4 colour specification, OKLCH has rapidly become the recommended colour space for design systems because of its perceptual uniformity — equal changes in L, C, or H produce equally perceptible changes across the colour wheel, unlike HSL where yellow and blue with the same lightness value look dramatically different in perceived brightness.
**Why OKLCH beats HSL for design** In HSL, hsl(60, 100%, 50%) (yellow) appears much brighter than hsl(240, 100%, 50%) (blue) even though both have "50% lightness". This is because human eyes have different sensitivity to different wavelengths. OKLCH's L axis is calibrated to perceptual lightness — oklch(0.7, 0.2, 60) and oklch(0.7, 0.2, 240) genuinely appear the same lightness. This makes creating accessible, visually balanced colour palettes far easier.
**CSS usage** CSS4 natively supports OKLCH: `color: oklch(0.7 0.2 200)`. It also supports `oklch()` in custom properties, `color-mix()`, and relative colour syntax. Major browser support (Chrome 111+, Firefox 113+, Safari 16.4+) makes OKLCH practical for production use.
**Converting from hex/sRGB** The conversion path: hex → sRGB → linear sRGB → OKLab (via matrix multiplication) → OKLCH (OKLab to polar). The tool handles all intermediate steps and accepts hex, RGB, HSL, and OKLCH as input.
**Chroma (C) range** Unlike HSL saturation (capped at 100%), OKLCH chroma is unbounded — it represents how "colourful" a colour is. Typical screen colours have C values of 0.08–0.35. Some vivid display-P3 colours can exceed C=0.35. Achromatic colours (greys) have C=0.
Privacy: all colour conversion runs in the browser. No data is transmitted.
Frequently Asked Questions
- In HSL, colours at the same lightness value (e.g., L=50%) look wildly different in perceived brightness across hues — yellow (60°) appears much brighter than blue (240°) at the same HSL lightness because human vision is more sensitive to green-yellow wavelengths. OKLCH's L axis is calibrated to perceptual lightness — the L values in OKLCH actually correspond to equal perceived brightness. This means you can create a 9-step palette from oklch(0.2, C, H) to oklch(0.9, C, H) and each step will appear as an equal increment of lightness, making accessible colour scales much easier to create.
- CSS Color Level 4 syntax: `color: oklch(L C H)` where L is 0–1 (or 0%–100%), C is 0–0.4 (chroma), H is 0–360 (hue degrees). Example: `color: oklch(0.7 0.15 200)` (a medium blue). With alpha: `color: oklch(0.7 0.15 200 / 0.8)`. In custom properties: `--brand-color: oklch(0.55 0.2 250)`. Browser support (2024): Chrome 111+, Firefox 113+, Safari 16.4+, Edge 111+. For older browser support, use `@supports` with a fallback: `color: #1a73e8; color: oklch(0.55 0.2 250)`.
- Chroma (C) measures colour saturation/vividness — how 'colourful' a colour is, as opposed to grey. A chroma of 0 is always achromatic (grey/black/white) regardless of hue. Increasing chroma makes colours more vivid. Unlike HSL's 0–100% saturation, OKLCH chroma is theoretically unbounded — it represents the radius in the OKLab colour space. Typical sRGB colours have chroma 0–0.32; vivid Display P3 colours can reach C≈0.35. The hue angle (H) only affects colour appearance when C > 0; when C = 0, H is irrelevant.
- OKLab was designed by Björn Ottosson in 2020 as an improvement on CIELAB (L*a*b*). Both are perceptually uniform colour spaces where equal geometric distances correspond to equal perceived colour differences. CIELAB has known issues: hue uniformity is poor (especially for blues) and the achromatic axis is slightly tilted. OKLab corrects these by fitting a transform to human colour perception data. OKLCH is simply OKLab expressed in polar coordinates: L = lightness, C = √(a² + b²) (chroma/radius), H = atan2(b, a) (hue/angle). Polar form is more intuitive for designers than Cartesian (a, b) coordinates.