HSL - модель описывающая значение цвета в трех координатах: тон, насыщенность, светлота; название происходит от аббревиатуры английских слов: hue, saturation, lightness. Основным преимуществом данной цветовой модели перед другими считается то, что она более интуитивно понятна: вначале подбираются нужные цвета, а затем настраиваются, в ней проще создавать свои палитры, сначала выбрав тон, осветлять/затемнять его, уменьшать насыщенность. Hsl имеет поддержку стандарта CSS3, в случае необходимости, легко и без потерь конвертируется в RGB.

Тон.

Тон (hue) в HSL измеряется в градусах в пределах от 0 до 360: красный (red) = 0° или 360°, фиолетовый (fuchsia) = 300°, синий (blue)=240°, голубой (aqua) = 180°, зеленый (green) =120°, жёлтый (yellow) = 60°. При использовании HSL и HSLA в CSS, SVG градус не пишется: hsl(84, 45%, 37%) и hsla(290, 53%, 22%, 0.3).

Тон

На иллюстрации приведенной выше, показан цветовой круг при насыщенности 50% и светлоте 100%. Первое, что бросается в глаза – отсутствие белого, черного и серых цветов, дело в том, что данные цвета формируются за счет значений описанных ниже.

Насыщенность.

Насыщенность

Следующий параметр (Saturation), определяющий насыщенность тона, исчисляется процентами от 0% до 100%. Чем ближе данный параметр приближается к минимуму, тем больше тон тускнеет и, в конечном итоге, дойдя до нуля, становится просто оттенком серого.

Светлота.

Светлота

Светлота (Lightness) - последнее значение HSL, аналогично предыдущему измеряется в процентах, номинальное значение яркости составляет 50%, при отклонении к нулю цвет начинает темнеть, к сотне, светлеет. Вне зависимости то первых двух параметров (saturation и hue), при светлоте 0% цвет будет чёрным (white), при 100%, белым (black).

HSL в CSS, SVG.

В CSS цвет HSL, как и RGB, задается c помощью следующих атрибутов: для текста – color; для фона – background-color; для цвета границы – border-color.

В SVG данные задачи выполняют fill и stroke: fill применяется для цвета как объекта так и текста, а stroke для линии или контура (обводки).

Для указания цвета можно использовать один из следующих вариантов:

hsl(250,60%,70%)
hsl(50, 60%, 70%)
hsl(70 60% 70%)

HSLA.

HSLA добавляет к HSL еще одно значение - alpha, определяющее прозрачность указанного цвета: (h, s, l, a), обозначается: целыми числами 0 (абсолютная прозрачность), 1 (полная непрозрачность); дробными значениями (0.1, 0.2, 0.3 и далее, сокращенное написание: .1, .2, .3); в процентах (5%, 10% …). Также можно заменить запятые на пробелы и косой слеш перед альфа-каналом: hsla(180 80% 50% / .05) На данном примере использования HSLA в CSS цвет элемента будет полупрозрачным: div{background-color:hsla(80, 100%, 30%, 50%)}; для SVG: fill:hsla(120, 100%, 50%, .5).

Примеры синтаксиса:

hsla(50, 100%, 50%, 1)
hsla(250, 80%, 60%, 80%)
hsla(220 75% 40% / .50)
hsla(70 50% 55% / 20%)