Die Mathematik hinter der Umwandlung von OKLCH in RGB

Einführung

Da die Unterstützung für das OKLCH-Farbmodell wächst, wächst auch die Notwendigkeit zu verstehen, wie es sich zum allgegenwärtigen RGB-Modell verhält. Während OKLCH eine überlegene wahrnehmungsbezogene Gleichmäßigkeit und Zugang zu Wide-Gamut-Farben bietet, arbeiten unsere Bildschirme (meistens) immer noch mit RGB-Subpixeln.

In diesem Artikel werden wir die mathematische Reise der Umwandlung einer OKLCH-Farbe in den Standard-sRGB-Farbraum untersuchen, der von den meisten Webgeräten verwendet wird.

Der interaktive Konverter

Bevor wir in die Mathematik eintauchen, probieren Sie den Konvertierungsprozess selbst aus! Passen Sie die Schieberegler für Helligkeit (Lightness), Buntheit (Chroma) und Farbton (Hue) unten an, um zu sehen, wie sie einem RGB-Hex-Code zugeordnet werden.

Die Umwandlungspipeline

Die Umwandlung von OKLCH in RGB ist kein einziger Schritt; sie umfasst eine Reihe von Transformationen über verschiedene Farbräume hinweg.

Schritt 1: OKLCH zu OKLab

Zuerst müssen wir die zylindrischen OKLCH-Koordinaten (Lightness, Chroma, Hue) zurück in die kartesischen OKLab-Koordinaten (L, a, b) umwandeln.

• L bleibt gleich.
• a (Grün-Rot) wird mit Kosinus berechnet: $a = C \times \cos(H)$
• b (Blau-Gelb) wird mit Sinus berechnet: $b = C \times \sin(H)$

(Hinweis: Stellen Sie sicher, dass H für diese Berechnungen im Bogenmaß vorliegt.)

Schritt 2: OKLab zu Linear RGB

Als Nächstes wechseln wir vom wahrnehmungsbezogenen OKLab-Raum in einen "linearen" RGB-Raum. Diese Transformation erfolgt in drei Unterschritten:

2.1 OKLab zu LMS (Zapfenantwort)

Wir transformieren zuerst die L, a, b Koordinaten in eine intermediäre LMS-Domäne unter Verwendung einer spezifischen 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 Nicht-Linearität

Das OKLab-Modell verwendet eine Kubikwurzel-Nichtlinearität. Um zur linearen Lichtintensität zurückzukehren, müssen wir die resultierenden LMS-Werte kubieren:

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

2.3 LMS zu Linear RGB

Schließlich konvertieren wir diese linearen LMS-Werte mit einer weiteren Matrixtransformation in Linear RGB:

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

Schritt 3: Linear RGB zu sRGB (Gammakorrektur)

Schließlich benötigen die meisten Bildschirme "gammakorrigierte" Signale. Dies liegt daran, dass menschliche Augen empfindlicher auf dunkle Schattierungen als auf helle reagieren.

Die Standard-sRGB-Konvertierung verwendet eine Übertragungsfunktion:

1. Wenn der Wert sehr klein ist ($\le 0.0031308$), multiplizieren Sie mit 12.92.
2. Andernfalls potenzieren Sie ihn mit $(1/2.4)$ und wenden Skalierungsoffsets an.

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

Dieser letzte Schritt gibt uns die vertrauten 0-255 Werte (nach Skalierung) für Rot, Grün und Blau.

Beispielrechnung

Lassen Sie uns oklch(60% 0.15 250) durch diese Pipeline verfolgen:

1. Zu 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. Zu Linear RGB (nach Matrixtransformation):

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

3. Zu sRGB (nach Gammakorrektur):

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

Fazit

Das Verständnis dieser Konvertierungen unterstreicht die Komplexität, die sich hinter einer einfachen CSS-Farbdeklaration verbirgt. Während moderne Browser dies automatisch erledigen, gibt uns das Wissen um die Mathematik eine tiefere Wertschätzung für die Präzision der digitalen Farbwissenschaft.