Реклама цветовой функции hsl()

hsl — Hue, Saturation, Lightness — Тон, Насыщенность, Осветлённость (не знаю, как лучше перевести, светлость может).

Hue — числовое значение от 0 до 360. То есть это градусы по кругу цветовому. Можно даже указать единицу измерения deg (degree). Угол по кругу, поэтому можно и больше и меньше указывать, и 360 в принципе равен 0, а 560 равно 200. Очень простое и интуитивно-понятное значение. Тон — это и есть цвет. 0 — красный, 120 — зелёный, 240 — синий (и 360 — снова красный). В промежутках лежат промежуточные цвета: 60 — жёлтый (между красным и зелёным), 180 — голубой, 300 — пурпурный (или вернее magenta?). Легко понять, что оранжевый — это 30.

Saturation — насыщенность выбранного в процентах. Тут проще крайние точки взять для объяснения: 100% — это самый насыщенный вариант, то есть это и есть чистый цвет; 0% — отсутствие цвета, то есть обесцвеченность, то, что будет вместо этого цвета на чёрно-белой фотке. Уменьшение этого параметра равносильно применению фильтра grayscale().

Lightness — тоже в процентах, засвеченность, осветлённость. 50% — золотая середина, это и есть цвет. 0% — отсутствие света, то есть чёрный цвет. 100% — это 0% наоборот, то есть полная засвеченность до белого цвета. При этих крайних значениях без разницы, что стоит в двух других параметрах — цвет всё равно будет чёрным при 0% и белым при 100%.

Чтоб взять чистые (RGB-шные) цвета из основных, нужно второе значение поставить в 100%, а третье в 50%.

  hsl(0 100% 50%) — Red красный
 hsl(60 100% 50%) — Yellow жёлтый
hsl(120 100% 50%) — Green зелёный
hsl(180 100% 50%) — Cyan голубой
hsl(240 100% 50%) — Blue синий
hsl(360 100% 50%) — Magenta пурпурный

Эта функция гораздо интуитивно-понятная, чем rgb(). Никто никогда не говорит «подмешай в этот цвет немного красного, и в два раза больше синего». Мы привыкли иначе с цветами обращаться: «сделай чуть светлее», «этот слишком сочный, убавь его насыщенность», «вот тут жёлтый слишком стал зеленоватым, а надо, чтобы он наоборот стал более солнечным».

Выполнить эти хотелки в rgb() без сторонних инструментов — проще застрелитья!

А в hsl() легко (в порядке хотелок):

1) hsl(68 85% 42%) → hsl(68 85% 52%)
2) hsl(68 85% 42%) → hsl(68 75% 42%)
3) hsl(68 85% 42%) → hsl(53 85% 42%)

Даже просто глядя на функцию можно легко примерно угадать, что это за цвет.

Через / можно указать и альфа-канал (непрозрачность): hsl(68deg 85% 42% / 0.7). Этим всем очень удобно манипулировать подставив в параметры вместо конкретных значений кастомные свойства. К примеру цвет фона кнопки по нажатию должен стать менее насыщенным, а в задизабленном состоянии нужно сделать наполовину прозрачным:

button {
  background-color: hsl(
    var(--button-bg-h, 68deg)
    var(--button-bg-s, 85%)
    var(--button-bg-l, 42%)
    /
    var(--button-bg-o, 1)
  );
}
button:active {
  --button-bg-s: 67%;
}
button:disabled {
  --button-bg-o: 0.5;
}

Вместо изменения самого цвета, мы указываем как именно цвет изменяется. Гораздо читебельнее.

firefoxic/hsl.md