The Math Behind Converting OKLCH to RGB

Introduction

As support for the OKLCH color model grows, so does the need to understand how it relates to the ubiquitous RGB model. While OKLCH offers superior perceptual uniformity and access to wide-gamut colors, our screens (mostly) still work with RGB subpixels.

In this article, we'll explore the mathematical journey of converting an OKLCH color into the standard sRGB space used by most web devices.

The Interactive Converter

Before we dive into the math, try out the conversion process yourself! Adjust the Lightness, Chroma, and Hue sliders below to see how they map to an RGB Hex code.

The Conversion Pipeline

Converting OKLCH to RGB isn't a single step; it involves a series of transformations across different color spaces.

Step 1: OKLCH to OKLab

First, we need to convert the cylindrical OKLCH coordinates (Lightness, Chroma, Hue) back to the Cartesian OKLab coordinates (L, a, b).

• L remains the same.
• a (green-red) is calculated using cosine: $a = C \times \cos(H)$
• b (blue-yellow) is calculated using sine: $b = C \times \sin(H)$

(Note: Ensure H is in radians for these calculations.)

Step 2: OKLab to Linear RGB

Next, we move from the perceptual OKLab space to a "Linear" RGB space. This transformation happens in three sub-steps:

2.1 OKLab to LMS (Cone Response)

We first transform L, a, b coordinates into an intermediate LMS domain using a specific matrix:

$$\begin{bmatrix} L' \\ M' \\ S' \end{bmatrix} = \begin{bmatrix} 1 & 0.3963377774 & 0.2158037573 \\ 1 & -0.1055613458 & -0.0638541728 \\ 1 & -0.0894841775 & -1.2914855480 \end{bmatrix} \begin{bmatrix} L \\ a \\ b \end{bmatrix}$$

2.2 LMS Non-Linearity

The OKLab model uses a cube root non-linearity. To get back to linear light intensity, we must cube the resulting LMS values:

$$\begin{aligned} L_{lin} &= (L')^3 \\ M_{lin} &= (M')^3 \\ S_{lin} &= (S')^3 \end{aligned}$$

2.3 LMS to Linear RGB

Finally, we convert these linear LMS values to Linear RGB using another matrix transformation:

$$\begin{bmatrix} R_{lin} \\ G_{lin} \\ B_{lin} \end{bmatrix} = \begin{bmatrix} 4.0767416621 & -3.3077115913 & 0.2309699292 \\ -1.2684380046 & 2.6097574011 & -0.3413193965 \\ -0.0041960863 & -0.7034186147 & 1.7076147010 \end{bmatrix} \begin{bmatrix} L_{lin} \\ M_{lin} \\ S_{lin} \end{bmatrix}$$

Step 3: Linear RGB to sRGB (Gamma Correction)

Finally, most screens require "Gamma Corrected" signals. This is because human eyes are more sensitive to dark shades than light ones.

Standard sRGB conversion uses a transfer function:

1. If the value is very small ($\le 0.0031308$), multiply by 12.92.
2. Otherwise, raise it to the power of $(1/2.4)$ and apply scaling offsets.

$$V_{sRGB} = 1.055 \times V_{linear}^{(1/2.4)} - 0.055$$

This final step gives us the familiar 0-255 values (after scaling) for Red, Green, and Blue.

Example Calculation

Let's trace oklch(60% 0.15 250) through this pipeline:

1. To OKLab:

   • $L = 0.6$
   • $H = 250^\circ \approx 4.36 \text{ rad}$
   • $a = 0.15 \times \cos(4.36) \approx -0.051$
   • $b = 0.15 \times \sin(4.36) \approx -0.141$

2. To Linear RGB (after matrix transform):

   • $R_{lin} \approx 0.021$
   • $G_{lin} \approx 0.229$
   • $B_{lin} \approx 0.667$

3. To sRGB (after Gamma correction):

   • $R \approx 39$
   • $G \approx 132$
   • $B \approx 213$
   • Hex: #2784D5

Conclusion

Understanding these conversions highlights the complexity hidden behind a simple CSS color declaration. While modern browsers handle this automatically, knowing the math gives us a deeper appreciation for the precision of digital color science.