Цвета имеют несколько характеристик, включая оттенок, насыщенность и легкость. CSS3 представила hsl() как альтернативный способ выбрать цвет, указав непосредственно эти характеристики. Хюэ - это то, что люди обычно считают «цветным». Если вы изображаете спектр цветов, начиная с красного слева, перемещаясь по зеленому посередине, а синий справа, оттенок - это то, где цвет соответствует этой линии. В hsl() оттенок использует концепцию цветового круга вместо спектра, где угол цвета на круге задается как значение от 0 до 360. Насыщенность - это количество серого цвета. Полностью насыщенный цвет не имеет серого цвета, а минимально насыщенный цвет почти полностью серый. Это задается в процентах, при этом 100% полностью насыщенный. Легкость - это количество белого или черного цвета. Процент задается от 0% (черный) до 100% (белый), где 50% - это нормальный цвет. Вот несколько примеров использования hsl() с полностью насыщенными, нормальными цветами легкости:
| цвет | HSL |
|---|---|
| красный | hsl (0, 100%, 50%) |
| желтый | hsl (60, 100%, 50%) |
| зеленый | hsl (120, 100%, 50%) |
| циан | hsl (180, 100%, 50%) |
| синий | hsl (240, 100%, 50%) |
| фуксин | hsl (300, 100%, 50%) |
Измените background-color каждого элемента div на основе имен классов ( green, cyan или blue ) с помощью hsl(). Все три должны иметь полную насыщенность и нормальную легкость.