Что такое OKLCH?

OKLCH новая цветовая модель созданная для лучшего восприятия и управления цветами. Для того чтобы описание цвета лучше, точнее соответствовало восприятию человеком.

Есть множество моделей RGB, HSL, LCH, OKLCH и далее. Модели созданы чтобы определять и управлять цветами, а также чтобы было проще вообще "думать" о цвете в процессе проектирования.

:root {
  --color-oklch: oklch(0.55 0.18 260);
  --color-hsl: hsl(220 100% 50%);
  --color-rgb: rgb(0, 128, 255);
  --color-lch: lch(60% 60 260);
  --color-lab: lab(50 -10 -50);
  --color-color: color(xyz 0.18 0.19 0.6);
  --color-hex: #1E90FF;
}

OKLCH содержит три значения: Светлота/Яркость, Цветность/Насыщенность, Оттенок/Цвет.

Светлота - изменяет яркость в диапазоне от 0 до 1, или в процентах от 0% до 100%.

Цветность - контролирует интенсивность, насыщенность цвета, оттенка, в диапазоне от 0 до 1.

Оттенок - основной цвет, измеряется в градусах в диапазоне от 0 до 360.

Согласованная однородная яркость OKLCH. Если сравнить с HSL, то мы увидим очевидную однородность уровня яркости в OKLCH. Выбрав одни значения для яркости и насыщенности и изменяя только оттенок мы получаем предсказуемый, естественный результат.

То же самое работает и когда нам надо получить оттенок разной степени интенсивности.

Как видно из примера выше, OKLCH справляется с задачей великолепно. А в HSL потребуется корректировка оттенка, чтобы достичь того же результата.

Градиент

А вот управление градиентом в OKLCH отличает довольно сильно. В моделях sRGB градиент вычисляется на основе красного, зеленого и синего, что часто приводит к размытости или неравномерности в центре. OKLCH использует светлость, насыщенность и оттенок для вычислений. В центре может оказаться совсем неожиданный цвет. Так как вычисление идет по цветовому кругу, а не напрямую от цвета к цвету. Из-за чего, хоть градиент и может выглядеть довольно плавно, мы можем получить промежуточный цвет который не определяли. Чтобы избежать этого часто для градиентов используется преобразование в OKLAB.

:root {
  --gradient-srgb: linear-gradient(rgb(255, 0, 255), rgb(0, 255, 0));  
  --gradient-in-oklch: linear-gradient(in oklch, rgb(255, 0, 255), rgb(0, 255, 0));
  --grdient-in-oklab: linear-gradient(in oklab, rgb(255, 0, 255), rgb(0, 255, 0));
}

oklch()

The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates.

MDN