Рекомендуемый курс:

CSS oklch() функция

Определение и использование в CSS oklch() Функция используется для указания цвета в цветовом пространстве OKLCH.

oklch() Функция очень интуитивна: вам нужно учитывать количество яркости/светлоты (L),强度 тона (C), а также сам цвет (H). Кроме того, вы можете выбрать добавление значения канала прозрачности (A), которое中表示颜色的 непрозрачности.

примеров

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

/* Разные уровни яркости зелёного /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Разные уровни яркости жёлтого /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Разные уровни яркости красного */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

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

Синтаксис CSS

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

oklch(L C H / A)
Значение Описание
L

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

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

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

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

Должно быть числом в диапазоне от -0.4 до 0.4 или процентом от -100% до 100%.

При минимальном значении (0% или -0.4) цвет приближается к серому.

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

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

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

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

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

По умолчанию 100%.

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

oklch(from color L C H / A)
Значение Описание
from color

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

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

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

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

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

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

Должно быть числом в диапазоне от -0.4 до 0.4 или процентом от -100% до 100%.

При минимальном значении (0% или -0.4) цвет приближается к серому.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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