OKLCH to RGB Converter
Convert modern CSS OKLCH values into standard rgb(r, g, b) syntax for legacy CSS and canvas rendering contexts.
Why Convert OKLCH to RGB?
When interfacing with legacy JavaScript libraries or 2D HTML Canvas graphics that lack native color space awareness, converting OKLCH to RGB strings is essential. Our engine applies exact matrix transformations through the Oklab LMS cone response matrices.
How to Convert OKLCH to RGB
- Paste any
oklch()value (e.g.oklch(62.3% 0.188 259.8)) into the input field above. - Our engine converts the cylindrical OKLCH coordinates to Cartesian Oklab, then through the inverse LMS matrix to linear RGB.
- Linear RGB is gamma-encoded to sRGB and formatted as
rgb(r, g, b)orrgba(r, g, b, a).
The math path: OKLCH → Oklab (Cartesian) → linear RGB (inverse LMS matrix) → gamma-encoded sRGB → rgb() string.
OKLCH to RGB Reference Values
| Swatch | OKLCH Input | Color Name | RGB Output |
|---|---|---|---|
| oklch(100.0% 0.000 0.0) | Pure White | rgb(255, 255, 255) | |
| oklch(0.0% 0.000 0.0) | Pure Black | rgb(0, 0, 0) | |
| oklch(62.3% 0.188 259.8) | sRGB Blue 500 | rgb(59, 130, 246) | |
| oklch(51.1% 0.230 277.0) | sRGB Indigo 600 | rgb(79, 70, 229) | |
| oklch(69.6% 0.149 162.5) | sRGB Emerald 500 | rgb(16, 185, 129) | |
| oklch(63.7% 0.208 25.3) | sRGB Red 500 | rgb(239, 68, 68) | |
| oklch(76.9% 0.165 70.1) | sRGB Amber 500 | rgb(245, 158, 11) | |
| oklch(71.5% 0.126 215.2) | sRGB Cyan 500 | rgb(6, 182, 212) | |
| oklch(55.5% 0.000 0.0) | sRGB Gray 500 | rgb(115, 115, 115) | |
| oklch(20.8% 0.040 265.8) | sRGB Slate 900 | rgb(15, 23, 42) | |
| oklch(62.7% 0.233 303.9) | sRGB Purple 500 | rgb(168, 85, 247) | |
| oklch(65.6% 0.212 354.3) | sRGB Pink 500 | rgb(236, 72, 153) |
Copy-Ready CSS with Progressive Enhancement
.canvas-fill {
color: rgb(59, 130, 246); /* fallback */
color: oklch(62.3% 0.188 259.8); /* modern browsers */
}Tailwind CSS v4 @theme:
@theme {
--color-canvas-blue: oklch(62.3% 0.188 259.8);
}Gamut Note: Automatic sRGB Mapping
When an OKLCH color falls outside the sRGB gamut (common with high-chroma cyans and greens), our engine automatically clamps chroma to the nearest in-gamut value while preserving hue and lightness. This ensures the RGB output is always valid and renders consistently across all displays.
- Display-P3 Colors: On wide-gamut monitors, the original OKLCH color appears more vivid. The RGB output represents the sRGB-clamped version.
- Alpha Preservation: An OKLCH value with alpha converts to
rgba(r, g, b, a)with the alpha channel intact.
Frequently Asked Questions
Why do I need RGB if I have OKLCH?
Legacy tools — canvas renderers, older JavaScript libraries, email clients, and some image editors — only understand RGB. Converting OKLCH to RGB ensures compatibility with these tools.
Is the OKLCH to RGB conversion lossy?
For sRGB colors, the conversion is lossless. For Display-P3 colors, clamping to sRGB is a lossy step. The OKLCH original remains the source of truth.
Can I use OKLCH alpha in rgba()?
Yes. oklch(62.3% 0.188 259.8 / 0.5) converts to rgba(59, 130, 246, 0.5) — the alpha channel is preserved.
What happens with out-of-gamut colors?
The engine clamps chroma to the nearest in-gamut value while preserving hue and lightness. You will see a gamut badge indicating the color was clamped.
How do I use RGB values in canvas?
Pass the RGB string directly to ctx.fillStyle or ctx.strokeStyle. Canvas 2D only understands sRGB, so the RGB output is always canvas-safe.