RGB to OKLCH converter
Helps you move rgb() colors in older stylesheets to oklch() one color at a time.
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 red r, green g and blue b.
- 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: Red R = 30, Green G = 136, Blue B = 229. Result: CSS syntax: oklch(0.6179 0.1668 250.87); Lightness L (0 to 1): 0.6179; Chroma C: 0.1668.
Limits and caveats
- HEX and RGB are assumed to be sRGB; Display P3 or Adobe RGB colors need their own ICC profile.
- Accepts whole numbers from 0 to 255 only.
Questions about this tool
Can I swap rgb() for oklch() directly?
Yes, the result gives the same color in modern browsers, and you can keep the rgb() line before it as a fallback.
Why does pure green have such high chroma?
Pure green and blue are among the most saturated sRGB colors, so their chroma is near 0.3.
What unit is the hue in?
Degrees from 0 to 360. In CSS you can write it as a bare number or with deg.