Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.

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

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

    (Hue) ЦВЕТ

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

     

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

     

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

     

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

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

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

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

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

    hsl
     

     

    Цвета HSLA. Альфа-ПРОЗРАЧНОСТЬ

    Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность для цвета. Значение цвета HSLA задается с помощью: hsla (hue, saturation, lightness, alpha), где параметр alpha определяет непрозрачность.

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

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

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

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