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

Функциональная нотация lch() задаёт цвет в цветовом пространстве LCH, которое описывает светлоту, цветность и тон. В ней используется та же ось L, что и в функции цвета lab() цветового пространства CIELab, но применяются полярные координаты C (цветность) и H (тон).

Синтаксис

/* Absolute values */
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);

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

Значения

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

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

lch(L C H[ / A])

Параметры:

L

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

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

C

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

H

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

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

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

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

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

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

Параметры:

from <color>

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

L

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

C

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

H

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

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

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

Задание компонентов каналов итогового относительного цвета

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

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

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

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

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

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

Результат работы этой функции — цвет lch(54.29 106.854 40.856).

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

lch(from hsl(0 100% 50%) 29.6871% 66.83 327.109)

В этом случае итоговый цвет — lch(29.6871 66.83 327.109).

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

lch(from hsl(0 100% 50%) 70 150 h)

Этот пример:

• Преобразует исходный цвет hsl() в эквивалентный цвет lch() — lch(54.29 106.854 40.856).
• Задаёт значение канала H итогового цвета равным значению канала H эквивалента исходного цвета lch() — 40.856.
• Задаёт новые значения каналов L и C итогового цвета, не основанные на исходном: соответственно 70 и 150.

Итоговый цвет — lch(70 150 40.856).

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

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

lch(from hsl(0 100% 50% / 0.8) l c h / alpha)
/* Computed output color: lch(54.29 106.854 40.856 / 0.8) */

lch(from hsl(0 100% 50% / 0.8) l c h / 0.5)
/* Computed output color: lch(54.29 106.854 40.856 / 0.5) */

В следующем примере исходный цвет hsl() снова преобразуется в эквивалентный цвет lch() — lch(54.29 106.854 40.856). К значениям L, C, H и A применяются вычисления calc(), в результате чего итоговый цвет равен lch(74.29 86.8541 0.856018 / 0.9):

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

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

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

<hue> = 
  <number> |
  <angle>

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

Примеры

Настройка яркости цвета

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

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: lch(10% 100 240);
}
[data-color="blue"] {
  background-color: lch(50% 100 240);
}
[data-color="blue-light"] {
  background-color: lch(90% 100 240);
}

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

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

Результат

Настройка интенсивности цвета с помощью цветности

В следующем примере показан эффект изменения значения C (цветности) в функциональной нотации lch(): по мере уменьшения значения 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

Для исходных синего, красного и зелёного цветов мы задаём постепенно уменьшающиеся значения цветности: от максимальной насыщенности цвета при наибольшем значении 150 (эквивалентном 100%) до 3 (эквивалентного 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: lch(50% 150 240);
}
[data-color="blue-chroma1"] {
  background-color: lch(50% 105 240);
}
[data-color="blue-chroma2"] {
  background-color: lch(50% 54 240);
}
[data-color="blue-chroma3"] {
  background-color: lch(50% 3 240);
}

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

[data-color="green"] {
  background-color: lch(50% 150 130);
}
[data-color="green-chroma1"] {
  background-color: lch(50% 105 130);
}
[data-color="green-chroma2"] {
  background-color: lch(50% 54 130);
}
[data-color="green-chroma3"] {
  background-color: lch(50% 3 130);
}

Результат

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

Тоны в LCH

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

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: lch(50% 150 0deg);
}
[data-color="20"] {
  background-color: lch(50% 150 20deg);
}
[data-color="40"] {
  background-color: lch(50% 150 40deg);
}
[data-color="60"] {
  background-color: lch(50% 150 60deg);
}

и так далее.

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

Результат

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

Настройка прозрачности с помощью lch()

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

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

Результат

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

В этом примере для трёх элементов <div> задаются разные цвета фона, чтобы продемонстрировать, как с помощью относительных цветов можно изменять яркость цвета с помощью функции цвета lch(). Средний элемент <div> сохраняет исходный --base-color, а левому и правому элементам <div> задаются осветлённый и затемнённый варианты --base-color.

Эти варианты задаются с помощью относительных цветов: пользовательское свойство --base-color передаётся в функцию lch(), а в итоговых цветах изменяется канал светлоты, чтобы добиться нужного эффекта с помощью функции 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;
}

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

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

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

Результат

Результат:

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

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

См. также

• Список всех обозначений цветов
• Использование относительных цветов
• Модуль «Цвета CSS»
• <hue> тип данных
• Цвета LCH в CSS: что это, зачем и как? — Леа Веру (2020)