Функция CSS `oklch()`

Функциональная запись oklch() задаёт цвет в цветовом пространстве Oklab. oklch() — это цилиндрическая форма oklab(), использующая ту же ось L, но полярные координаты цветности (C) и оттенка (h).

Синтаксис

/* Absolute values */
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

/* Relative values */
oklch(from green l c h / 0.5)
oklch(from #123456 calc(l + 0.1) c h)
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)
oklch(from var(--color) l c h / calc(alpha - 0.1))

Значения

Ниже описаны допустимые значения для абсолютных и относительных цветов.

Синтаксис абсолютных значений

oklch(L C H[ / A])

Параметры:

L

<number> от 0 до 1, <percentage> от 0% до 100% или ключевое слово none (в данном случае эквивалентное 0%). В этом случае число 0 соответствует 0% (чёрному), а число 1 соответствует 100% (белому). Это значение задаёт воспринимаемую светлоту цвета, или его «яркость».

Примечание: L в oklch() — это воспринимаемая светлота, то есть «яркость», которую мы видим глазами. Она отличается от L в hsl(), где светлота представляет собой сравнение с другими цветами.

C

<number>, <percentage> или ключевое слово none (в данном случае эквивалентное 0%). Это значение измеряет цветность цвета (примерно соответствует «количеству цвета»). Минимальное практически полезное значение — 0, а максимальное теоретически не ограничено (но на практике не превышает 0.5). В этом случае 0% — это 0, а 100% — число 0.4.

H

<number>, <angle> или ключевое слово none (в данном случае эквивалентное 0deg), обозначающее угол <hue> цвета.

Примечание: Углы, соответствующие определённым оттенкам, различаются в цветовых пространствах sRGB (используется в hsl() и hwb()), CIELAB (используется в lch()) и Oklab (используется в oklch()). Подробнее см. пример «Оттенки в oklch()» ниже и справочную страницу о типе данных <hue>, где также приведены примеры.

A Необязательно

<alpha-value>, задающее значение альфа-канала цвета: число 0 соответствует 0% (полностью прозрачный), а 1 — 100% (полностью непрозрачный). Кроме того, ключевое слово none можно использовать, чтобы явно указать отсутствие альфа-канала. Если значение канала A явно не задано, по умолчанию оно равно 100%. Если значение указано, перед ним ставится косая черта (/).

Синтаксис относительных значений

oklch(from <color> L C H[ / A])

Параметры:

from <color>

При задании относительного цвета всегда указывается ключевое слово from, за которым следует значение color, представляющее исходный цвет: это исходный цвет, на основе которого задаётся относительный цвет. Исходным цветом может быть любой допустимый синтаксис color, в том числе другой относительный цвет.

L

<number> от 0 до 1, <percentage> от 0% до 100% или ключевое слово none (в данном случае эквивалентное 0%). Это значение задаёт светлоту результирующего цвета. Здесь число 0 соответствует 0% (чёрному), а число 1 соответствует 100% (белому).

C

<number>, <percentage> или ключевое слово none (в данном случае эквивалентное 0%). Это значение задаёт цветность результирующего цвета (примерно соответствует «количеству цвета»). Минимальное практически полезное значение — 0, а максимальное теоретически не ограничено (но на практике не превышает 0.5). В этом случае 0% — это 0, а 100% — число 0.4.

H

<number>, <angle> или ключевое слово none (в данном случае эквивалентное 0deg), обозначающее угол <hue> результирующего цвета. Пример разных оттенков см. в разделе «Результат» ниже.

A Необязательно

<alpha-value>, задающее значение альфа-канала результирующего цвета: число 0 соответствует 0% (полностью прозрачный), а 1 — 100% (полностью непрозрачный). Кроме того, ключевое слово none можно использовать, чтобы явно указать отсутствие альфа-канала. Если значение канала A явно не задано, по умолчанию оно равно значению альфа-канала исходного цвета. Если значение указано, перед ним ставится косая черта (/).

Задание компонентов каналов результирующего относительного цвета

При использовании синтаксиса относительных цветов внутри функции oklch() браузер преобразует исходный цвет в эквивалентный цвет OkLCh (если он ещё не задан в этом формате). Цвет задаётся тремя отдельными значениями цветовых каналов — l (светлота), c (цветность) и h (оттенок), — а также значением альфа-канала (alpha). Эти значения каналов доступны внутри функции и используются при задании значений каналов результирующего цвета:

• Значение канала l преобразуется в <number> от 0 до 1 включительно.
• Значение канала c преобразуется в <number> от 0 до 0.4 включительно.
• Значение канала h преобразуется в <number> от 0 до 360 включительно.
• Значение канала alpha преобразуется в <number> от 0 до 1 включительно.

При задании относительного цвета разные каналы результирующего цвета можно выразить несколькими способами. Ниже рассмотрим несколько примеров.

В первых двух примерах ниже мы используем синтаксис относительных цветов. Однако первый пример возвращает тот же цвет, что и исходный, а второй — цвет, никак не связанный с исходным. По сути, они не создают относительные цвета! В реальном коде вы вряд ли когда-либо использовали бы такие варианты и, вероятно, просто указали бы абсолютное значение цвета. Мы включили эти примеры, чтобы начать изучение синтаксиса относительных oklch().

Возьмём исходный цвет hsl(0 100% 50%) (эквивалентный red). Следующая функция возвращает тот же цвет, что и исходный: она использует значения каналов l, c и h исходного цвета (0.627966, 0.257704 и 29.2346) в качестве значений каналов результата:

oklch(from hsl(0 100% 50%) l c h)

Результирующий цвет этой функции — oklch(0.627966 0.257704 29.2346).

Следующая функция использует абсолютные значения каналов результирующего цвета и возвращает совершенно другой цвет, не основанный на исходном:

oklch(from hsl(0 100% 50%) 42.1% 0.25 328.363)

В этом случае результирующий цвет — oklch(0.421 0.25 328.363).

Следующая функция создаёт относительный цвет на основе исходного:

oklch(from hsl(0 100% 50%) 0.8 0.4 h)

Этот пример:

• Преобразует исходный цвет hsl() в эквивалентный цвет oklch() — oklch(0.627966 0.257704 29.2346).
• Задаёт для канала H результирующего цвета значение канала H эквивалента исходного цвета oklch() — 29.2346.
• Задаёт новые значения каналов L и C результирующего цвета, не основанные на исходном: соответственно 0.8 и 0.4.

Итоговый результирующий цвет — oklch(0.8 0.4 29.2346).

В рассмотренных до сих пор примерах альфа-каналы не были явно заданы ни для исходного, ни для результирующего цвета. Если альфа-канал результирующего цвета не задан, по умолчанию используется то же значение, что и для альфа-канала исходного цвета. Если альфа-канал исходного цвета не задан (и это не относительный цвет), по умолчанию используется 1. Поэтому в приведённых выше примерах значения альфа-каналов исходного и результирующего цветов равны 1.

Рассмотрим примеры с заданными значениями альфа-каналов исходного и результирующего цветов. В первом примере значение альфа-канала результата совпадает со значением альфа-канала исходного цвета, а во втором задано другое значение, не связанное со значением альфа-канала исходного цвета.

oklch(from hsl(0 100% 50% / 0.8) l c h / alpha)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.8) */

oklch(from hsl(0 100% 50% / 0.8) l c h / 0.5)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.5) */

В следующем примере исходный цвет hsl() снова преобразуется в эквивалентный цвет oklch() — oklch(0.627966 0.257704 29.2346). К значениям L, C, H и A применяются вычисления calc(), в результате чего получается цвет oklch(0.827966 0.357704 9.23462 / 0.9):

oklch(from hsl(0 100% 50%) calc(l + 0.2) calc(c + 0.1) calc(h - 20) / calc(alpha - 0.1))

Формальный синтаксис

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<hue> = 
  <number> |
  <angle>

<alpha-value> = 
  <number> |
  <percentage>

Примеры

Изменение яркости цвета

В этом примере показан эффект изменения значения L (светлоты) функциональной записи oklch().

HTML

<div data-color="blue-dark"></div>
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red-dark"></div>
<div data-color="red"></div>
<div data-color="red-light"></div>

<div data-color="green-dark"></div>
<div data-color="green"></div>
<div data-color="green-light"></div>

CSS

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

[data-color="blue-dark"] {
  background-color: oklch(10% 0.4 240);
}
[data-color="blue"] {
  background-color: oklch(50% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red-dark"] {
  background-color: oklch(10% 0.4 20);
}
[data-color="red"] {
  background-color: oklch(50% 0.4 20);
}
[data-color="red-light"] {
  background-color: oklch(90% 0.4 20);
}

[data-color="green-dark"] {
  background-color: oklch(10% 0.4 130);
}
[data-color="green"] {
  background-color: oklch(50% 0.4 130);
}
[data-color="green-light"] {
  background-color: oklch(90% 0.4 130);
}

Результат

Изменение интенсивности цвета с помощью цветности

В следующем примере показан эффект изменения значения C (цветности) функциональной записи oklch(): по мере уменьшения значения C цвета теряют интенсивность и становятся почти серыми.

HTML

<div data-color="blue"></div>
<div data-color="blue-chroma1"></div>
<div data-color="blue-chroma2"></div>
<div data-color="blue-chroma3"></div>

<div data-color="red"></div>
<div data-color="red-chroma1"></div>
<div data-color="red-chroma2"></div>
<div data-color="red-chroma3"></div>

<div data-color="green"></div>
<div data-color="green-chroma1"></div>
<div data-color="green-chroma2"></div>
<div data-color="green-chroma3"></div>

CSS

Для исходных синего, красного и зелёного цветов мы задаём для них постепенно уменьшающиеся значения цветности: от полной насыщенности при высоком значении 0.4 (эквивалентном 100%) до 0.01 (эквивалентного 2%), при котором все цвета становятся почти серыми.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

[data-color="blue"] {
  background-color: oklch(50% 0.4 240);
}
[data-color="blue-chroma1"] {
  background-color: oklch(50% 0.2 240);
}
[data-color="blue-chroma2"] {
  background-color: oklch(50% 0.1 240);
}
[data-color="blue-chroma3"] {
  background-color: oklch(50% 0.01 240);
}

[data-color="red"] {
  background-color: oklch(50% 100% 20deg);
}
[data-color="red-chroma1"] {
  background-color: oklch(50% 50% 20deg);
}
[data-color="red-chroma2"] {
  background-color: oklch(50% 25% 20deg);
}
[data-color="red-chroma3"] {
  background-color: oklch(50% 2% 20deg);
}

[data-color="green"] {
  background-color: oklch(50% 0.4 130);
}
[data-color="green-chroma1"] {
  background-color: oklch(50% 0.2 130);
}
[data-color="green-chroma2"] {
  background-color: oklch(50% 0.1 130);
}
[data-color="green-chroma3"] {
  background-color: oklch(50% 0.01 130);
}

Результат

Если бы вместо 0.01 и 2% мы использовали 0 с теми же значениями светлоты, все цвета были бы одного и того же оттенка серого. В этом примере они почти серые.

Оттенки в OkLCh

В следующем примере показаны образцы с разными значениями H (оттенка) функциональной записи oklch().

HTML

<div data-color="0">0deg</div>
<div data-color="20">20deg</div>
<div data-color="40">40deg</div>
<div data-color="60">60deg</div>

и так далее.

<div data-color="80">80deg</div>
<div data-color="100">100deg</div>
<div data-color="120">120deg</div>
<div data-color="140">140deg</div>
<div data-color="160">160deg</div>
<div data-color="180">180deg</div>
<div data-color="200">200deg</div>
<div data-color="220">220deg</div>
<div data-color="240">240deg</div>
<div data-color="260">260deg</div>
<div data-color="280">280deg</div>
<div data-color="300">300deg</div>
<div data-color="320">320deg</div>
<div data-color="340">340deg</div>
<div data-color="360">360deg</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
div {
  flex: 0 0 4em;
  text-align: center;
  line-height: 4em;
  display: inline-block;
  border: 1px solid black;
  color: white;
  font-family: monospace;
}

[data-color="0"] {
  background-color: oklch(50% 0.4 0deg);
}
[data-color="20"] {
  background-color: oklch(50% 0.4 20deg);
}
[data-color="40"] {
  background-color: oklch(50% 0.4 40deg);
}
[data-color="60"] {
  background-color: oklch(50% 0.4 60deg);
}

и так далее.

[data-color="80"] {
  background-color: oklch(50% 0.4 80deg);
}
[data-color="100"] {
  background-color: oklch(50% 0.4 100deg);
}
[data-color="120"] {
  background-color: oklch(50% 0.4 120deg);
}
[data-color="140"] {
  background-color: oklch(50% 0.4 140deg);
}
[data-color="160"] {
  background-color: oklch(50% 0.4 160deg);
}
[data-color="180"] {
  background-color: oklch(50% 0.4 180deg);
}
[data-color="200"] {
  background-color: oklch(50% 0.4 200deg);
}
[data-color="220"] {
  background-color: oklch(50% 0.4 220deg);
}
[data-color="240"] {
  background-color: oklch(50% 0.4 240deg);
}
[data-color="260"] {
  background-color: oklch(50% 0.4 260deg);
}
[data-color="280"] {
  background-color: oklch(50% 0.4 280deg);
}
[data-color="300"] {
  background-color: oklch(50% 0.4 300deg);
}
[data-color="320"] {
  background-color: oklch(50% 0.4 320deg);
}
[data-color="340"] {
  background-color: oklch(50% 0.4 340deg);
}
[data-color="360"] {
  background-color: oklch(50% 0.4 360deg);
}

Результат

Углы оттенков в oklch() отличаются от углов в hsl(). Подробнее см. раздел <hue>. В hsl() цвет sRGB 0deg обозначает красный. Однако в цветовом пространстве CIELab значение 0deg соответствует пурпурному, а красному соответствует приблизительно 41deg.

Изменение значения альфа-канала цвета

В следующем примере показан эффект изменения значения A (альфа-канала) цветовой функции oklch(). Элементы red и red-alpha перекрывают элемент #background-div, чтобы продемонстрировать эффект прозрачности. Значение 0.4 для A делает цвет непрозрачным на 40%.

HTML

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}

[data-color="red"] {
  background-color: oklch(50% 0.5 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 0.5 20 / 0.4);
}

Результат

Использование относительных цветов с oklch()

В этом примере для трёх элементов <div> заданы разные цвета фона. Центральному элементу назначен исходный цвет --base-color без изменений, а левому и правому — его осветлённый и затемнённый варианты --base-color.

Эти варианты задаются с помощью относительных цветов: пользовательское свойство --base-color передаётся функции oklch(), а светлота результирующих цветов изменяется с помощью функции calc(). Для осветлённого цвета к каналу светлоты прибавляется 0.15 (15%), а для затемнённого из него вычитается 0.15 (15%).

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
}

#one {
  background-color: oklch(from var(--base-color) calc(l + 0.15) c h);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: oklch(from var(--base-color) calc(l - 0.15) c h);
}

Результат

Результат:

Спецификации

Совместимость с браузерами

См. также

• Список всех обозначений цветов
• Использование относительных цветов
• Модуль CSS colors
• Тип данных <hue>
• Цветовые функции lch() и oklab()
• Интерактивная статья о цветовом пространстве OkLCh (2024)
• OKLCH в CSS: почему мы отказались от RGB и HSL (2024)
• Перцептивное цветовое пространство для обработки изображений (2020)