Функция oklab() в CSS

Определение и использование

Определение и использование в CSS oklab() функций используется для указания цветов в цветовом пространстве OKLAB. Это цветовое пространство предназначено для имитации способа感知 цветов человеческим глазом.

примеров

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

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

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

Синтаксис CSS

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

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

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

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

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

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

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

-0.4 означает зеленый, 0.4 означает красный. Также можно использовать none (эквивалентно 0%).
b

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

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

-0.4 означает синий, 0.4 означает желтый. Также можно использовать none (эквивалентно 0%).
/ A

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

Можно также использовать none (что означает отсутствие прозрачного канала). Значением по умолчанию является 100%.

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

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

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

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

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

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

También se puede usar none (эквивалентно 0%).
a

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

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

-0.4 означает зеленый, 0.4 означает красный. Также можно использовать none (эквивалентно 0%).
b

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

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

-0.4 означает синий, 0.4 означает желтый. Также можно использовать none (эквивалентно 0%).
/ A

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

Можно также использовать none (что означает отсутствие прозрачного канала). Значением по умолчанию является 100%.

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

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

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

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

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

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

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

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

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

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

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

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