RGB to OKLCH Converter
Convert rgb(r, g, b) and rgba(r, g, b, a) into CSS OKLCH format with live gamut boundary checks.
Why Convert RGB to OKLCH?
RGB mixes red, green, and blue light components, but it is completely non-linear with respect to human vision. Mixing equal parts RGB produces irregular visual steps. By converting into OKLCH, you gain access to linear perceptual lightness, enabling harmonious tints and shades for modern design systems.
How to Convert RGB to OKLCH
- Paste any
rgb()orrgba()value (e.g.rgb(59, 130, 246)) into the input field above. - Our engine normalizes the 0-255 channels to 0-1, applies gamma decoding to get linear RGB, then transforms through the Oklab LMS cone response matrices.
- The result is a perceptually uniform OKLCH value with exact Lightness, Chroma, and Hue.
The math path: RGB (0-255) → normalized sRGB (0-1) → linear RGB (gamma decode) → Oklab (LMS matrices) → OKLCH (cylindrical transform).
RGB to OKLCH Reference Values
| Swatch | Color | RGB Code | OKLCH Value |
|---|---|---|---|
| Pure White | rgb(255, 255, 255) | oklch(100.0% 0.000 0.0) | |
| Pure Black | rgb(0, 0, 0) | oklch(0.0% 0.000 0.0) | |
| RGB Blue 500 | rgb(59, 130, 246) | oklch(62.3% 0.188 259.8) | |
| RGB Indigo 600 | rgb(79, 70, 229) | oklch(51.1% 0.230 277.0) | |
| RGB Emerald 500 | rgb(16, 185, 129) | oklch(69.6% 0.149 162.5) | |
| RGB Red 500 | rgb(239, 68, 68) | oklch(63.7% 0.208 25.3) | |
| RGB Amber 500 | rgb(245, 158, 11) | oklch(76.9% 0.165 70.1) | |
| RGB Cyan 500 | rgb(6, 182, 212) | oklch(71.5% 0.126 215.2) | |
| RGB Gray 500 | rgb(115, 115, 115) | oklch(55.5% 0.000 0.0) | |
| RGB Slate 900 | rgb(15, 23, 42) | oklch(20.8% 0.040 265.8) | |
| RGB Purple 500 | rgb(168, 85, 247) | oklch(62.7% 0.233 303.9) | |
| RGB Pink 500 | rgb(236, 72, 153) | oklch(65.6% 0.212 354.3) |
Copy-Ready CSS with Progressive Enhancement
.alert {
color: rgb(239, 68, 68); /* fallback */
color: oklch(62.3% 0.188 259.8); /* modern browsers */
}Tailwind CSS v4 @theme:
@theme {
--color-alert-red: oklch(62.3% 0.188 259.8);
}Gamut Note: RGB is Always sRGB
Standard rgb() values are confined to the sRGB gamut by definition. Converting from RGB to OKLCH is therefore always gamut-safe — the resulting OKLCH value will never exceed sRGB boundaries. However, if you paste a color(display-p3 ...) value, the converter will detect the wider gamut and flag it accordingly.
Frequently Asked Questions
Can I convert rgba() with alpha to OKLCH?
Yes. rgba(59, 130, 246, 0.5) converts to oklch(62.3% 0.188 259.8 / 0.5) — the alpha channel is preserved as a slash parameter.
What is the difference between RGB and OKLCH?
RGB is a device-dependent additive color model. OKLCH is a perceptually uniform color space where equal lightness values look equally bright. OKLCH makes it far easier to create accessible, consistent color systems.
Is RGB to OKLCH conversion reversible?
Yes, for sRGB colors. Converting RGB → OKLCH → RGB yields the original values. The round-trip is lossless within the sRGB gamut.
Do all browsers support oklch()?
Yes. oklch() is a Baseline feature available across all modern browsers since May 2023. Chrome, Edge, Safari, and Firefox all support it natively.
How do I use OKLCH in Tailwind CSS v4?
Tailwind v4 uses OKLCH for its entire default palette. Define custom colors in your @theme block using --color-{name}: oklch(...) and Tailwind generates utilities automatically.