Рекомендации по курсу:

CSS функции lch()

Определение и использование в CSS lch() функции определяет цвет в цветовом пространстве LCH (яркость-сатурация-色调).

примеров

Определение различных lch() Цвет:

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p3 {background-color:lch(10% 160 200);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}

#p9 {background-color:lch(90% 130 70);}

Попробуйте сами

CSS грамматика

Синтаксис абсолютных значенийЭто исходный цвет, на котором основан относительный цвет. C H / Alch(from
) Значение
Это исходный цвет, на котором основан относительный цвет.

Обязателен. Определяет亮度 цвета, может быть числом или процентом в диапазоне от 0 до 100.

0 (или 0%) означает черный, 100 (или 100%) означает белый.

Также можно использовать none (эквивалентно 0%).
C

lch(

Обязателен. Определяет цветовой тон (количество цвета), может быть числом или процентом.

Также можно использовать none (эквивалентно 0%).
H

Обязателен. Определяет угловое значение тона цвета, может быть числовым или угловым значением.

Также можно использовать none (эквивалентно 0deg).
/ A

Опционально. Значение канала прозрачности цвета (0% или 0 означает полную прозрачность, 100% или 100 означает полную непрозрачность).

Также можно использовать none (что означает отсутствие канала прозрачности).

Значением по умолчанию является 100%.

Минимальное значение 0 (или 0%). Максимальное значение не ограничено (но фактически не превышает 230). 100% равно 150.

Синтаксис относительных значений from Это исходный цвет, на котором основан относительный цвет. C H / Alch(from
) Значение
Описание from

color

Начинается с ключевого слова from, за которым следует значение цвета исходного цвета.
Это исходный цвет, на котором основан относительный цвет.

Обязателен. Определяет亮度 цвета, может быть числом или процентом в диапазоне от 0 до 100.

0 (или 0%) означает черный, 100 (или 100%) означает белый.

Также можно использовать none (эквивалентно 0%).
C

Обязателен. Определяет число или процент в диапазоне от -125 до 125 или от -100% до 100%.

Определяет расстояние цвета по оси a, что означает степень красно-зеленого цвета.

-125 означает зеленый, 125 означает красный.

Также можно использовать none (эквивалентно 0%).
H

Обязателен. Определяет угловое значение тона цвета, может быть числовым или угловым значением.

Также можно использовать none (эквивалентно 0deg).
/ A

Опционально. Значение канала прозрачности цвета (0% или 0 означает полную прозрачность, 100% или 100 означает полную непрозрачность).

Также можно использовать none (что означает отсутствие канала прозрачности).

Значением по умолчанию является 100%.

Технические детали

Версия: CSS Color Module Level 4

Поддержка браузерами

Числа в таблице представляют собой версии первых браузеров, которые полностью поддерживают эту функцию.

Chrome Edge Firefox Safari Opera
lch()
111 111 113 15 97
Смешение чисел и процентов в параметрах
116 116 113 16.2 102

Соответствующие страницы

См. также:Цвета CSS

См. также:Функция CSS hsl()

См. также:Функция hwb() в CSS

См. также:Функция lab() в CSS

См. также:Функция oklab() в CSS

См. также:Функция oklch() в CSS