Цвет

Значения Скрипт Цвет Коды языков MIME-типы Адрес Текст Число Проценты

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

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

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 1. Десятичные и шестнадцатеричные числа меньше 16
Десятичные	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Шестнадцатеричные	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 2. Десятичные и шестнадцатеричные числа больше 16
Десятичные	16	17	18	19	20	21	22	23	24	25	26	27	28
Шестнадцатеричные	10	11	12	13	14	15	16	17	18	19	1A	1B	1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc.

Типичный цвет, используемый в HTML, выглядит следующим образом.

<body bgcolor="#fa8e47">

Здесь цвет фона веб-страницы задан как #fa8e47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

fa8e47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

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

Если значения компонент цвета одинаковы (например: #d6d6d6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #ffffff (белый).
Ярко-красный цвет образуется, если красный компонент сделать максимальным (ff), а остальные компоненты обнулить. Цвет со значением #ff0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00ff00) и синим (#0000ff).
Желтый цвет (#ffff00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 1), где представлены основные цвета (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00ffff) получается за счет объединения синего и зеленого цвета.

Рис. 1

Рис. 1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели можно воспользоваться CSS3-генератором

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33ff66.

Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.

Цвета по названию

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 3 приведены имена популярных названий цветов.

Табл. 3. Названия некоторых цветов
Имя цвета	Описание	Шестнадцатеричное значение
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

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

Также рекомендуется посмотреть Таблицу HTML цветов

Табл. 4. Названия цветов и их значения
Название	Цвет	Значение
aliceblue		#f0f8ff
antiquewhite		#faebd7
aqua		#00ffff
aquamarine		#7fffd4
azure		#f0ffff
beige		#f5f5dc
bisque		#ffe4c4
black		#000000
blanchedalmond		#ffebcd
blue		#0000ff
blueviolet		#8a2be2
brown		#a52a2a
burlywood		#de8887
cadetblue		#5f9ea0
chocolate		#d2691e
coral		#ff7f50
cornflowerblue		#6495ed
cornsilk		#fff8dc
crimson		#dc143c
cyan		#00ffff
darkblue		#00008b
darkcyan		#008b8b
darkgoldenrod		#b8860b
darkgray		#a9a9a9
darkgreen		#006400
darkkhaki		#bdb76d
darkmagenta		#8b008b
darkolivegreen		#556b2f
darkorange		#ff8c00
darkorchid		#9932cc
darkred		#8b0000
darksalmon		#e9967a
darkseagreen		#8fbc8f
darkslateblue		#483d8b
darkslategray		#2f4f4f
darkturquoise		#00ced1
darkviolet		#9400d3
deeppink		#ff1493
deepskyblue		#00bfff
dimgray		#696969
dodgerblue		#1e90ff
firebrick		#b22222
floralwhite		#fffaf0
forestgreen		#228b22
fuchsia		#ff00ff
gainsboro		#dcdcdc
ghostwhite		#f8f8ff
gold		#ffd700
goldenrod		#daa520
gray		#808080
grey		#808080
green		#008000
greenyellow		#adff2f
honeydew		#f0fff0
hotpink		#ff69b4
indianred		#cd5c5c
indigo		#4b0082
ivory		#fffff0
khaki		#f0e68c
lavender		#e6e6fa
lavenderblush		fff0f5
lemonchiffon		#fffacd
lightblue		#add8e6
lightcoral		#f08080
lightcyan		#e0ffff
lightgoldenrodyellow		#fafad2
lightgreen		#90ee90
lightpink		#ffb6c1
lightsalmon		#ffa07a
lightseagreen		#20b2aa
lightskyblue		#87cefa
lightslategray		#778899
lightsteelblue		#b0c4de
lightyellow		#ffffe0
lime		#00ff00
limegreen		#32cd32
linen		#faf0f6
magenta		#ff00ff
maroon		#800000
mediumaquamarine		#66cdaa
mediumblue		#0000cd
mediumorchid		#ba55d3
mediumpurple		#9370db
mediumseagreen		#3cb371
mediumslateblue		#7b68ee
mediumspringgreen		#00fa9a
mediumturquoise		#48d1cc
mediumvioletred		#c71585
midnightblue		#191970
mintcream		#f5fffa
mistyrose		#ffe4e1
moccasin		#ffe4b5
navajowhite		#ffdead
navy		#000080
oldlace		#fdf5e6
olive		#808000
olivedrab		#6b8e23
orange		#ffa500
orangered		#ff4500
orchid		#da70d6
palegoldenrod		#eee8aa
palegreen		#98fb98
paleturquoise		#afeeee
palevioletred		#db7093
papayawhip		#ffefd5
peachpuff		#ffdab9
peru		#cd853f
pink		#ffc0cb
plum		#dda0dd
powderblue		#b0e0e6
purple		#800080
red		#ff0000
rosybrown		#bc8f8f
royalblue		#4169e1
salmon		#fa8072
sandybrown		#f4a460
seagreen		#2e2b57
seashell		#ffe5ee
sienna		#a0522d
silver		#c0c0c0
skyblue		#87ceeb
slateblue		#6a5acd
slategray		#708090
snow		#fffafa
springgreen		#00ff7f
steelblue		#4682b4
tan		#d2b48c
teal		#008080
thistle		#d8bfd8
tomato		#ff6347
turquoise		#40e0d0
violet		#ee82ee
wheat		#f5deb3
white		#ffffff
whitesmoke		#f5f5f5
yellow		#ffff00
yellowgreen		#9acd32

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
1	1	2.1	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Браузеры

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

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