css.in.ua
Підтримати

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.
Нотатка:

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

Синтаксис

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

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

<a>

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

<b>

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

Переглядачі

Переглядач

111

113

15.4

97

111
Переглядач

111

111

113

15.4

Мобільних переглядачів ще не додано.

Приклади


Наведіть курсор на елемент, щоб побачити зміну кольору.

Другий елемент має фоновий колір, визначений за допомогою функції oklab().

Документи

Зв'язок