HSL в HEX

Сравните HSL с HEX

CSS 3 представляет другой способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). это модель, в которой цвет определяется тремя параметрами: оттенком, насыщенностью и яркостью. Давайте рассмотрим каждый параметр отдельно. Ключевым преимуществом HSL является возможность указывать цветовые характеристики независимо друг от друга. Это открывает перед вами огромные возможности. Вы можете легко сделать цвет ярче, темнее, более насыщенным или ненасыщенным. И при этом сохраняя свой оттенок. Или наоборот - меняйте оттенки, не меняя их насыщенности или яркости. Часто для использования таких функций используются препроцессоры, но это возможно и без них. Функция hsl () используется для указания цветов HSL. Функция принимает три значения, разделенных запятой: оттенок, насыщенность и яркость. Изменяя значения насыщенности и яркости, вы можете получить смежные оттенки для определенного цвета.

В большинстве случаев можно распознать цвет по шестнадцатеричному коду, учитывая только первые цифры пар. В приведенном ниже примере видно, что цвет смешан с большим количеством красного, немного синим и совсем без зеленого. Понимание цвета с помощью шестнадцатеричного кода позволяет веб-дизайнеру быстрее перемещаться по коду страницы, и, кроме того, вы всегда можете произвести впечатление на коллег или клиентов, сказав «Ах, какой замечательный оттенок бордового». Вы также можете легко изменить яркость, оттенок или насыщенность цвета, отредактировав только его шестнадцатеричный код. В первом примере ниже одна из пар изменяется с шагом 10%, а яркость цвета увеличивается. Во втором примере яркость увеличивается, а насыщенность падает. Значения RGB также могут быть указаны с использованием шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) - шестнадцатеричные значения от 00 до FF (то же, что и десятичные 0- 255). Шестнадцатеричная система, в отличие от десятичной, основана, как следует из названия, на числе 16.