Цвета (Color) в CSS3

CSS3 предоставляет несколько новых методов для определения значений цветов.

Определение цвета в CSS3

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

В следующей части мы будем рассматривать эти модели цвета по порядку.

Цвета RGBA

Можете использовать функциональный символ rgba() для определения цвета в модели RGBA (красный-зеленый-синий-alpha). Модель цвета RGBA - это расширение модели цвета RGB с каналами alpha, которая используется для определения прозрачности цвета.

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

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

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

Цвет также можно определить с помощью функции hsl() в модели цвета HSL (hue-saturation-lightness). Hue представляет собой угол цветового колеса или круга (т.е. круг, представленным радугой), измеряемый в градусах (от 0 до 360). Угол выражается в меньших единицах, так как угол обычно измеряется в градусах, и единица隐но содержится в CSS.

Насыщенность и светliness выражаются в процентах. 100% насыщенности означает полутон, а 0% - серый оттенок. Однако, 100% яркости - это белый цвет, 0% яркости - черный, 50% яркости - нормальный.

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

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

Цвет можно определить с помощью функции hsla() в модели цвета HSLA (色调-насыщенность-светлость-alpha). Модель цвета HSLA - это расширение модели цвета HSL с Alpha-каналом, который specifies opacity of the color.

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

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