CSS hsl() — колір через тон, насиченість і світлість

Опис

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

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

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

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

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

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

правити

Загальний опис

правити

Порада

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

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

Нотатка

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

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

Нотатка

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

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

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

Синтаксис

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

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

<hue>

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

автор: Bond

правити

<saturation>

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

автор: Bond

правити

<lightness>

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	3.1	9.5	12	9

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

Переглядач
	4.4	18	4	2

Приклади

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

<div id="description">
  <h2>Приклад 1: зміна кольору при наведенні</h2>
  <p>Наведіть курсор на квадрат, щоб змінити його кольору.</p>
</div>

<div id="result">
  <div class="square"></div>
</div>

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
}

.square {
  width: 200px;
  height: 200px;
  background-color: hsl(360 100% 50%);
  transition: background-color 0.5s;
}

.square:hover {
  background-color: hsl(315 100% 50%);
}

<div id="description">
  <h2>Приклад 1</h2>
  <p>Кожен квадрат має заданий фоновий колір за допомогою hsl().</p>
</div>

<div id="result">
  <div class="square"></div>
  <div class="square custom-color"></div>
</div>

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
}

.square {
  width: 200px;
  height: 200px;
  display: inline-block;
}

.square:not(.custom-color) {
  background-color: hsl(45 100% 50%);
}

.square.custom-color {
  background-color: hsl(0 100% 50%);
}

<p>Один тон, різна світлота: hsl(210 70% L)</p>
<div class="row">
    <div class="sw l1">15%</div>
    <div class="sw l2">35%</div>
    <div class="sw l3">50%</div>
    <div class="sw l4">75%</div>
    <div class="sw l5">95%</div>
</div>

<p>Однакова світлота 50%, різний тон:</p>
<div class="row hues">
    <div class="sw h1">0</div>
    <div class="sw h2">60</div>
    <div class="sw h3">120</div>
    <div class="sw h4">240</div>
    <div class="sw h5">300</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 24px;
}

.row {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.sw {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 90px;
    height: 70px;
    padding-bottom: 6px;
    border: 1px solid #cfd4d9;
    color: #17202a;
    font-size: 13px;
}

.hues .sw {
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.7);
}

.l1 { background: hsl(210 70% 15%); color: #fff; }
.l2 { background: hsl(210 70% 35%); color: #fff; }
.l3 { background: hsl(210 70% 50%); }
.l4 { background: hsl(210 70% 75%); }
.l5 { background: hsl(210 70% 95%); }

.h1 { background: hsl(0 100% 50%); }
.h2 { background: hsl(60 100% 50%); }
.h3 { background: hsl(120 100% 50%); }
.h4 { background: hsl(240 100% 50%); color: #fff; }
.h5 { background: hsl(300 100% 50%); }