HSL - цветовая палитра и прозрачность

цветовая схема hls

HSL (от англ. Hue, Saturation, Lightness). - это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно: hsl (120,100%,50%)

(Hue) ЦВЕТ.

Для того чтобы определить тон нужно указать градус поворота (от 0° до 360°) цветового круга. Имеется радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам (360°)

60° - желтый
120° - зелёный
180° - голубой
240° - синий
300° - фиолетовый

Между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.

(Saturation) НАСЫЩЕННОСТЬ.

Второе значение цветовой модели HSL определяет насыщенность выбранного оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и "сочно" и наоборот если насыщенность стремится к 0% то цвет "линяет" и становится серым.

(Lightness) ОСВЕЩЕНИЕ.

Светлота или яркость это третий параметр HSL. Точно так же как и насыщенность указывается в процентах.. чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета. Оптимальное значение яркости цвета равняется 50%.

hsl

 

Альфа-ПРОЗРАЧНОСТЬ.

Для приобретения прозрачности нужно к коду дописать альфа канал:

hsla (120,100%,50%,0.5) - в данном примере канал прозрачности 0.5, цвет будет показан ровно на половину.



 

Пример вставки цвета HLS в CSS файл:

div{
background-color:hsl(120,10%,50%);
color:hsla(60,100%,50%,0.5)
}



Скажите спасибо - поделитесь:

 




Комментарии (0)