HSL Кольори

Що таке HSL-кольори?

Колірна модель HSL (Hue, Saturation, Lightness) - це спосіб опису кольорів, який базується на трьох характеристиках:

• Hue (Відтінок): Це основний колір. Визначає тип кольору, його положення на колірному колі (від червоного до фіолетового). Вимірюється в градусах (від 0 до 360).
• Saturation (Насиченість): Характеризує інтенсивність кольору, його чистоту. Вимірюється у відсотках (від 0% до 100%). Чим вище насиченість, тим більш яскравий колір. Якщо насиченість = 0%, то колір стає сірим. Якщо насиченість = 100%, колір буде максимально яскравим (насиченим).
• Lightness (Світлість): Визначає, наскільки колір світлий або темний. Вимірюється у відсотках (від 0% до 100%). 0% - чорний, 100% - білий, а на 50% колір буде максимально чистим і насиченим.

Де використовується HSL?

• Веб-дизайн та графіка: HSL зручний для створення колірних схем, регулювання яскравості та насиченості кольорів.
• Редагування зображень: HSL використовується для корекції кольору, зміни відтінку, насиченості та освітленості зображень.
• Відеомонтаж: HSL допомагає створювати колірні ефекти, змінювати кольори окремих об'єктів на відео.

HSL дає більш природне відчуття кольору, ніж інші моделі, такі як RGB.

Переваги HSL

• Інтуїтивно зрозумілий: HSL легше зрозуміти та використовувати, ніж інші колірні моделі, такі як RGB чи HEX.
• Зручний для регулювання: Легко змінювати окремі параметри кольору (відтінок, насиченість, світлість), не впливаючи на інші.
• Широкий спектр кольорів: HSL дозволяє створювати безліч різних відтінків та комбінацій кольорів.

Недоліки HSL

• Не завжди відповідає сприйняттю: HSL не завжди точно відображає те, як людина сприймає колір.
• Може відрізнятися на різних пристроях: Колір HSL може виглядати трохи по-різному на різних екранах та пристроях.
• Не завжди підтримується у всіх програмах: Хоча HSL популярний у веб-дизайні, не всі програмні засоби підтримують його.

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

• Веб-дизайн: У CSS ви можете використовувати HSL для стилізації окремих елементів:

  Приклад

  Використання HSL-кольорів при стилізації вебсторінки:

  p {
    color: hsl(120, 100%, 50%);
  }

  Це буде зелений колір (120°), з максимальною насиченістю (100%) і середньою світлістю (50%).
• Створення градієнтів: HSL дозволяє створювати плавні переходи між різними кольорами.
• Графіка: У графічних редакторах, як Photoshop, можна налаштувати кольори за допомогою HSL для створення потрібних відтінків.
• Створення колірних фільтрів: HSL використовується для створення різних колірних фільтрів для фотографій та відео.

Як отримати HSL-колір?

Щоб отримати HSL-колір, можна скористатись HSL-калькулятором.

HSL Кольори

Значення кольору HSL підтримуються в IE9 +, Firefox, Chrome, Safari та Opera 10+.

HSL означає hue - відтінок, saturation - насиченість і lightness - легкість.

Значення кольору HSL вказані за допомогою: hsl(hue, saturation, lightness).

Hue - Відтінок

Відтінок - це градус на кольоровому колі від 0 до 360. 0 - червоний, 120 - зелений, 240 - синій.

Saturation - Насиченість

Насиченість - це процентне значення; 0% означає відтінок сірого, а 100% - повний колір.

Lightness - Легкість

Легкість - це також відсоток; 0% - чорний, 100% - білий.

Спробуйте самі

Значення кольору HSL підтримуються у всіх основних браузерах.