ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML Цвета. Уроки для начинающих

HSL Цвета


HSL Калькулятор


 
rgb(255, 0, 0)
#ff0000


H:
S:
L:

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 поддерживаются во всех основных браузерах.

Пример

<style>
div {
    background-color: hsl(180, 50%, 50%);
    color: hsl(0, 0%, 100%);
}
</style>

Попробуйте сами »

Уроки по использованию цветов на веб-страницах смотрите на нашем сайте W3Schools на русском в разделах HTML Цвета и CSS Цвета.