Математика преобразования OKLCH в RGB

Введение

По мере роста поддержки цветовой модели OKLCH, растет и необходимость понимать, как она соотносится с вездесущей моделью RGB. Хотя OKLCH предлагает превосходную перцептивную равномерность и доступ к цветам с широким охватом, наши экраны (в основном) все еще работают с субпикселями RGB.

В этой статье мы рассмотрим математическое путешествие преобразования цвета OKLCH в стандартное пространство sRGB, используемое большинством веб-устройств.

Интерактивный конвертер

Прежде чем мы углубимся в математику, попробуйте процесс конвертации самостоятельно! Отрегулируйте ползунки Светлоты (Lightness), Хромы (Chroma) и Оттенка (Hue) ниже, чтобы увидеть, как они отображаются в шестнадцатеричном коде RGB.

Конвейер преобразования

Преобразование OKLCH в RGB — это не один шаг; оно включает в себя серию трансформаций через различные цветовые пространства.

Шаг 1: OKLCH в OKLab

Сначала нам нужно преобразовать цилиндрические координаты OKLCH (Светлота, Хрома, Оттенок) обратно в декартовы координаты OKLab (L, a, b).

• L остается прежним.
• a (зеленый-красный) вычисляется с использованием косинуса: $a = C \times \cos(H)$
• b (синий-желтый) вычисляется с использованием синуса: $b = C \times \sin(H)$

(Примечание: Убедитесь, что H выражен в радианах для этих вычислений.)

Шаг 2: OKLab в Линейный RGB (Linear RGB)

Далее мы переходим из перцептивного пространства OKLab в «Линейное» пространство RGB. Это преобразование происходит в три подэтапа:

2.1 OKLab в LMS (Реакция колбочек)

Сначала мы преобразуем координаты L, a, b в промежуточную область LMS с использованием специальной матрицы:

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

Модель OKLab использует нелинейность кубического корня. Чтобы вернуться к линейной интенсивности света, мы должны возвести полученные значения LMS в куб:

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

2.3 LMS в Линейный RGB

Наконец, мы преобразуем эти линейные значения LMS в Линейный 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}$$

Шаг 3: Линейный RGB в sRGB (Гамма-коррекция)

Наконец, большинство экранов требуют сигналов с «гамма-коррекцией». Это потому, что человеческий глаз более чувствителен к темным оттенкам, чем к светлым.

Стандартное преобразование sRGB использует передаточную функцию:

1. Если значение очень мало ($\le 0.0031308$), умножьте на 12.92.
2. В противном случае возведите его в степень $(1/2.4)$ и примените масштабирование.

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

Этот последний шаг дает нам знакомые значения 0-255 (после масштабирования) для Красного, Зеленого и Синего.

Пример расчета

Давайте проследим oklch(60% 0.15 250) через этот конвейер:

1. В 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. В Линейный RGB (после матричного преобразования):

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

3. В sRGB (после гамма-коррекции):

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

Заключение

Понимание этих преобразований подчеркивает сложность, скрытую за простым объявлением цвета CSS. Хотя современные браузеры обрабатывают это автоматически, знание математики дает нам более глубокое понимание точности цифровой науки о цвете.