HEX to OKLCH converter
OKLCH has become a favorite for CSS design systems because you can lighten or darken a color without its hue drifting.
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). C = √(a² + b²), h = atan2(b, a) in degrees from 0 to 360.
Example
Inputs: HEX color code = #FF5733. Result: CSS syntax: oklch(0.6804 0.21 33.69); Lightness L (0 to 1): 0.6804; Chroma C: 0.21.
#FF5733
oklch(0.6804 0.21 33.69)
Limits and caveats
- HEX and RGB are assumed to be sRGB; Display P3 or Adobe RGB colors need their own ICC profile.
- For grays chroma is about zero and hue is undefined, so it shows as 0.
Questions about this tool
What range does OKLCH chroma have?
sRGB colors reach about 0.32; wider screens such as P3 allow somewhat higher values.
How do I make lighter shades of the same color?
Change only L and keep C and H. Very light shades may need a slightly lower C to stay inside sRGB.
Is OKLCH hue the same as HSL hue?
No, the angles differ. Pure red sits near 29 in OKLCH but at 0 in HSL.