La Mathématique derrière la Conversion de OKLCH en RVB

Introduction

À mesure que le support du modèle de couleur OKLCH se développe, le besoin de comprendre comment il se rapporte au modèle RVB omniprésent augmente également. Bien que OKLCH offre une uniformité perceptuelle supérieure et un accès aux couleurs à large gamme, nos écrans (pour la plupart) fonctionnent toujours avec des sous-pixels RVB.

Dans cet article, nous explorerons le voyage mathématique de la conversion d'une couleur OKLCH vers l'espace sRGB standard utilisé par la plupart des appareils web.

Le Convertisseur Interactif

Avant de plonger dans les mathématiques, essayez vous-même le processus de conversion ! Ajustez les curseurs de Luminosité (Lightness), Chroma et Teinte (Hue) ci-dessous pour voir comment ils correspondent à un code hexadécimal RVB.

Le Pipeline de Conversion

La conversion de OKLCH en RVB n'est pas une étape unique ; elle implique une série de transformations à travers différents espaces colorimétriques.

Étape 1 : OKLCH vers OKLab

Tout d'abord, nous devons convertir les coordonnées cylindriques OKLCH (Luminosité, Chroma, Teinte) en coordonnées cartésiennes OKLab (L, a, b).

• L reste le même.
• a (vert-rouge) est calculé en utilisant le cosinus : $a = C \times \cos(H)$
• b (bleu-jaune) est calculé en utilisant le sinus : $b = C \times \sin(H)$

(Note : Assurez-vous que H est en radians pour ces calculs.)

Étape 2 : OKLab vers RVB Linéaire (Linear RGB)

Ensuite, nous passons de l'espace perceptuel OKLab à un espace RVB "Linéaire". Cette transformation se fait en trois sous-étapes :

2.1 OKLab vers LMS (Réponse des Cônes)

Nous transformons d'abord les coordonnées L, a, b dans un domaine intermédiaire LMS en utilisant une matrice spécifique :

$$\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 Non-linéarité LMS

Le modèle OKLab utilise une non-linéarité de racine cubique. Pour revenir à l'intensité lumineuse linéaire, nous devons mettre au cube les valeurs LMS résultantes :

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

2.3 LMS vers RVB Linéaire

Enfin, nous convertissons ces valeurs LMS linéaires en RVB Linéaire en utilisant une autre transformation matricielle :

$$\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}$$

Étape 3 : RVB Linéaire vers sRGB (Correction Gamma)

Enfin, la plupart des écrans nécessitent des signaux "Corrigés Gamma". C'est parce que les yeux humains sont plus sensibles aux nuances sombres qu'aux claires.

La conversion sRGB standard utilise une fonction de transfert :

1. Si la valeur est très petite ($\le 0.0031308$), multiplier par 12.92.
2. Sinon, élever à la puissance $(1/2.4)$ et appliquer des décalages d'échelle.

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

Cette dernière étape nous donne les valeurs familières de 0 à 255 (après mise à l'échelle) pour le Rouge, le Vert et le Bleu.

Exemple de Calcul

Traçons oklch(60% 0.15 250) à travers ce pipeline :

1. Vers 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. Vers RVB Linéaire (après transformation matricielle) :

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

3. Vers sRGB (après correction Gamma) :

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

Conclusion

Comprendre ces conversions met en évidence la complexité cachée derrière une simple déclaration de couleur CSS. Bien que les navigateurs modernes gèrent cela automatiquement, connaître les mathématiques nous donne une appréciation plus profonde de la précision de la science numérique des couleurs.