Светло зеленый цвет код rgb. Учeбник HTML. Цвета RGB. Цвета безопасной палитры. Задание цвета при помощи строчных литералов

29.01.2024

Модуль CSS color подробно описывает значения, которые позволяют авторам определять цвета и непрозрачность html-элементов, а также значения свойства color .

Свойство color

1. Приоритетные цвета: свойство color

Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство описывает цвет текстового содержимого элемента. Кроме того, оно используется для предоставления потенциального косвенного значения (currentColor) для любых других свойств, которые принимают значения цвета.

Свойство наследуется.

2. Значения цвета

2.1. Основные ключевые слова

Список основных ключевых слов включает в себя следующие значения:

Название	HEX	RGB
black	#000000	0,0,0
silver	#C0C0C0	192,192,192
gray	#808080	128,128,128
white	#FFFFFF	255,255,255
maroon	#800000	128,0,0
red	#FF0000	255,0,0
purple	#800080	128,0,128
fuchsia	#FF00FF	255,0,255
green	#008000	0,128,0
lime	#00FF00	0,255,0
olive	#808000	128,128,0
yellow	#FFFF00	255,255,0
navy	#000080	0,0,128
blue	#0000FF	0,0,255
teal	#008080	0,128,128
aqua	#00FFFF	0,255,255

Названия цветов не чувствительны к регистру.

Синтаксис

Color: teal;

2.2. Числовые значения цвета

2.2.1. Цвета модели RGB

Формат значения RGB в шестнадцатеричном формате — это знак # , за которым сразу следуют три или шесть шестнадцатеричных символов. Трехзначная запись RGB #rgb преобразуется в шестизначную форму #rrggbb путем копирования цифр, а не путем добавления нулей. Например, #fb0 расширяется до #ffbb00 . Это гарантирует, что белый #ffffff может быть указан в короткой записи #fff , и удаляет любые зависимости от глубины цвета дисплея.

Формат значения RGB в функциональной нотации — rgb(, за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трех процентных значений), за которыми следует символ) . Целочисленное значение 255 соответствует 100% и F или FF в шестнадцатеричной записи:

Rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF

Символы пробела допускаются вокруг числовых значений.

В HTML цвет можно задавать тремя способами:

Задание цвета в 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

красный: #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 цвет полной записью необходимо прописать шесть знаков (цифры и/или английские буквы) после решетки, например, черный записывается так: #000000. Сокращенная запись указания html цветов состоит из решетки и трех цифр и/или букв за ней. При этом данный вид запаси можно использовать только в том случае, если полная запись данного цвета состоит одинаковых символов после решетки. Например, этот же черный цвет можно записать так: #000. Указывать html цвета можно как большими, так и маленькими символами, так как они не чувствительны к регистру.

Каждый символ, записанный после "#" соответствует определенной доли красного, зеленого и синего цветов. В свою очередь все мониторы состоят из огромного количества пикселей (микроскопических точек), каждый из которых включает в себя по 3 так называемых "фонарика" (источника света): красны, зеленый и синий. Затем, регулируя интенсивность излучаемого света этими "фонариками", монитор отображает нужный нам цвет.

Сочетая интенсивность излучения красного, синего и зеленого света (от 0 для 256) мониторы могут отображать 16.000.000 различных оттенков.

Также цвета для сайтов могут указываться словесно или в RGB коде.

На сегодняшний день словесно можно прописать 147 цветов. При этом важно знать, что некоторые разные названия могут обозначать одинаковые цвета, например Gray и Grey - это серый цвет (#808080).

Безопасные цвета для сайтов.

Не каждый монитор и браузер может правильно отображать все 16 миллионов html цветов.

Если, например, попадается такой цвет, который браузер не может правильно отобразить, то:

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

Чтобы гарантированно получить на выходе в любом браузере и на любом мониторе тот цвет, который Вы прописали в коде, рекомендуется использовать "Безопасные цвета". Они были определены не вручную или по чьему-то желанию, а математически. Таких на 100% безопасных цветов для html документов существует 216. И хотя сегодняшние технологии дошли до того, что современные мониторы и браузеры распознают миллионы оттенков, мы рекомендуем для гарантии цветопередачи использовать именно эти безопасные цвета.

Таблица безопасных цветов html.

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

Данная таблица включает в себя 216 кодов безопасных html цветов. Каждый цвет имеет значение в RGB для определения цвета в графических редакторах и HEX для указания цвета на html страницах.

Цвета HTML
HTML цвета и способы их указания

В языке HTML, существует два способа указать цвет:

1. С помощью имени цвета,
2. С помощью системы RGB, где цвета заданы в шестнадцатеричном формате.

Имя цвета

Имя цвета в HTML указывается английскими словами, например red или green . Имя цвета выступает в качестве значения атрибута HTML-тега. Имён цветов очень много, в этой статье мы рассмотрим лишь основные из них.

Обычно для задания цвета, в языке HTML используют два атрибута:

1. Атрибут color="имя_цвета" — цвет текста,
2. Атрибут bgcolor="имя_цвета" — цвет фона.

Примеры использования цветовых атрибутов:
color="red" — назначаем тексту красный цвет,
bgcolor="green" — назначаем фону зелёный цвет.

Таблица основных имён цветов HTML:

Имя цвета	Его вид	Перевод
white		Белый
ivory		Слоновая кость
silver		Серебряный
gray		Серый
black		Чёрный
maroon		Тёмно-бордовый
red		Красный
orange		Оранжевый
gold		Золотой
yellow		Жёлтый
olive		Оливковый
lime		Лайм
green		Зелёный
aqua		Морская волна
blue		Синий
navy		Нави
teal		Бирюзовый
fuchsia		Фуксиновый
purple		Пурпурный

Шестнадцатеричная система счисления

В повседневной жизни мы пользуемся десятичной системой счисления от 0 до 9 . Программисты и дизайнеры часто используют шестнадцатеричную систему счисления от 0 до 15 , где:

10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

Практически каждый цвет и оттенок видимый нашему зрению можно записать в шестнадцатеричной системе, например красный цвет red (красный) в шестнадцатеричной системе будет равен ff0000

color="red" — красный цвет, по имени,
color="#ff0000" — красный цвет, в шестнадцатеричной системе счисления.

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

RGB

Перед тем как начать указывать цвета в HTML с помощью шестнадцатеричной системы счисления, вам для начала нужно узнать о таком понятии как R G B

RGB — это сокращение от слов R ed G reen B lue (Красный Зелёный Синий).

Цвет в HTML, записанный в шестнадцатеричной системе состоит из трех блоков чисел 00 00 00 , где каждый блок отвечает за один из цветов RGB, первый блок за красный цвет, второй за зелёный цвет, третий за синий цвет. Числа могут варьироваться от 00 до ff .

Где, ff — это 255 в десятичной системе счисления.

Схема RGB:
Red — от 00 до ff
Green — от 00 до ff
Blue — от 00 до ff

В итоге получаем число из шести цифр 000000 , где первые два числа отвечают за красный цвет, вторые два числа отвечают за зелёный цвет, третьи два числа отвечают за синий цвет.

Если мы хотим получить красный цвет, то пишем ff0000 , зелёный цвет 00ff00 , синий цвет 0000ff . Например, если хотим получить тёмно красный цвет, то нужно уменьшить первый блок чисел и вместо ff (который равен в десятичной системе счисления 255) , записать например 96 (который равен в десятичной системе счисления 150) .

Приведём для наглядности, примеры цветов и их шестнадцатеричный код:

Смешиваем цвета в HTML

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

Цвета, заданные с помощью шестнадцатеричной системы счисления и RGB, тоже можно смешивать:

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

Влад Мержевич

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

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

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

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

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

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

Здесь цвет фона веб-страницы задан как #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) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

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

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 6.2. Окно для выбора цвета в программе Photoshop

Веб-цвета

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

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

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

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

Табл. 6.3. Названия некоторых цветов

Имя цвета	Описание	Шестнадцатеричное значение
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

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

Пример 6.1. Цвет фона и текста

Цвета

Пример текста

В данном примере цвет фона задается с помощью атрибута bgcolor тега , а цвет текста через атрибут text . Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal .