⑤ HSL-цвета и HSLA-значения цвета

Продолжим изучение темы CSS - цвета. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Приоритетные цвета: свойство color
• ② Значения цвета, основные ключевые слова
• ③ Числовые значения цвета, модели RGB
• ④ Цвета модели RGBA и ключевое слово transparent

HSL-цвета

Цвета RGB не интуитивно понятны. CSS3 добавляет числовые цвета hue-saturation-lightness (HSL) в дополнение к числовым цветам RGB. HSL-цвета симметричны свету и темноте, и преобразование HSL в RGB максимально просто.

Цвета HSL кодируются как тройка (оттенок, насыщенность, яркость). Оттенок представлен как угол цветного круга (то есть радуга, представленная в круге). Этот угол обычно измеряется в градусах, так что эта единица измерения неявна в CSS; синтаксически дается только число. По определению красный = 0 = 360, а остальные цвета распределены по кругу, поэтому зеленый = 120, синий = 240 и т.д. Насыщенность и яркость представлены в процентах. 100% — это полное насыщение, а 0% — это оттенок серого. Яркость 0% — черная, 100% — белая, а 50% — нормальная.

Синтаксис

CSS

color: hsl(0, 100%, 50%);  
color: hsl(120, 100%, 50%);

HSLA-значения цвета

Так же, как функциональная нотация rgb() имеет альфа-аналог rgba(), функциональная нотация hsl() имеет альфа-аналог hsla().

Формат значения цвета HSLA в функциональной нотации — hsla(, за которым следуют оттенок в градусах, насыщенность и яркость в процентах, и значение непрозрачности, после которого следует символ ). Символы пробела допускаются вокруг числовых значений.

Синтаксис

CSS

color: hsla(240, 100%, 50%, 0.5); 
color: hsla(30, 100%, 50%, 0.1);

Продолжение в следующей статье!