Spec-Zone.ru › CSS

lch()

Базовая линия 2023

Новое

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

  • Узнать больше
  • Показать полную совместимость
  • Отправить отзыв

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

Значения

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

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

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

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

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

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

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

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

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

<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

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

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

Результат

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

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

и так далее.

CSS

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

и так далее.

Результат

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

Регулировка непрозрачности с помощью lch()

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

CSS

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

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

Рабочие столы Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android
lch 111 111 113 97 15 111 113 75 15 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 в CSS: что, почему и как? Леа Вероу (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/lch

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API