Способы задания цвета в HTML и CSS – Значения цветов RGB

В HTML и CSS существует два способа задания цвета: при помощи ключевых слов и в цветовой модели RGB.

RGB это аббревиатура трех английских слов: red, green и blue, которые в переводе обозначают красный, зелёный и синий.

Цветовая модель RGB описывает один из способов синтеза цвета с помощью трёх цветов - их принято называть основными.

Более подробно о том, как задаются цвета в цветовой модели RGB описано далее. А сначала немного поговорим о ключевых словах, которые применяются для обозначения того или иного цвета.



Ключевые слова – Имена цветов

Итак, способ задания цвета при помощи ключевых слов заключается в следующем: существуют 16 базовых цветов, которые можно записывать не только их цифровыми значениями, но и цветовыми именами.

Ниже приведен перечень основных 16 цветов и их имен.

Цвет	Название	Шестнадцатеричное значение
	Aqua	#00FFFF
	Black	#000000
	Blue	#0000FF
	Fuchsia	#FF00FF
	Gray	#808080
	Green	#008000
	Lime	#00FF00
	Maroon	#800000
	Navy	#000080
	Olive	#808000
	Purple	#800080
	Red	#FF0000
	Silver	#C0C0C0
	Teal	#008080
	White	#FFFFFF
	Yellow	#FFFF00

Модель RGB - Десятичная запись цвета

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

Основные цвета red, green и blue – красный, зеленый и синий могут иметь условные значения от 0 до 255 или от 0% до 100%. Из сочетания трех цветов, каждому из которых присваивается одно из значений, получается необходимый цвет.

Например, белый цвет задается как 255,255,255, а черный цвет – как 0,0,0. Первое десятичное число определяет насыщенность красного, второе - насыщенность зеленого и последнее - синего.

Аналогично цвет задается в процентной записи.

Модель RGB - шестнадцатеричная запись цвета

Но в основном, используя цветовую модель RGB, цвета указывают в шестнадцатеричной записи.

Шестнадцатеричная система основывается на числе 16. В нее входят цифры от 0 до 9 и буквы A, B, C, D, E, F (они заменяют десятичные числа от 10 до 15), с помощью которых можно представить любое число.

Основные цвета red, green и blue – красный, зеленый и синий могут иметь условные значения от 00 до FF (их аналог в десятичном представлении - это числа от 0 до 255). Из сочетания трех цветов, каждому из которых присваивается одно из значений, получается необходимый цвет.

Например, белый цвет задается как #FFFFFF, а черный цвет как #000000. Первые две цифры кода (двухзначное шестнадцатеричное число) определяют насыщенность красного, следующие две - насыщенность зеленого и последние две – это синий цвет.

Как видите, шестнадцатеричная запись цвета короче и проще десятичной, а процентная запись кроме этого уступает в разнообразии оттенков. Поэтому удобнее всего пользоваться именно шестнадцатеричным представлением цветов.

Перед шестнадцатеричным числом, обозначающим цвет, ставят символ решетки #. Он обязателен. Это делается для исключения путаницы в определении системы счисления.

Полезно знать и следует учитывать:

В HTML цвета задаются с помощью ключевых слов и в цветовой модели RGB указанием шестнадцатеричных значений.

В CSS есть возможность задания цвета в цветовой модели RGB с помощью десятичных значений и в процентной записи.

Безопасная палитра цветов

Существует так называемая «безопасная» палитра, которая состоит из 216 цветов.

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

1-2	красный	3-4	зеленый	5-6	синий	256	цветов
FFFFFF	CCCCCC	999999	666666	333333	000000	CCCC66	CCCC33
999966	999933	999900	666600	CCFF66	CCFF00	CCFF33	CCCC99
666633	333300	99FF00	99FF33	99CC66	99CC00	99CC33	669900
CCFF99	99FF99	66CC00	66CC33	669933	336600	66FF00	66FF33
33FF00	33CC00	339900	009900	33FF33	00FF33	00FF00	00CC00
33CC33	00CC33	CCFFCC	99CC99	66CC66	669966	336633	003300
99FF99	66FF66	33FF66	00FF66	339933	006600	66FF99	33FF99
00FF99	33CC66	00CC66	009933	66CC99	33CC99	00CC99	339966
009966	006633	99FFCC	66FFCC	33FFCC	00FFCC	33CCCC	009999
CCFFFF	99FFFF	66FFFF	33FFFF	00FFFF	00CCCC	99CCCC	66CCCC
339999	669999	006666	336666	66CCFF	33CCFF	00CCFF	3399CC
0099CC	003333	99CCFF	3399FF	0099FF	6699CC	336699	006699
0066FF	3366CC	0066CC	0033FF	003399	003366	6699FF	3366FF
0000FF	0000CC	0033CC	000033	3333FF	3300FF	3300CC	3333CC
000099	000066	9999CC	6666FF	6666CC	666699	333399	333366
CCCCFF	9999FF	6666FF	6600FF	330099	330066	9966CC	9966FF
6600CC	6633CC	663399	330033	CC99FF	CC66FF	9933FF	9900FF
660099	663366	CC66FF	CC33FF	CC00FF	9900CC	996699	660066
CC99CC	CC66CC	CC33CC	CC00CC	990099	993399	FFCCFF	FF99FF
FF66FF	FF33FF	FF00FF	CC3399	FF66CC	FF00CC	FF33CC	CC6699
CC0099	990066	FF99CC	FF3399	FF0099	CC0066	993366	660033
FF6699	FF3399	FF0066	CC3366	996666	663333	CC9999	CC6666
CC3333	CC0000	990033	330000	FFCCCC	FF9999	FF6666	FF3333
FF0000	CC0033	FF6633	CC3300	FF3300	FF0000	CC0000	990000
FFCC99	FFCC66	FF6600	CC6633	993300	660000	FF9900	FF9933
CC9966	CC6600	996633	663300	FFCC66	FFCC00	FFCC33	CC9900
CC9933	996600	FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00	CCCC00

Полезно знать, и следует учитывать, что если любое из трех значений цвета отличается от:

• Шестнадцатеричных  00, 33, 66, 99, СС или FF. 

• Десятичных  0, 51, 102, 153, 204 или 255.

• В процентах  0%, 20%, 40%, 60%, 80% или 100%.

то цвет не является безопасным.

Пример изменения насыщенности цвета

В таблице приведена шкала значений, в соответствии с которыми меняется насыщенность синего цвета.

Насыщенность	Шестнадцатеричное значение	Десятичное значение	Процентная запись/td>
	#000000	0, 0, 0	0%, 0%, 0%
	#000033	0, 0, 51	0%, 0%, 20%
	#000066	0, 0, 102	0%, 0%, 40%
	#000099	0, 0, 153	0%, 0%, 60%
	#0000CC	0, 0, 204	0%, 0%, 80%
	#0000FF	0, 0, 255	0%, 0%, 100%

Как видите, существует несколько способов задания цвета в HTML и CSS. При помощи ключевых слов или в цветовой модели RGB, для которой существует три вариантов записи цвета: шестнадцатеричная, десятичная и процентная. По возможности используйте 256 цветов из безопасной палитры.