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

CSS function lch()

Опис

Функція lch() у CSS є механізмом для визначення кольорів, враховуючи три ключові параметри: яскравість (lightness), насиченість (chroma) та тон (hue). Це дозволяє розробникам та дизайнерам визначити точний колір, маніпулюючи цими трьома характеристиками.

Цей метод забезпечує гнучке управління кольорами у веб-дизайні, дозволяючи точно змоделювати колір за потребами проекту. Наприклад, ви можете використовувати функцію lch(50%, 75, 120deg), щоб створити колір із яскравістю 50%, насиченістю 75 та тоном 120 градусів.

Ось приклад застосування функції lch() в CSS:

.element {
  background-color: lch(50%, 75, 120deg);
}

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

Нотатка:

Функція lch() може бути корисною для створення гармонійних кольорових схем, де ви можете експериментувати зі значеннями яскравості, насиченості та тону, зберігаючи певну візуальну зв'язність між кольорами.
Нотатка:

Зверніть увагу, що значення яскравості (l) впливає на світлоту або темноту кольору, значення насиченості (c) впливає на насиченість кольору, а значення тону (h) визначає відтінок кольору на колірному колесі.
Нотатка:

Використання функції lch() разом з іншими CSS функціями та властивостями може допомогти досягти більш гнучкого та точного керування кольорами в вашому веб-дизайні.

Синтаксис

lch(<l>, <c>, <h>);
<l>

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

<c>

Число від 0 до 100%, що визначає насиченість (chroma) кольору.

<h>

Значення тону (hue) може бути виражене як кут в градусах без одиниць.

Переглядачі

Переглядач

111

113

15

97

111
Переглядач

111

111

113

15

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

Приклади


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

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

Документи

Зв'язок