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

CSS Допустимые значений цвета

Цвет в CSS можно задать следующими способами:

Шестнадцатеричный цвет
RGB цвет
RGBA цвет
HSL цвет
HSLA цвет
Предопределенные / кроссбраузерные названия цвета

Шестнадцатеричный цвет

Шестнадцатеричный цвет определяется с: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) шестнадцатеричные целые числа определяют компоненты цвета. Все значения должны находиться в диапазоне от 00 до FF.

Например, значение #0000ff отображается синим цветом, так как синий компонент имеет наибольшее значение (ff), а остальные - 00.

Пример

Определение различных цветов HEX:

#p1 {background-color: #ff0000;}   /* красный */
#p2 {background-color: #00ff00;}   /* зеленый */
#p3 {background-color: #0000ff;}   /* синий */

Попробуйте сами »

RGB Цвет

RGB цвет значение задается функцией rgb(), которая имеет следующий синтаксис:

rgb(red, green, blue)

Каждый параметр (red, green, и blue) определяет интенсивность цвета и может быть целым числом от 0 до 255 или процентным значением (от 0% до 100%).

Например, значение rgb(0,0,255) отображается синим цветом, потому что синий параметр имеет самое высокое значение (255), а остальные значение 0.

Кроме того, равный цвет определяют следующие значения: rgb (0,0,255) и rgb(0%,0%,100%).

Пример

Определение различных RGB цветов:

#p1 {background-color: rgb(255, 0, 0);}   /* красный */
#p2 {background-color: rgb(0, 255, 0);}   /* зеленый */
#p3 {background-color: rgb(0, 0, 255);}   /* синий */

Попробуйте сами »

RGBA Цвет

Значения цвета RGBA являются расширением значений цвета RGB с альфа-каналом, который определяет непрозрачность объекта.

RGBA цвет - указано функцией rgba(), которая имеет следующий синтаксис:

rgba(red, green, blue, alpha)

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

Пример

Определение различных цветов RGB с непрозрачностью:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* красный с непрозрачностью */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* зеленый с непрозрачностью */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* синий с непрозрачностью */

Попробуйте сами »

HSL Цвет

HSL обозначает оттенок, насыщенность и осветление - и представляет цилиндрическое координатное представление цветов.

Цвет значения HSL определяется функция hsl(), которая имеет следующий синтаксис:

hsl(hue, saturation, lightness)

Оттенок - градус на цветовом круге (от 0 до 360) - 0 (или 360) - красный, 120 зеленый, 240-синий. Насыщенность в процентах; 0% означает оттенок серый цвет и 100% полный цвет. Осветление также в процентах; 0% - черный, 100% белый.

Пример

Определение различных HSL цветов:

#p1 {background-color: hsl(120, 100%, 50%);}   /* зеленый */
#p2 {background-color: hsl(120, 100%, 75%);}   /* светло зеленый */
#p3 {background-color: hsl(120, 100%, 25%);}   /* темно зеленый */
#p4 {background-color: hsl(120, 60%, 70%);}    /* пастельно зеленый */

Попробуйте сами »

HSLA Цвет

Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность объекта.

Значение цвета HSLA указывается с помощью функции hsla(), которая имеет следующий синтаксис:

hsla(hue, saturation, lightness, alpha)

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

Пример

Определение различных HSL цветов с непрозрачностью:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* зеленый с непрозрачностью */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* светло зеленый с непрозрачностью */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* темно зеленый с непрозрачностью */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* пастельно зеленый с непрозрачностью */

Попробуйте сами »