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

2022-07-24 0 ∞

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

Шестнадцатеричные цвета;
Цвет RGB;
Цвета RGBA;
Цвета HSL;
Цвета HSLA;
Предопределенные названия цветов.

Шестнадцатеричные цвета
Цвет RGB
Цвета RGBA
Цвета HSL
Цвета HSLA
Предопределенные названия цветов

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

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

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

Пример

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

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

Цвет RGB

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

rgb(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)

Hue - это значение угла (в градусах) цветового круга (от 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 значения цветов являются расширением с альфа-каналом, который определяет непрозрачность объекта.

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

hsla(hue, saturation, lightness, alpha)

Параметр alpha представляет собой число от 0,0 (полностью прозрачный) и до 1,0 (полностью непрозрачный). Этот формат во многом схож с CSS RGBA цветом.

Пример

Определите разные цвета 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);}    /* пастельный оттенок зеленого с прозрачностью */

Предопределенные названия цветов

140 названий цветов предопределены в HTML и CSS. Посмотрите таблицу предопределенных имен цветов.