Красный цвет хтмл. Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA. Задание цвета с помощью RGB

Цвета 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, вы со временем освоитесь и сами сможете подбирать себе цвет, какой только захотите.

В web-дизайне существует несколько способов представления цвета

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

Два других представления цвета в web-дизайне это: в виде RGB(*,*,*), где каждая «*» доля цвета представлена десятичными цифрами от 0 до 255 и по наименованиям цвета на английском языке.

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

Таблица 16 основных цветов , которые используются во всех браузерах

Название Цвет Hex (RGB)
Aqua (морская волна) #00FFFF (000,255,255)
Black (черный) #000000 (000,000,000)
Blue (голубой) #0000FF (000,000,255)
Fuchsia (фуксин) #FF00FF (255,000,255)
Gray (серый) #808080 (128,128,128)
Green (зеленый) #008000 (000,128,000)
Lime (ярко-зеленый) #00FF00 (000,255,000)
Maroon (темно-бордовый) #800000 (128,000,000)
Navy (темно-синий) #000080 (000,000,128)
Olive (оливковый) #808000 (128,128,000)
Purple (фиолетовый) #800080 (128,000,128)
Red (красный) #FF0000 (255,000,000)
Silver (серебряный) #C0C0C0 (192,192,192)
Teal (серо-зеленый) #008080 (000,128,128)
White (белый) #FFFFFF (255,255,255)
Yellow (желтый) #FFFF00 (255,255,000)

Таблица пурпурного цвета и его оттенков

Название Цвет Hex (RGB)
Magenta (пурпурный) #FFCBDB (255,203,219)
Magenta (пурпурный) #FF0099 (255,000,153)
Magenta (маджента) #F95A61 (249,090,097)
Fuchsia (фуксия) #FF00FF (255,000,255)
Мовеин (анилиновый пурпур) #EF0097 (239,000,151)
Salmon pink (оранжево розовый) #FF91A4 (255,145,164)
Cenise (оттенок пурпурного) #DE3163 (153,149,140)
Aubergine Eggplant (баклажановый) #990066 (153,000,132)
Lavender blush (розовато-лавандовый)  #FFF0F5 (255,240,245)
Lilac (сиреневый) #C8A2C8 (200,162,200)
Magenta (маджента) #FF008F (255,000,143)
Orchid (орхидея) #DA70D6 (218,112,214)
Red-violet (фиолетово-красный) #C71585 (199,021,133)
Sanguine (сангиновый) #92000A (146,000,010)
Thistle (оттенок пурпурного) #D8BFD8 (185,211,238)
Violet-eggplant (оттенок пурпурного) #991199 (153,017,153)
Rosa vivo (насыщено розовый) #FF007F (255,000,127)
Lavender-rose (оттенок пурпурного) #FBA0E3 (108,123,139)
Mountbatten pink (розовый Маунбаттена) #997ABD (153,122,141)

Таблица серого цвета и его оттенков

Название Цвет Hex (RGB)
Gray (Серый) #808080 (128,128,128)
Gray (Серый) #bebebe (190,190,190)
(Серый-оттенок) #858585 (133,133,133)
Gray33 (Серый-33) #545454 (084,084,084)
(Серого шифера) #708090 (112,128,144)
(Кварцевый) #99958с (153,149,140)
(Светло-серый) #bbbbbb (187,187,187)
(Серебристый) #c0c0c0 (192,192,192)
(Серо-белый) #f0f0f0 (240,240,240)
(Бороды Абдель-Керима) #e0e0e0 (224,224,224)
LightGray (Серый светлый) #d3d3d3 (211,211,211)
LightStateGray () #778899 (119,136,153)
StateGray-1 (Бледно-васильковый1) #c6e2ff (198,226,255)
StateGray-2 (Бледно-васильковый2) #b9d3ee (185,211,238)
StateGray3 () #9fb6cd (159,182,205)
StateGray4 () #6c7b8b (108,123,139)

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

По названию

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

Табл. 1. Названия цветов
Имя Цвет Код RGB HSL Описание
white #ffffff или #fff rgb(255,255,255) hsl(0,0%,100%) Белый
silver #c0c0c0 rgb(192,192,192) hsl(0,0%,75%) Серый
gray #808080 rgb(128,128,128) hsl(0,0%,50%) Темно-серый
black #000000 или #000 rgb(0,0,0) hsl(0,0%,0%) Черный
maroon #800000 rgb(128,0,0) hsl(0,100%,25%) Темно-красный
red #ff0000 или #f00 rgb(255,0,0) hsl(0,100%,50%) Красный
orange #ffa500 rgb(255,165,0) hsl(38.8,100%,50%) Оранжевый
yellow #ffff00 или #ff0 rgb(255,255,0) hsl(60,100%,50%) Желтый
olive #808000 rgb(128,128,0) hsl(60,100%,25%) Оливковый
lime #00ff00 или #0f0 rgb(0,255,0) hsl(120,100%,50%) Светло-зеленый
green #008000 rgb(0,128,0) hsl(120,100%,25%) Зеленый
aqua #00ffff или #0ff rgb(0,255,255) hsl(180,100%,50%) Голубой
blue #0000ff или #00f rgb(0,0,255) hsl(240,100%,50%) Синий
navy #000080 rgb(0,0,128) hsl(240,100%,25%) Темно-синий
teal #008080 rgb(0,128,128) hsl(180,100%,25%) Сине-зеленый
fuchsia #ff00ff или #f0f rgb(255,0,255) hsl(300,100%,50%) Розовый
purple #800080 rgb(128,0,128) hsl(300,100%,25%) Фиолетовый

С помощью RGB

Internet Explorer Chrome Opera Safari Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

RGBA

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

HSL

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.

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

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

HSLA

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Цвета

Предупреждение

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

Арррргх!

Результат данного примера показан на рис. 2.

Рис. 2. Цвета на веб-странице

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

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

RGB – это цветовая модель, представляющая метод получения всех цветов и их оттенков путем смешивания в различных пропорциях трех главных компонентов, которыми являются:

  • красный цвет (Red );
  • зеленый цвет (Green );
  • синий цвет (Blue ).

Отсюда и происходит сокращенное название RGB . Данные цвета неспроста выбраны основными: причиной является физиология сетчатки человеческого глаза, и то, как она воспринимает их:

RGB -модель на сегодняшний день остается самой популярной и применяется для воспроизведения цветов на экранах телевизоров и компьютерных мониторах. Так как производители наделяют свои изделия различными характеристиками, в 1996 была создана единая система синтеза цветов на основе RGB под названием sRGB , над которой совместно потрудились компании Microsoft и HP .

Числовое представление цвета

Как уже было сказано ранее, RGB цвета формируются путем смешивания основных. Для описания интенсивности каждого из них приняли схему, в которой цвет представляется диапазоном 0-255 (8 бит ), что в шестнадцатеричной системе исчисления соответствует 00-FF .

То есть, основные цвета будут иметь следующий вид:

  • Красный – RGB (255,0,0 );
  • Зеленый – RGB (0,255,0 );
  • Синий – RGB (0,0,255 );

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

Таблицы цветов RGB

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

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

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

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

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

Используя коды цветов RGB из данной палитры, веб-разработчик может не бояться за отображение цветов на страницах своего сайта при просмотре с помощью различных браузеров, на различных платформах и мониторах. Хотя на данный момент таблица безопасных цветов теряет свою актуальность (технический прогресс все же не стоит на месте ), при ее использовании можно, что называется, спать спокойно.

Золотой цвет в RGB модели

Впервые слово «золотой», было использовано в начале XIV века для описания цвета химического элемента под названием Aurum – золото. В модели RGB золотой цвет представлен следующими числовыми значениями:

  • RGB (255, 215, 0 ) – десятеричная система;
  • HEX #FFD700 – шестнадцатеричная система.

Бежевый цвет в RGB модели

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

Таблица (палитра) цветов html предоставляет вам возможность самостоятельно подобрать нужный вам тон. Значение цвета отображается в трех форматах: Hex, RGB и HSV.

  • Hex состоит из трех двух символьных значений в шестнадцатеричной системе счисления. Например: #ff00b3, где первая пара чисел - красный, вторая - зеленый, а третья - синий.
  • RGB (RedGreenBlue) имеет вид "200,100,255", обозначающее количество соответствующего тона(красный,зеленый,синий) в получаемом цвете.
  • HSV (Hue, Saturation, Value - тон, насыщенность, значение) - цветовая модель, в которой в качестве координат являются:
    • Hue - цветовой тон, может варьироваться в пределах от 0° до 360°.
    • Saturation - насыщенность, варьируется в пределах 0-100 или 0-1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому.
    • Value (значение цвета) - задает яркость, значение так же может варьироваться в пределах 0-100 или 0-1.

Введите код цвета: GO

Список цветов с названиями

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

Название цвета HEX Цвет
Black #000000
Navy #000080
DarkBlue #00008B
MediumBlue #0000CD
Blue #0000FF
DarkGreen #006400
Green #008000
Teal #008080
DarkCyan #008B8B
DeepSkyBlue #00BFFF
DarkTurquoise #00CED1
MediumSpringGreen #00FA9A
Lime #00FF00
SpringGreen #00FF7F
Aqua #00FFFF
Cyan #00FFFF
MidnightBlue #191970
DodgerBlue #1E90FF
LightSeaGreen #20B2AA
ForestGreen #228B22
SeaGreen #2E8B57
DarkSlateGray #2F4F4F
LimeGreen #32CD32
MediumSeaGreen #3CB371
Turquoise #40E0D0
RoyalBlue #4169E1
SteelBlue #4682B4
DarkSlateBlue #483D8B
MediumTurquoise #48D1CC
Indigo #4B0082
DarkOliveGreen #556B2F
CadetBlue #5F9EA0
CornflowerBlue #6495ED
MediumAquaMarine #66CDAA
DimGray #696969
SlateBlue #6A5ACD
OliveDrab #6B8E23
SlateGray #708090
LightSlateGray #778899
MediumSlateBlue #7B68EE
LawnGreen #7CFC00
Chartreuse #7FFF00
Aquamarine #7FFFD4
Maroon #800000
Purple #800080
Olive #808000
Gray #808080
SkyBlue #87CEEB
LightSkyBlue #87CEFA
BlueViolet #8A2BE2
DarkRed #8B0000
DarkMagenta #8B008B
SaddleBrown #8B4513
DarkSeaGreen #8FBC8F
LightGreen #90EE90
MediumPurple #9370D8
DarkViolet #9400D3
PaleGreen #98FB98
DarkOrchid #9932CC
YellowGreen #9ACD32
Sienna #A0522D
Brown #A52A2A
DarkGray #A9A9A9
LightBlue #ADD8E6
GreenYellow #ADFF2F
PaleTurquoise #AFEEEE
LightSteelBlue #B0C4DE
PowderBlue #B0E0E6
FireBrick #B22222
DarkGoldenRod #B8860B
MediumOrchid #BA55D3
RosyBrown #BC8F8F
DarkKhaki #BDB76B
Silver #C0C0C0
MediumVioletRed #C71585
IndianRed #CD5C5C
Peru #CD853F
Chocolate #D2691E
Tan #D2B48C
LightGray #D3D3D3
PaleVioletRed #D87093
Thistle #D8BFD8
Orchid #DA70D6
GoldenRod #DAA520
Crimson #DC143C
Gainsboro #DCDCDC
Plum #DDA0DD
BurlyWood #DEB887
LightCyan #E0FFFF
Lavender #E6E6FA
DarkSalmon #E9967A
Violet #EE82EE
PaleGoldenRod #EEE8AA
LightCoral #F08080
Khaki #F0E68C
AliceBlue #F0F8FF
HoneyDew #F0FFF0
Azure #F0FFFF
SandyBrown #F4A460
Wheat #F5DEB3
Beige #F5F5DC
WhiteSmoke #F5F5F5
MintCream #F5FFFA
GhostWhite #F8F8FF
Salmon #FA8072
AntiqueWhite #FAEBD7
Linen #FAF0E6
LightGoldenRodYellow #FAFAD2
OldLace #FDF5E6
Red #FF0000
Fuchsia #FF00FF
Magenta #FF00FF
DeepPink #FF1493
OrangeRed #FF4500
Tomato #FF6347
HotPink #FF69B4
Coral #FF7F50
Darkorange #FF8C00
LightSalmon #FFA07A
Orange #FFA500
LightPink #FFB6C1
Pink #FFC0CB
Gold #FFD700
PeachPuff #FFDAB9
NavajoWhite #FFDEAD
Moccasin #FFE4B5
Bisque #FFE4C4
MistyRose #FFE4E1
BlanchedAlmond #FFEBCD
PapayaWhip #FFEFD5
LavenderBlush #FFF0F5
SeaShell #FFF5EE
Cornsilk #FFF8DC
LemonChiffon #FFFACD
FloralWhite #FFFAF0
Snow #FFFAFA
Yellow #FFFF00
LightYellow #FFFFE0
Ivory #FFFFF0
White #FFFFFF