CSS function oklab

Опис

Функція oklab() в CSS представляє собою інструмент для визначення кольорів за допомогою трьох основних параметрів: яскравість (lightness), кольоровий компонент a, та кольоровий компонент b. Ці параметри відкривають можливість точного контролю над відтінками та колірними властивостями, надаючи розробникам і дизайнерам більше гнучкості та креативності.

Використання функції oklab() може значно полегшити роботу з кольорами в ваших стилях. Зокрема, можна використовувати функцію oklab(0.5, 0.1, 0.2), щоб створити колір із яскравістю 0.5, кольоровим компонентом a 0.1, та кольоровим компонентом b 0.2.

Нижче наведено приклад використання функції oklab() в CSS:

.element {
  color: oklab(0.8, 0.2, -0.3);
  background-color: oklab(0.5, -0.1, 0.4);
}

У цьому прикладі, елемент з класом .element отримує текстовий колір, визначений функцією oklab(0.8, 0.2, -0.3), та фоновий колір, визначений функцією oklab(0.5, -0.1, 0.4). Цей приклад демонструє, як можна застосовувати функцію oklab() для створення виразних кольорових схем в вашому дизайні, забезпечуючи при цьому високу ступінь контролю та узгодженість кольорів.

правити

Нотатка

Використовуйте функцію oklab() для створення кольорових палітр з визначеними значеннями яскравості та кольорових компонентів. Вона може бути особливо корисною, коли вам потрібно працювати з кольорами у просторі Oklab.

автор: Bond правити

Нотатка

Зверніть увагу, що значення яскравості (L) впливає на світлоту або темноту кольору, значення кольорового компонента a визначає відтінок між зеленим та червоним, а значення кольорового компонента b визначає відтінок між жовтим та синім.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

oklab(<L>, <a>, <b>);

Функція oklab може отримувати 3 значень:

<L>

Число від 0 до 1, яке вказує на яскравість (lightness) кольору.

автор: Bond

правити

<a>

Число, яке визначає кольоровий компонент a, може бути будь-яким числом.

автор: Bond

правити

<b>

Число, яке визначає кольоровий компонент b, може бути будь-яким числом.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	111	113	15.4	97	111	—

Підтримка: мобільні переглядачі

Переглядач
	111	111	113	15.4

Приклади

+ запропонувати свій приклад у пісочниці