OKLab to HEX and RGB converter
Useful for a HEX fallback for older browsers or for design apps that do not understand OKLab.
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 lightness l (0 to 1), a axis and b axis.
- 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
l' = L + 0.3963a + 0.2158b, m' = L − 0.1056a − 0.0639b, s' = L − 0.0895a − 1.2915b, each cubed, then R = 4.0767l − 3.3077m + 0.2310s, G = −1.2684l + 2.6098m − 0.3413s, B = −0.0042l − 0.7034m + 1.7076s. Linear RGB is then encoded per IEC 61966-2-1: 12.92 l if l ≤ 0.0031308, else 1.055 l^(1/2.4) − 0.055, times 255 and rounded.
Example
Inputs: Lightness L (0 to 1) = 0.7, a axis = 0.1, b axis = -0.1. Result: HEX code: #BF81DA; Gamut status: Inside the sRGB gamut.
Limits and caveats
- Colors outside sRGB have their channels clipped to 0-255, which shifts the displayed color.
- Enter L as a number from 0 to 1; a percentage such as 70% becomes 0.7.
Questions about this tool
How do I copy values from a CSS oklab()?
The first number is L, the second a and the third b. If L is written as a percentage, divide it by 100.
Why is the color out of gamut?
OKLab covers more colors than sRGB, so some values give a channel below 0 or above 255. Browsers then reduce chroma; this tool clips the channels.
Is L = 0.5 a middle gray?
Perceptually close, but it gives RGB 99 rather than 128, because OKLab follows eye sensitivity rather than encoded values.