Функция rgb()

Стилевая функция rgb() (от англ. «red, green, blue» — «красный, зелёный, синий») позволяет задать цвет в формате RGB в виде комбинации трёх компонент цвета: красной, зелёной и синей. Значение каждой компоненты может быть целым числом от 0 до 255:

color: rgb(0 244 0)

или в виде процентов от 0 до 100%:

color: rgb(10% 100% 0%)

Синтаксис

свойство: rgb(<число>#{3});
свойство: rgb(<проценты>#{3});
свойство: rgb([<число> | <проценты>]{3});

Современные браузеры поддерживают форму записи, когда значения функции rgb() перечисляются через пробел:

color: rgb(204 62 114);

Или то же самое в виде процентов:

color: rgb(80% 24% 45%);

Для совместимости браузеры понимают и традиционную форму записи, когда значения перечисляются через запятую.

color: rgb(204, 62, 114);

В традиционной форме сочетать в одной записи целые числа и проценты недопустимо.

В современной форме разрешается комбинировать числа и проценты:

color: rgb(80% 24% 114);

Но не все браузеры поддерживают такую запись.

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Некоторые популярные цвета в формате RGB приведены в табл. 1.

Табл. 1. Значения цвета
Цвет в формате RGB	Цвет в шестнадцатеричном значении	Цвет
rgb(0 0 0)	#000000
rgb(255 255 255)	#ffffff
rgb(221 221 221)	#dddddd
rgb(255 0 0)	#ff0000
rgb(0 255 0)	#00ff00
rgb(0 0 255)	#0000ff
rgb(255 255 0)	#ffff00
rgb(255 0 255)	#ff00ff
rgb(0 255 255)	#00ffff
rgb(190 60 57)	#be3c39
rgb(0 172 227)	#00ace3
rgb(83 155 98)	#539b62

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>rgb()</title> <style> body { background-color: rgb(134 187 176); /* Цвет фона */ } hgroup h1 { color: rgb(61 129 115); /* Цвет заголовка */ } hgroup p { color: rgb(255 255 255); /* Цвет текста */ } </style> </head> <body> <hgroup> <h1>Ошибка 404</h1> <p>Запрашиваемый документ не найден</p> </hgroup> </body> </html>

Спецификация

CSS Color Module Level 4

Браузеры


Традиционная форма (через запятую)	6	12	1	3.5	1	1
Современная форма (через пробел)		79	66	53	12.1	52


Традиционная форма (через запятую)	37	4	10.1	2
Современная форма (через пробел)	66	52	47	12.2

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.