CSS function hsl
Опис
Функція hsl() в CSS використовується для встановлення кольору шляхом комбінування значень тону, насиченості та світлоти. Акронім HSL походить від Hue (тон), Saturation (насиченість) і Lightness (світлота), що відображають основні компоненти цієї функції. Використання hsl() дозволяє вам створювати широкий спектр кольорових варіацій та налаштовувати вигляд ваших елементів на веб-сайті.
Функція hsl() приймає три аргументи: значення тону (в градусах), насиченості (відсотки) та світлоти (відсотки). Значення тону вказує кольоровий відтінок, значення насиченості контролює насиченість кольору, а значення світлоти впливає на його яскравість.
Приклад використання:
Припустимо, вам потрібно встановити фоновий колір для елемента, використовуючи hsl(). Ви можете зробити це наступним чином:
.background {
background-color: hsl(120, 50%, 50%);
}
Цей код встановлює фоновий колір з тоном 120 градусів (зелений відтінок), насиченістю 50% та світлотою 50%. Використання функції hsl() тут дає вам гнучкість і легкість управління кольором, дозволяючи швидко змінити його відтінок, насиченість або світлоту за потребою.
- Порада
-
Використовуйте
автор: Bondhsl()для визначення кольорів у просторі HSL, що дозволяє вам контролювати відтінок, насиченість та світлість окремо. - Нотатка
-
Використання функції
автор: Bondhsl()дає можливість контролювати кольорову палітру і створювати власні кольорові схеми. Ви можете використовувати цю функцію, щоб підлаштувати кольори під вимоги вашого дизайну, створювати контрастні комбінації або забезпечити відповідність кольорів бренду.hsl()також дозволяє зручно контролювати яскравість та насиченість кольорів без необхідності працювати зі складними кодами кольорів. - Нотатка
-
Важливо пам'ятати, що значення в
автор: Bondhsl()можуть варіюватись від0до100%для насиченості та світлоти, а тон виражається в градусах від0до360.
Синтаксис
hsl(<hue>, <saturation>, <lightness>);Функція hsl може отримувати 3 значень:
-
<hue> -
Числове значення від
автор: Bond0до360, що визначає відтінок кольору. -
<saturation> -
Числове значення від
автор: Bond0%до100%, що визначає насиченість кольору. -
<lightness> -
Числове значення від
автор: Bond0%до100%, що визначає світлість кольору.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3.1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на квадрат, щоб змінити його кольору.
Кожен квадрат має заданий фоновий колір за допомогою hsl().
Коментарі
Коментарів ще немає — будьте першим!