В предыдущем руководстве по свойству color в CSS мы рассказывали, как определять цвета, используя ключевые слова и обозначения RGB. В дополнение к этому CSS3 добавляет несколько новых функциональных обозначений для установки значений цвета для элементов: rgba(), hsl() и hsla().

В этом разделе мы их рассмотри по порядку.

Значения цвета RGBA

Цвета могут быть определены в модели RGBA (Red Blue Green Alpha) с использованием функциональной нотации rgba(). Цветовая модель RGBA является расширением цветовой модели RGB с альфа-каналом, который определяет непрозрачность цвета.

Параметр alpha принимает значение от 0.0 (полностью прозрачное) до 1.0 (полностью непрозрачное).

h1 {
    color: rgba(0,0,255,0.5);
}
p {
    background-color: rgba(0%,0%,100%,0.3);
}

Мы уже разбирали это свойство подробнее в Руководстве по свойству opacity в CSS.

Значения цвета HSL

Цвета также могут быть определены моделью HSL (Hue Saturation Lightness) с использованием функциональной нотации hsl(). Оттенок представлен в виде угла (от 0 до 360) цветового круга. Этот угол задается как число на единицу меньше, поскольку угол обычно измеряется в градусах, поэтому эта единица измерения подразумевается в CSS.

Насыщенность (saturation) и яркость (lightness) представлены в процентах. 100% насыщенность означает полный цвет, а 0% — оттенок серого. Принимая во внимание, что 100% яркости — это белый, 0% — черная, а 50% — нормальная. Посмотрим пример ниже:

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}

В этой системе координат red=0=360, а остальные цвета распределены по кругу, поэтому green=120, blue=240 и т. д. Значение может быть указано в любую сторону окружности, например -120=240, 480=120 и т.д.

Значения цвета HSLA

Цвета могут быть определены в модели HSLA (Hue Saturation Lightness Alpha) с использованием функциональной нотации hsla(). Цветовая модель HSLA является расширением цветовой модели HSL с альфа-каналом, который определяет непрозрачность цвета.

Параметр alpha принимает значение от 0.0 (полностью прозрачное) до 1.0 (полностью непрозрачное).

h1 {
    color: hsla(360,80%,50%,0.5);
}
p {
    background-color: hsla(480,60%,30%,0.3);
}

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.