oklch()

Базовая версия 2023

Новое

С мая 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, она не будет работать на более старых устройствах или браузерах.

Функциональное обозначение 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 #0000FF calc(l + 0.1) c h)
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)
oklch(from var(--aColor) l c h / calc(alpha - 0.1))

Значения

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

Примечание: Обычно, когда процентные значения имеют числовой эквивалент в CSS, 100% равно числу 1. Это не относится ко всем значениям компонентов oklch(). Здесь 100% равно 0.4 для значения C.

Синтаксис абсолютного значения

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%. Если включено, значение предваряется косой чертой (/).

Примечание: См. Отсутствующие компоненты цвета для получения дополнительной информации о влиянии none.

Синтаксис относительного значения

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 для выходного цвета устанавливается в значение канала 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). Вычисления calc() применяются к значениям L, C, H и A, что приводит к выходному цвету 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))

Примечание: Поскольку значения каналов исходного цвета разрешаются до значений <number>, при использовании их в вычислениях необходимо добавлять числа, даже в тех случаях, когда канал обычно принимает значения <percentage>, <angle> или других типов. Например, добавление <percentage> к <number> не работает.

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

<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

[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%), что почти серое для всех цветов.

[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 вместо 0.01 и 2%, с теми же значениями светлоты, цвета были бы одинаковым оттенком серого. В этом примере они почти серые.

Цветовые тона в 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>

и так далее.

CSS

[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);
}

и так далее.

Результат

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

Настройка значения альфа-канала цвета

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

HTML

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

CSS

[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%).

CSS

: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 Color Module Level 5 # relative-Oklch
CSS Color Module Level 4 # ok-lab

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`oklch`	111	111	113	97	15.4	111	113	75	15.4	22.0	111
`mixed_type_parameters`	116	116	113	102	16.2	116	113	78	16.2	24.0	116
`relative_syntax`	119	119	128	105	16.4 Реализация на основе более ранней версии спецификации. В результате вычисления со значениями канала `h` не работают правильно, требуя указания значений с единицами (`deg`).	119	128	79	16.4 Реализация на основе более ранней версии спецификации. В результате вычисления со значениями канала `h` не работают правильно, требуя указания значений с единицами (`deg`).	25.0	119

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch