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

Функция CSS lab()

Определение и использование CSS lab() Функция в пространстве цветов CIE Lab определяет цвет. Это пространство представляет все видимые глаза цвета.

примеров

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

#p1 {background-color:lab(0 40% 20% / 0.5);}
#p2 {background-color:lab(30 -40% -20%);}
#p3 {background-color:lab(40 30% -20% / 20%);}
#p4 {background-color:lab(50 60% 20%);}
#p5 {background-color:lab(60 50% -10%);}
#p6 {background-color:lab(70 70% -80% / 0.3);}
#p7 {background-color:lab(80 70% 20% / 0.5);}
#p8 {background-color:lab(90 80% -20%);}
#p9 {background-color:lab(100 90% -100%);}

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

Синтаксис CSS

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

lab(L a b / A)
Значение Описание
L

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

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

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

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

Определяет расстояние цвета по оси a, что показывает красно-зеленую природу цвета. -125 означает зеленый, 125 означает красный.

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

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

Определяет расстояние цвета по оси b, что показывает желтость-синюю природу цвета.

-125 означает синий, 125 означает желтый.

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

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

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

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

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

lab(from color L a b / A)
Значение Описание
from color

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

Это исходный цвет, на котором основан относительный цвет.
L

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

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

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

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

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

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

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

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

Определяет расстояние цвета по оси b, что показывает желтость-синюю природу цвета.

-125 означает синий, 125 означает желтый.

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

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

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

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

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

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

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

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

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

Связанные страницы

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

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

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

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

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

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