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