Цвета имеют несколько характеристик, включая оттенок, насыщенность и яркость. CSS3 представил свойство hsl() как альтернативный способ выбора цвета, напрямую указав эти характеристики.
hsl можно расшивровать как Hue (оттенок), Saturation (насыщенность) и Lightness (яркость)
Оттенок - это то, что люди обычно называют «цветом». Если вы изобразите спектр цветов, начинающийся с красного слева, переходящий через зеленый в середине и синий справа, оттенок - это то место, где цвет соответствует этой линии. В hsl() оттенок использует концепцию цветового круга вместо спектра, где угол цвета на круге задается как значение от 0 до 360.
Насыщенность - это количество серого в цвете. Полностью насыщенный цвет не содержит серого, а минимально насыщенный цвет - почти полностью серый. Это выражается в процентном соотношении, при котором 100% полностью насыщено.
Яркость - это количество белого или черного в цвете. Дается процентное значение от 0% (черный) до 100% (белый), где 50% - нормальный цвет.
Вот несколько примеров использования hsl () с полностью насыщенными цветами нормальной яркости:
| Color | HSL |
|---|---|
| red | hsl(0, 100%, 50%) |
| yellow | hsl(60, 100%, 50%) |
| green | hsl(120, 100%, 50%) |
| cyan | hsl(180, 100%, 50%) |
| blue | hsl(240, 100%, 50%) |
| magenta | hsl(300, 100%, 50%) |
Задание:
- Измените цвет фона каждого элемента div на основе имен классов (green, cyan и blue) с помощью hsl (). Все три должны иметь полную насыщенность и нормальную яркость.
