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

CSS function hsl()

Опис

Функція hsl() в CSS використовується для встановлення кольору шляхом комбінування значень тону, насиченості та світлоти. Акронім HSL походить від Hue (тон), Saturation (насиченість) і Lightness (світлота), що відображають основні компоненти цієї функції. Використання hsl() дозволяє вам створювати широкий спектр кольорових варіацій та налаштовувати вигляд ваших елементів на веб-сайті.

Функція hsl() приймає три аргументи: значення тону (в градусах), насиченості (відсотки) та світлоти (відсотки). Значення тону вказує кольоровий відтінок, значення насиченості контролює насиченість кольору, а значення світлоти впливає на його яскравість.

Приклад використання:

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

.background {
  background-color: hsl(120, 50%, 50%);
}

Цей код встановлює фоновий колір з тоном 120 градусів (зелений відтінок), насиченістю 50% та світлотою 50%. Використання функції hsl() тут дає вам гнучкість і легкість управління кольором, дозволяючи швидко змінити його відтінок, насиченість або світлоту за потребою.

Порада:

Використовуйте hsl() для визначення кольорів у просторі HSL, що дозволяє вам контролювати відтінок, насиченість та світлість окремо.
Нотатка:

Використання функції hsl() дає можливість контролювати кольорову палітру і створювати власні кольорові схеми. Ви можете використовувати цю функцію, щоб підлаштувати кольори під вимоги вашого дизайну, створювати контрастні комбінації або забезпечити відповідність кольорів бренду. hsl() також дозволяє зручно контролювати яскравість та насиченість кольорів без необхідності працювати зі складними кодами кольорів.
Нотатка:

Важливо пам'ятати, що значення в hsl() можуть варіюватись від 0 до 100% для насиченості та світлоти, а тон виражається в градусах від 0 до 360.

Синтаксис

hsl(<hue>, <saturation>, <lightness>);
<hue>

Числове значення від 0 до 360, що визначає відтінок кольору.

<saturation>

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

<lightness>

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

Переглядачі

Переглядач

1

1

3.1

9.5

12
Переглядач

37

18

4

2

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

Приклади


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

Кожен квадрат має заданий фоновий колір за допомогою hsl().

Документи

Зв'язок