Задание цвета по его названию

HTML Цвета

В HTML существует три способа задания цвета. Рассмотрим их.

Как задать цвет, используя значение Hex

HEX – шестнадцатеричная система представления цвета, которая использует арабские десятичные цифры от 0 до 9 и латинские буквы от A до F. В веб-дизайне используются 16 ключевых цветов, так называемый шестнадцатеричный код цвета #RRGGBB, RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.

Регистр букв в Hex не имеет значение. К примеру, определением белого цвета могут быть как заглавные буквы #FFFFFF, так и строчные #ffffff.

Для задания цвета используйте атрибут style, где свойством цвета будет код Hex.

Пример

html> html> head> title>Заголовок окна веб-страницы title> style> div < background-color: #1c87c9; color: #d5dce8; padding: 22px; > style> head> body> div> p>Это текст серого цвета с синим фоном p> div> p style="color:#8ebf42;"> Это текст зеленого цвета p> body> html>

Результат

В приведенной ниже таблице вы можете найти Hex код для каждого цвета. Получить код необходимого вам цвета вы также можете при помощи инструмента Пипетка/Color Picker.

Как задать цвет, используя название цветов

Для того, чтобы изменить цвет, необходимо указать его название на английском (blue, red, etc.) вместо значения Hex из предыдущего примера.

Пример

html> html> head> title>Заголовок окна веб-страницы title> style> div < background-color: blue; color: #d5dce8; padding: 22px; > style> head> body> div> p>Это текст серого цвета с синим фоном. p> div> p style="color:blue;">Это текст синего цвета p> body> html>

Результат

Как задать цвет, используя значение RGB

Для задания цвета используйте атрибут style, где свойством цвета будет код RGB

Пример

html> html> head> title>Заголовок окна веб-страницы title> style> div < background-color:rgb(25,25,112); color: rgb(169,169,169); padding: 22px; > style> head> body> div> p>Это текст серого цвета с синим фоном. p> div> p style="color:rgb(25,25,112);"> Это текст синего цвета p> body> html>

Результат

Ниже приводим 216-ти цветовую кросс-браузерную палитру цветов.

Значение Hex	Цвет	Значение RGB
#000000	rgb(0,0,0)
#FFFFFF	rgb(255,255,255)
#FF0000	rgb(255,0,0)
#00FFFF	rgb(0,255,255)
#0000FF	rgb(0,0,255)
#C0C0C0	rgb(192,192,192)
#FF00FF	rgb(255,0,255)

Значение Hex	Цвет	Значение RGB
#000000	rgb(0,0,0)
#080000	rgb(8,0,0)
#100000	rgb(16,0,0)
#180000	rgb(24,0,0)
#200000	rgb(32,0,0)
#280000	rgb(40,0,0)
#300000	rgb(48,0,0)
#380000	rgb(56,0,0)
#400000	rgb(64,0,0)
#480000	rgb(72,0,0)
#500000	rgb(80,0,0)
#580000	rgb(88,0,0)
#600000	rgb(96,0,0)
#680000	rgb(104,0,0)
#700000	rgb(112,0,0)
#780000	rgb(120,0,0)
#800000	rgb(128,0,0)
#880000	rgb(136,0,0)
#900000	rgb(144,0,0)
#980000	rgb(152,0,0)
#A00000	rgb(160,0,0)
#A80000	rgb(168,0,0)
#B00000	rgb(176,0,0)
#B80000	rgb(184,0,0)
#C00000	rgb(192,0,0)
#C80000	rgb(200,0,0)
#D00000	rgb(208,0,0)
#D80000	rgb(216,0,0)
#E00000	rgb(224,0,0)
#E80000	rgb(232,0,0)
#F00000	rgb(240,0,0)
#F80000	rgb(248,0,0)
#FF0000	rgb(255,0,0)

Значение Hex	Цвет	Значение RGB
#000000	rgb(0,0,0)
#080808	rgb(8,8,8)
#101010	rgb(16,16,16)
#181818	rgb(24,24,24)
#202020	rgb(32,32,32)
#282828	rgb(40,40,40)
#303030	rgb(48,48,48)
#383838	rgb(56,56,56)
#404040	rgb(64,64,64)
#484848	rgb(72,72,72)
#505050	rgb(80,80,80)
#585858	rgb(88,88,88)
#606060	rgb(96,96,96)
#686868	rgb(104,104,104)
#707070	rgb(112,112,112)
#787878&	rgb(120,120,120)
#808080	rgb(128,128,128)
#888888	rgb(136,136,136)
#909090	rgb(144,144,144)
#989898	rgb(152,152,152)
#A0A0A0	rgb(160,160,160)
#A8A8A8	rgb(168,168,168)
#B0B0B0	rgb(176,176,176)
#B8B8B8	rgb(184,184,184)
#C0C0C0	rgb(192,192,192)
#C8C8C8	rgb(200,200,200)
#D0D0D0	rgb(208,208,208)
#D8D8D8	rgb(216,216,216)
#E0E0E0	rgb(224,224,224)
#E8E8E8	rgb(232,232,232)
#F0F0F0	rgb(240,240,240)
#F8F8F8	rgb(248,248,248)
#FFFFFF	rgb(255,255,255)

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

Источник

HTML Цвета

Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:

Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):

Цвет	Название	Цвет	Название	Цвет	Название	Цвет	Название
Black	Gray	Silver	White
Yellow	Lime	Aqua	Fuchsia
Red	Green	Blue	Purple
Maroon	Olive	Navy	Teal

Пример использования различных цветовых названий:

Пример: задание цвета по его названию

Заголовок на красном фоне

Заголовок на оранжевом фоне

Заголовок на фоне лайм

Белый текст на синем фоне

 
Заголовок на красном фоне
 
Заголовок на оранжевом фоне
 
Заголовок на фоне лайм
 
Белый текст на синем фоне
 

Задание цвета с помощью RGB

При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red), G — зеленый (green), В — синий (blue). Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255. Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:

Пример: Задание цвета с помощью RGB

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

  
rgb(127, 255, 127)
  
rgb(50%, 100%, 50%)
 

Задание цвета по шестнадцатеричному значению

Значения R G B также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки #, например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки # можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.

Пример: Цвет HEX

красный: #FF0000

зеленый: #00FF00

синий: #0000FF

красный+зеленый=желтый: #FFFF00

красный+синий=фиолетовый: #FF00FF

зеленый+синий=голубой: #00FFFF

  
красный: #FF0000
 
зеленый: #00FF00
 
синий: #0000FF
 
красный+зеленый=желтый: #FFFF00
 
красный+синий=фиолетовый: #FF00FF
 
зеленый+синий=голубой: #00FFFF
 

Список широко распространённых цветов (название, HEX и RGB):

Английское название	Русское название	Образец	HEX	RGB
Amaranth	Амарантовый	#E52B50	229	43	80
Amber	Янтарный	#FFBF00	255	191	0
Aqua	Сине-зеленый	#00FFFF	0	255	255
Azure	Лазурный	#007FFF	0	127	255
Black	Черный	#000000	0	0	0
Blue	Синий	#0000FF	0	0	255
Bondi Blue	Вода пляжа Бонди	#0095B6	0	149	182
Brass	Латунный	#B5A642	181	166	66
Brown	Коричневый	#964B00	150	75	0
Cerulean	Лазурный	#007BA7	0	123	167
Dark spring green	Тёмный весенне-зелёный	#177245	23	114	69
Emerald	Изумрудный	#50C878	80	200	120
Eggplant	Баклажановый	#990066	153	0	102
Fuchsia	Фуксия	#FF00FF	255	0	255
Gold	Золотой	#FFD700	250	215	0
Gray	Серый	#808080	128	128	128
Green	Зелёный	#00FF00	0	255	0
Indigo	Индиго	#4B0082	75	0	130
Jade	Нефритовый	#00A86B	0	168	107
Lime	Лайм	#CCFF00	204	255	0
Malachite	Малахитовый	#0BDA51	11	218	81
Navy	Тёмно-синий	#000080	0	0	128
Ochre	Охра	#CC7722	204	119	34
Olive	Оливковый	#808000	128	128	0
Orange	Оранжевый	#FFA500	255	165	0
Peach	Персиковый	#FFE5B4	255	229	180
Pumpkin	Тыква	#FF7518	255	117	24
Purple	Фиолетовый	#800080	128	0	128
Red	Красный	#FF0000	255	0	0
Saffron	Шафрановый	#F4C430	244	196	48
Sea Green	Зелёное море	#2E8B57	46	139	87
Swamp green	Болотный	#ACB78E	172	183	142
Teal	Сине-зелёный	#008080	0	128	128
Ultramarine	Ультрамариновый	#120A8F	18	10	143
Violet	Фиолетовый	#8B00FF	139	0	255
Yellow	Жёлтый	#FFFF00	255	255	0

Коды цветов (фон) по насыщенности и оттенку: HTML Таблица цветов

Задачи

Задание цвета по его названию

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

Задача HTML:

      
Заголовок второго уровня
  

Источник