oklab()

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

Новое

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

Функциональная запись oklab() выражает заданный цвет в цветовом пространстве Oklab, которое пытается воспроизвести восприятие цвета человеческим глазом.

Oklab — это перцептивное цветовое пространство и полезно для:

Преобразования изображения в оттенки серого без изменения светлоты.
Изменения насыщенности цветов, сохраняя при этом восприятие тона и светлоты пользователем.
Создание плавных и однородных градиентов цветов (при ручном интерполировании, например, в элементе <canvas>).

oklab() работает с декартовой системой координат в цветовом пространстве Oklab — осями a и b. Оно может представлять более широкий диапазон цветов, чем RGB, включая широкоформатные и P3 цвета. Если вам нужна полярная цветовая система, цветовой тон и насыщенность, используйте oklch().

Синтаксис

/* Absolute values */
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);
oklab(59.69% 0.1007 0.1191 / 0.5);

/* Relative values */
oklab(from green l a b / 0.5)
oklab(from #0000FF calc(l + 0.1) a b / calc(alpha * 0.9))
oklab(from hsl(180 100% 50%) calc(l - 0.1) a b)

Значения

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

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

oklab(L a b[ / A])

Параметры следующие:

L: Числовое <number> в диапазоне от 0 до 1, процентное <percentage> в диапазоне от 0% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение определяет воспринимаемую светлоту цвета. Число 0 соответствует 0% (черному), а число 1 соответствует 100% (белому).
a: Числовое <number> в диапазоне от -0.4 до 0.4, процентное <percentage> в диапазоне от -100% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение определяет расстояние цвета по оси a в цветовом пространстве Oklab, определяя, насколько зелёным (двигаясь к -0.4) или красным (двигаясь к +0.4) является цвет. Обратите внимание, что эти значения имеют знак (позволяя как положительные, так и отрицательные значения) и теоретически не ограничены, что означает, что вы можете задать значения за пределами ±0.4 (±100%) пределов. На практике значения не могут превышать ±0.5.
b: Числовое <number> в диапазоне от -0.4 до 0.4, процентное <percentage> в диапазоне от -100% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение определяет расстояние цвета по оси b в цветовом пространстве Oklab, определяя, насколько синим (двигаясь к -0.4) или жёлтым (двигаясь к +0.4) является цвет. Обратите внимание, что эти значения имеют знак (позволяя как положительные, так и отрицательные значения) и теоретически не ограничены, что означает, что вы можете задать значения за пределами ±0.4 (±100%) пределов. На практике значения не могут превышать ±0.5.
A Необязательно: Значение <alpha-value>, представляющее значение альфа-канала цвета, где число 0 соответствует 0% (полностью прозрачный), а 1 соответствует 100% (полностью непрозрачный). Кроме того, можно использовать ключевое слово none для явного указания отсутствия альфа-канала. Если значение канала A не указано явно, оно по умолчанию равно 100%. Если включено, значение предваряется косой чертой (/).

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

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

oklab(from <color> L a b[ / A])

Параметры следующие:

from <color>: Ключевое слово from всегда включается при определении относительного цвета, за которым следует значение <color>, представляющее цвет-источник. Это исходный цвет, на основе которого определяется относительный цвет. Цвет-источник может быть любым допустимым синтаксисом <color>, включая другой относительный цвет.
L: Числовое <number> в диапазоне от 0 до 1, процентное <percentage> в диапазоне от 0% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение представляет светлоту выходного цвета. Число 0 соответствует 0% (черному), а число 1 соответствует 100% (белому).
a: Числовое <number> в диапазоне от -0.4 до 0.4, процентное <percentage> в диапазоне от -100% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение представляет расстояние выходного цвета по оси a в цветовом пространстве Oklab, определяя, насколько зелёным (двигаясь к -0.4) или красным (двигаясь к +0.4) является цвет. Обратите внимание, что эти значения имеют знак (позволяя как положительные, так и отрицательные значения) и теоретически не ограничены, что означает, что вы можете задать значения за пределами ±0.4 (±100%) пределов. На практике значения не могут превышать ±0.5.
b: Числовое <number> в диапазоне от -0.4 до 0.4, процентное <percentage> в диапазоне от -100% до 100%, или ключевое слово none (эквивалентное 0% в данном случае). Это значение представляет расстояние выходного цвета по оси b в цветовом пространстве Oklab, определяя, насколько синим (двигаясь к -0.4) или жёлтым (двигаясь к +0.4) является цвет. Обратите внимание, что эти значения имеют знак (позволяя как положительные, так и отрицательные значения) и теоретически не ограничены, что означает, что вы можете задать значения за пределами ±0.4 (±100%) пределов. На практике значения не могут превышать ±0.5.
A Необязательно: Значение <alpha-value>, представляющее значение альфа-канала выходного цвета, где число 0 соответствует 0% (полностью прозрачный), а 1 соответствует 100% (полностью непрозрачный). Кроме того, можно использовать ключевое слово none для явного указания отсутствия альфа-канала. Если значение канала A не указано явно, оно по умолчанию равно значению альфа-канала цвета-источника. Если включено, значение предваряется косой чертой (/).

Определение компонентов выходных каналов относительного цвета

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

Значение канала l разрешается до значения <number> в диапазоне от 0 до 1, включительно.
Значения каналов a и b каждый разрешаются до значения <number> в диапазоне от -0.4 до 0.4, включительно.
Значение канала alpha разрешается до значения <number> в диапазоне от 0 до 1, включительно.

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

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

Начнём с цвета-источника hsl(0 100% 50%) (эквивалентного red). Следующая функция выводит тот же цвет, что и цвет-источник — она использует значения каналов l, a, и b цвета-источника (0.627966, 0.22488, и 0.125859) в качестве значений каналов выходного цвета:

oklab(from hsl(0 100% 50%) l a b)

Выходной цвет этой функции — oklab(0.627966 0.22488 0.125859).

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

oklab(from hsl(0 100% 50%) 42.1% 0.165 -0.101)

В этом случае выходной цвет — oklab(0.421 0.165 -0.101).

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

oklab(from hsl(0 100% 50%) l -0.3 b)

В этом примере:

Цвет-источник hsl() преобразуется в эквивалентный цвет oklab() — oklab(0.627966 0.22488 0.125859).
Значения каналов L и b выходного цвета устанавливаются на значения каналов oklab() эквивалента цвета-источника — эти значения равны 0.627966 и 0.125859, соответственно.
Значение канала a выходного цвета устанавливается на новое значение, не связанное с цветом-источником: -0.3.

Конечный выходной цвет — oklab(0.627966 -0.3 0.125859).

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

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

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

oklab(from hsl(0 100% 50% / 0.8) l a b / alpha)
/* Computed output color: oklab(0.627966 0.22488 0.125859 / 0.8) */

oklab(from hsl(0 100% 50% / 0.8) l a b / 0.5)
/* Computed output color: oklab(0.627966 0.22488 0.125859 / 0.5) */

В следующем примере hsl() цвет источника снова преобразуется в oklab() эквивалент — oklab(0.627966 0.22488 0.125859). Вычисления calc() применяются к значениям L, a, b, и A, что приводит к выходному цвету oklab(0.827966 0.14488 -0.0741406 / 0.9):

oklab(from hsl(0 100% 50%) calc(l + 0.2) calc(a - 0.08) calc(b - 0.2) / calc(alpha - 0.1))

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

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

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

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

Примеры

Настройка светлоты

Следующий пример демонстрирует влияние изменения значений светлоты, оси a и оси b для функции oklab().

HTML

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

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

CSS

[data-color="red-dark"] {
  background-color: oklab(0.05 0.4 0.4);
}
[data-color="red"] {
  background-color: oklab(0.5 0.4 0.4);
}
[data-color="red-light"] {
  background-color: oklab(0.95 0.4 0.4);
}

[data-color="green-dark"] {
  background-color: oklab(5% -100% 0.4);
}
[data-color="green"] {
  background-color: oklab(50% -100% 0.4);
}
[data-color="green-light"] {
  background-color: oklab(95% -100% 0.4);
}

[data-color="blue-dark"] {
  background-color: oklab(0.05 -0.3 -0.4);
}
[data-color="blue"] {
  background-color: oklab(0.5 -0.3 -0.4);
}
[data-color="blue-light"] {
  background-color: oklab(0.95 -0.3 -0.4);
}

Результат

Настройка непрозрачности

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

HTML

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

CSS

[data-color="red"] {
  background-color: oklab(0.628 0.225 0.126);
}
[data-color="red-alpha"] {
  background-color: oklab(0.628 0.225 0.126 / 0.4);
}

Результат

Настройка цветовых осей

В этом примере показаны эффекты установки значений a и b функции oklab() соответственно на крайние значения и середины оси a и оси b. Ось a варьируется от зеленого (-0.4) до красного (0.4), а ось b - от желтого (-0.4) до синего (0.4).

HTML

<div data-color="red-yellow"></div>
<div data-color="red-zero"></div>
<div data-color="red-blue"></div>

<div data-color="zero-yellow"></div>
<div data-color="zero-zero"></div>
<div data-color="zero-blue"></div>

<div data-color="green-yellow"></div>
<div data-color="green-zero"></div>
<div data-color="green-blue"></div>

CSS

Используя свойство CSS background-color, мы изменяем значения a и b функции цвета oklab() вдоль осей a и b, демонстрируя влияние максимальных, средних и минимальных значений в каждом случае.

/* a-axis max, variable b-axis */
[data-color="red-yellow"] {
  background-color: oklab(0.5 0.4 0.4);
}
[data-color="red-zero"] {
  background-color: oklab(0.5 0.4 0);
}
[data-color="red-blue"] {
  background-color: oklab(0.5 0.4 -0.4);
}

/* a-axis center, variable b-axis */
[data-color="zero-yellow"] {
  background-color: oklab(0.5 0 0.4);
}
[data-color="zero-zero"] {
  background-color: oklab(0.5 0 0);
}
[data-color="zero-blue"] {
  background-color: oklab(0.5 0 -0.4);
}

/* a-axis min, variable b-axis */
[data-color="green-yellow"] {
  background-color: oklab(0.5 -0.4 0.4);
}
[data-color="green-zero"] {
  background-color: oklab(0.5 -0.4 0);
}
[data-color="green-blue"] {
  background-color: oklab(0.5 -0.4 -0.4);
}

Результат

Левый столбец находится на жёлтом конце (-0.4) оси b, а правый - на синем конце (0.4). Верхняя строка отображает цвета на красном конце оси a (-0.4), а нижняя - на зелёном (0.4). Средний столбец и строка находятся в середине каждой оси, а средняя ячейка является серой; она не содержит красного, зеленого, желтого или синего цветов, и имеет значение 0 для обеих осей.

Линейные градиенты вдоль осей a и b

Этот пример включает линейные градиенты, чтобы продемонстрировать изменение значений функции oklab() вдоль оси a (от красного до зеленого) и вдоль оси b (от желтого до синего). На каждом изображении градиента одна ось остается неизменной, в то время как другая ось изменяется от низких к высоким значениям.

CSS

/* a-axis gradients */
[data-color="red-to-green-yellow"] {
  background-image: linear-gradient(to right, oklab(50% 0.4 0.4), oklab(50% -0.4 0.4));
}
[data-color="red-to-green-zero"] {
  background-image: linear-gradient(to right, oklab(50% 0.4 0), oklab(50% -0.4 0));
}
[data-color="red-to-green-blue"] {
  background-image: linear-gradient(to right, oklab(50% 0.4 -0.4), oklab(50% -0.4 -0.4));
}

/* b-axis gradients */
[data-color="yellow-to-blue-red"] {
  background-image: linear-gradient(to right, oklab(50% 0.4 0.4), oklab(50% 0.4 -0.4));
}
[data-color="yellow-to-blue-zero"] {
  background-image: linear-gradient(to right, oklab(50% 0 0.4), oklab(50% 0 -0.4));
}
[data-color="yellow-to-blue-green"] {
  background-image: linear-gradient(to right, oklab(50% -0.4 0.4),oklab(50% -0.4 -0.4));
}

Результат

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

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

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

CSS

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

#one {
  background-color: oklab(from var(--base-color) calc(l + 0.15) a b);
}

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

#three {
  background-color: oklab(from var(--base-color) calc(l - 0.15) a b);
}

Результат

Вывод следующий:

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

Спецификация
CSS Color Module Level 5 # relative-Oklab
CSS Color Module Level 4 # ok-lab

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`oklab`	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	119	128	79	16.4	25.0	119

См. также

Тип данных <color> для списка всех способов записи цветов
lab() и oklch() цветовые функции
Использование относительных цветов
Модуль CSS colors
A perceptual color space for image processing на bottosson.github.io (2023)
OKLAB цветовое колесо на observablehq.com

© 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/oklab