HEX to OKLab converter
OKLab is a modern perceptual color space that gives smoother gradients and mixes than sRGB, and browsers support it in CSS.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter hex color code.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Each channel c (0 to 1) is linearised per IEC 61966-2-1: c / 12.92 if c ≤ 0.04045, otherwise ((c + 0.055) / 1.055)^2.4. From linear RGB: l = ∛(0.4122R + 0.5363G + 0.0514B), m = ∛(0.2119R + 0.6807G + 0.1074B), s = ∛(0.0883R + 0.2817G + 0.6300B), then L = 0.2105l + 0.7936m − 0.0041s, a = 1.9780l − 2.4286m + 0.4506s, b = 0.0259l + 0.7828m − 0.8087s (full 10-digit Ottosson matrices).
Example
Inputs: HEX color code = #FF5733. Result: CSS syntax: oklab(0.6804 0.1747 0.1165); Lightness L (0 to 1): 0.6804; a (green to red): 0.1747.
#FF5733
oklab(0.6804 0.1747 0.1165)
Limits and caveats
- HEX and RGB are assumed to be sRGB; Display P3 or Adobe RGB colors need their own ICC profile.
- The fifth decimal can differ from browsers that compute OKLab through XYZ with the updated CSS matrices.
Questions about this tool
How is OKLab different from CIELAB?
Both separate lightness from color, but OKLab keeps hue steadier when you change lightness or mix colors, especially in blues.
Why does L run from 0 to 1?
That is the native OKLab scale. In CSS you can write it as a number like 0.628 or as a percentage like 62.8%.
Do browsers support oklab()?
Yes, current Chrome, Safari and Firefox support oklab() and oklch() from CSS Color 4.