CSS-функция `lab()`

Функциональная запись lab() выражает заданный цвет в цветовом пространстве CIE L*a*b*.

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

Синтаксис

/* Absolute values */
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

/* Relative values */
lab(from green l a b / 0.5)
lab(from #123456 calc(l + 10) a b)
lab(from hsl(180 100% 50%) calc(l - 10) a b)

Значения

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

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

lab(L a b[ / A])

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

L

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

a

<number> от -125 до 125, <percentage> от -100% до 100% или ключевое слово none (в данном случае эквивалентное 0%). Это значение задаёт расстояние цвета вдоль оси a, определяющей, насколько цвет зелёный (при движении к -125) или красный (при движении к +125). Обратите внимание, что эти значения знаковые (могут быть как положительными, так и отрицательными) и теоретически не ограничены, то есть можно задавать значения за пределами ±125 (±100%). На практике значения не могут превышать ±160.

b

<number> от -125 до 125, <percentage> от -100% до 100% или ключевое слово none (в данном случае эквивалентное 0%). Это значение задаёт расстояние цвета вдоль оси b, определяющей, насколько цвет синий (при движении к -125) или жёлтый (при движении к +125). Обратите внимание, что эти значения знаковые (могут быть как положительными, так и отрицательными) и теоретически не ограничены, то есть можно задавать значения за пределами ±125 (±100%). На практике значения не могут превышать ±160.

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

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

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

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

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

from <color>

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

L

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

a

<number> от -125 до 125, <percentage> от -100% до 100% или ключевое слово none (в данном случае эквивалентное 0%). Это значение задаёт расстояние результирующего цвета вдоль оси a, определяющей, насколько цвет зелёный (при движении к -125) или красный (при движении к +125). Обратите внимание, что эти значения знаковые (могут быть как положительными, так и отрицательными) и теоретически не ограничены, то есть можно задавать значения за пределами ±125 (±100%). На практике значения не могут превышать ±160.

b

<number> от -125 до 125, <percentage> от -100% до 100% или ключевое слово none (в данном случае эквивалентное 0%). Это значение задаёт расстояние результирующего цвета вдоль оси b, определяющей, насколько цвет синий (при движении к -125) или жёлтый (при движении к +125). Обратите внимание, что эти значения знаковые (могут быть как положительными, так и отрицательными) и теоретически не ограничены, то есть можно задавать значения за пределами ±125 (±100%). На практике значения не могут превышать ±160.

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

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

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

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

• Значение канала l преобразуется в <number> от 0 до 100 включительно.
• Каждый из каналов a и b преобразуется в <number> от -125 до 125 включительно.
• Канал alpha преобразуется в <number> от 0 до 1 включительно.

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

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

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

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

Результирующий цвет этой функции — lab(54.29 80.8198 69.8997).

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

lab(from hsl(0 100% 50%) 29.692% 44.89% -29.034%)

В этом случае результирующий цвет — lab(29.692 56.1125 -36.2925).

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

lab(from hsl(0 100% 50%) l -100 b)

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

• Исходный цвет hsl() преобразуется в эквивалентный цвет lab() — lab(54.29 80.8198 69.8997).
• Для каналов l и b результирующего цвета задаются значения каналов L и b эквивалентного исходного цвета lab() — эти значения равны 54.29 и 69.8997 соответственно.
• Для канала a результирующего цвета задаётся новое значение, не основанное на исходном цвете: -100.

Итоговый результирующий цвет — lab(54.29 -100 69.8997).

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

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

lab(from hsl(0 100% 50% / 0.8) l a b / alpha)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.8) */

lab(from hsl(0 100% 50% / 0.8) l a b / 0.5)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.5) */

В следующем примере исходный цвет hsl() снова преобразуется в эквивалент lab() — lab(54.29 80.8198 69.8997). К значениям L, a, b и A применяются вычисления calc(), в результате чего получается цвет lab(74.29 60.8198 29.8997 / 0.9):

lab(from hsl(0 100% 50%) calc(l + 20) calc(a - 20) calc(b - 40) / calc(alpha - 0.1))

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

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

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

Примеры

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

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

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

body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

[data-color="red-dark"] {
  background-color: lab(5 125 71);
}
[data-color="red"] {
  background-color: lab(40 125 71);
}
[data-color="red-light"] {
  background-color: lab(95 125 71);
}

[data-color="green-dark"] {
  background-color: lab(10% -120 125);
}
[data-color="green"] {
  background-color: lab(50% -120 125);
}
[data-color="green-light"] {
  background-color: lab(90% -120 125);
}

[data-color="blue-dark"] {
  background-color: lab(10 -120 -120);
}
[data-color="blue"] {
  background-color: lab(50 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(90 -120 -120);
}

Результат

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

В этом примере показано влияние задания значений a и b функции lab() в крайних точках и серединах оси a, которая идёт от зелёного (-125) до красного (125), и оси b, которая идёт от жёлтого (-125) до синего (125).

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 функции цвета lab() вдоль осей a и b, демонстрируя эффекты максимальных, средних и минимальных значений в каждом случае.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

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

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

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

Результат

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

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

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

<div data-color="red-to-green-yellow">
  <span>red</span><span>`b`= -125 (yellow)</span><span>green</span>
</div>
<div data-color="red-to-green-zero">
  <span>red</span><span>no yellow or blue</span><span>green</span>
</div>
<div data-color="red-to-green-blue">
  <span>red</span><span>`b`= 125 (blue)</span><span>green</span>
</div>

<div data-color="yellow-to-blue-red">
  <span>yellow</span><span>`a` = -125 (red)</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-zero">
  <span>yellow</span><span>no red or green</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-green">
  <span>yellow</span><span>`a` = 125 (green)</span><span>blue</span>
</div>

CSS

div {
  height: 50px;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
span {
  background-color: #ffffffcc;
  padding: 3px;
}

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

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

Результат

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

В следующем примере показан эффект изменения значения A (альфа-канала) функциональной записи lab(). Элементы 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: lightblue;
  width: 150px;
  height: 40px;
}

[data-color="red"] {
  background-color: lab(80 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(80 125 125 / 0.4);
}

Результат

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

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

Эти варианты задаются с помощью относительных цветов: пользовательское свойство --base-color передаётся функции lab(), а в результирующих цветах изменяется канал светлоты для достижения нужного эффекта с помощью функции calc(). Для осветлённого цвета значение канала светлоты увеличивается на 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;
  /* equivalent of lab(75 24 79) */
}

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

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

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

Результат

Результат выглядит следующим образом:

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

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

См. также

• color тип данных
• <color-function> тип данных
• Использование относительных цветов
• Модуль «Цвета CSS»
• Цвета LCH в CSS: что это, зачем они нужны и как их использовать? — Lea Verou (2020)
• Примечания к выпуску Safari Technology Preview 122: включает цвета lab() и lch()