В предыдущем руководстве по свойству 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);
}