Цвета HTML | Полная таблица названий цветов для использования в HTML и CSS
- Использование ключевых слов для цветов в HTML и CSS
- Таблицы названий цветов HTML
Использование ключевых слов для цветов в HTML и CSS
Для указания цвета в HTML и CSS разрешается использование как значений различных цветовых моделей (смотреть), так и специальных ключевых слов. При этом, если на первоначальном этапе развития HTML для обозначения основных цветов было предусморено всего 16 названий, то позже были добавлены еще 130 дополнительных ключевых слов. Таким образом в HTML 5 стандартом закреплено уже целых 146 названий наиболее распространенных цветов, нечувстительных к регистру символов и прекрасно поддерживаемых всеми современными браузерами.
Таблицы названий цветов HTML
В таблицах ниже приведены названия всех цветов, закрепленных стандартном HTML 5, а также соответствующие им десятичные и шестнадцатеричные значения в системе RGB. При этом следует обратить внимание на то, что не все ключевые слова указывают на уникальные цвета, т.к. некоторые из названий являются просто синонимами. Например, ключевые слова Gray и Grey задают один и тот же серый цвет #808080 в системе RGB. Опять же, несмотря на то, что в таблице названия html-цветов указаны в верблюжей нотации, записывать их можно в любом регистре.
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
Black | #000000 | 0, 0, 0 |
Grey | #808080 | 128, 128, 128 |
Silver | #C0C0C0 | 192, 192, 192 |
White | #FFFFFF | 255, 255, 255 |
Fuchsia | #FF00FF | 255, 0, 255 |
Purple | #800080 | 128, 0, 128 |
Red | #FF0000 | 255, 0, 0 |
Maroon | #800000 | 128, 0, 0 |
Yellow | #FFFF00 | 255, 255, 0 |
Olive | #808000 | 128, 128, 0 |
Lime | #00FF00 | 0, 255, 0 |
Green | #008000 | 0, 128, 0 |
Aqua | #00FFFF | 0, 255, 255 |
Teal | #008080 | 0, 128, 128 |
Blue | #0000FF | 0, 0, 255 |
Navy | #000080 | 0, 0, 128 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
White | #FFFFFF | 255, 255, 255 |
Snow | #FFFAFA | 255, 250, 250 |
Honeydew | #F0FFF0 | 240, 255, 240 |
MintCream | #F5FFFA | 245, 255, 250 |
Azure | #F0FFFF | 240, 255, 255 |
AliceBlue | #F0F8FF | 240, 248, 255 |
GhostWhite | #F8F8FF | 248, 248, 255 |
WhiteSmoke | #F5F5F5 | 245, 245, 245 |
Seashell | #FFF5EE | 255, 245, 238 |
Beige | #F5F5DC | 245, 245, 220 |
OldLace | #FDF5E6 | 253, 245, 230 |
FloralWhite | #FFFAF0 | 255, 250, 240 |
Ivory | #FFFFF0 | 255, 255, 240 |
AntiqueWhite | #FAEBD7 | 250, 235, 215 |
Linen | #FAF0E6 | 250, 240, 230 |
LavenderBlush | #FFF0F5 | 255, 240, 245 |
MistyRose | #FFE4E1 | 255, 228, 225 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
Gainsboro | #DCDCDC | 220, 220, 220 |
LightGrey | #D3D3D3 | 211, 211, 211 |
LightGray | #D3D3D3 | 211, 211, 211 |
Silver | #C0C0C0 | 192, 192, 192 |
DarkGray | #A9A9A9 | 169, 169, 169 |
DarkGrey | #A9A9A9 | 169, 169, 169 |
Gray | #808080 | 128, 128, 128 |
Grey | #808080 | 128, 128, 128 |
DimGray | #696969 | 105, 105, 105 |
DimGrey | #696969 | 105, 105, 105 |
LightSlateGray | #778899 | 119, 136, 153 |
LightSlateGrey | #778899 | 119, 136, 153 |
SlateGray | #708090 | 112, 128, 144 |
SlateGrey | #708090 | 112, 128, 144 |
DarkSlateGray | #2F4F4F | 47, 79, 79 |
DarkSlateGrey | #2F4F4F | 47, 79, 79 |
Black | #000000 | 0, 0, 0 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
IndianRed | #CD5C5C | 205, 92, 92 |
LightCoral | #F08080 | 240, 128, 128 |
Salmon | #FA8072 | 250, 128, 114 |
DarkSalmon | #E9967A | 233, 150, 122 |
LightSalmon | #FFA07A | 255, 160, 122 |
Crimson | #DC143C | 220, 20, 60 |
Red | #FF0000 | 255, 0, 0 |
FireBrick | #B22222 | 178, 34, 34 |
DarkRed | #8B0000 | 139, 0, 0 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
Pink | #FFC0CB | 255, 192, 203 |
LightPink | #FFB6C1 | 255, 182, 193 |
HotPink | #FF69B4 | 255, 105, 180 |
DeepPink | 255, 20, 147 | |
MediumVioletRed | #C71585 | 199, 21, 133 |
PaleVioletRed | #DB7093 | 219, 112, 147 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
LightSalmon | #FFA07A | 255, 160, 122 |
Coral | #FF7F50 | 255, 127, 80 |
Tomato | #FF6347 | 255, 99, 71 |
OrangeRed | #FF4500 | 255, 69, 0 |
DarkOrange | #FF8C00 | 255, 140, 0 |
Orange | #FFA500 | 255, 165, 0 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
Gold | #FFD700 | 255, 215, 0 |
Yellow | #FFFF00 | 255, 255, 0 |
LightYellow | #FFFFE0 | 255, 255, 224 |
LemonChiffon | #FFFACD | 255, 250, 205 |
LightGoldenrodYellow | #FAFAD2 | 250, 250, 210 |
PapayaWhip | #FFEFD5 | 255, 239, 213 |
Moccasin | #FFE4B5 | 255, 228, 181 |
PeachPuff | #FFDAB9 | 255, 218, 185 |
PaleGoldenrod | #EEE8AA | 238, 232, 170 |
Khaki | #F0E68C | 240, 230, 140 |
DarkKhaki | #BDB76B | 189, 183, 107 |
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
Cornsilk | #FFF8DC | 255, 248, 220 |
BlanchedAlmond | #FFEBCD | 255, 235, 205 |
Bisque | #FFE4C4 | 255, 228, 196 |
NavajoWhite | #FFDEAD | 255, 222, 173 |
Wheat | #F5DEB3 | 245, 222, 179 |
BurlyWood | #DEB887 | 222, 184, 135 |
Tan | #D2B48C | 210, 180, 140 |
RosyBrown | #BC8F8F | 188, 143, 143 |
SandyBrown | #F4A460 | 244, 164, 96 |
Goldenrod | #DAA520 | 218, 165, 32 |
DarkGoldenRod | #B8860B | 184, 134, 11 |
Peru | #CD853F | 205, 133, 63 |
Chocolate | #D2691E | 210, 105, 30 |
SaddleBrown | #8B4513 | 139, 69, 19 |
Sienna | #A0522D | 160, 82, 45 |
Brown | #A52A2A | 165, 42, 42 |
Maroon | #800000 | 128, 0, 0 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
GreenYellow | #ADFF2F | 173, 255, 47 |
Chartreuse | #7FFF00 | 127, 255, 0 |
LawnGreen | #7CFC00 | 124, 252, 0 |
Lime | #00FF00 | 0, 255, 0 |
LimeGreen | #32CD32 | 50, 205, 50 |
PaleGreen | #98FB98 | 152, 251, 152 |
LightGreen | #90EE90 | 144, 238, 144 |
MediumSpringGreen | #00FA9A | 0, 250, 154 |
SpringGreen | #00FF7F | 0, 255, 127 |
MediumSeaGreen | #3CB371 | 60, 179, 113 |
SeaGreen | #2E8B57 | 46, 139, 87 |
ForestGreen | #228B22 | 34, 139, 34 |
Green | #008000 | 0, 128, 0 |
DarkGreen | #006400 | 0, 100, 0 |
YellowGreen | #9ACD32 | 154, 205, 50 |
OliveDrab | #6B8E23 | 107, 142, 35 |
Olive | #808000 | 128, 128, 0 |
DarkOliveGreen | #556B2F | 85, 107, 47 |
MediumAquamarine | #66CDAA | 102, 205, 170 |
DarkSeaGreen | #8FBC8F | 143, 188, 143 |
LightSeaGreen | #20B2AA | 32, 178, 170 |
DarkCyan | #008B8B | 0, 139, 139 |
Teal | #008080 | 0, 128, 128 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
Aqua | #00FFFF | 0, 255, 255 |
Cyan | #00FFFF | 0, 255, 255 |
LightCyan | #E0FFFF | 224, 255, 255 |
PaleTurquoise | #AFEEEE | 175, 238, 238 |
Aquamarine | #7FFFD4 | 127, 255, 212 |
Turquoise | #40E0D0 | 64, 224, 208 |
MediumTurquoise | #48D1CC | 72, 209, 204 |
DarkTurquoise | #00CED1 | 0, 206, 209 |
CadetBlue | #5F9EA0 | 95, 158, 160 |
SteelBlue | #4682B4 | 70, 130, 180 |
LightSteelBlue | #B0C4DE | 176, 196, 222 |
PowderBlue | #B0E0E6 | 176, 224, 230 |
LightBlue | #ADD8E6 | 173, 216, 230 |
SkyBlue | #87CEEB | 135, 206, 235 |
LightSkyBlue | #87CEFA | 135, 206, 250 |
DeepSkyBlue | #00BFFF | 0, 191, 255 |
DodgerBlue | #1E90FF | 30, 144, 255 |
CornflowerBlue | #6495ED | 100, 149, 237 |
MediumSlateBlue | #7B68EE | 123, 104, 238 |
RoyalBlue | #4169E1 | 65, 105, 225 |
Blue | #0000FF | 0, 0, 255 |
MediumBlue | #0000CD | 0, 0, 205 |
DarkBlue | #00008B | 0, 0, 139 |
Navy | #000080 | 0, 0, 128 |
MidnightBlue | #191970 | 25, 25, 112 |
Наверх
Название цвета HTML | 16-ное значение RGB | 10-ное значение RGB |
---|---|---|
Lavender | #E6E6FA | 230, 230, 250 |
Thistle | #D8BFD8 | 216, 191, 216 |
Plum | #DDA0DD | 221, 160, 221 |
Violet | #EE82EE | 238, 130, 238 |
Orchid | #DA70D6 | 218, 112, 214 |
Fuchsia | #FF00FF | 255, 0, 255 |
Magenta | #FF00FF | 255, 0, 255 |
MediumOrchid | #BA55D3 | 186, 85, 211 |
MediumPurple | #9370DB | 147, 112, 219 |
BlueViolet | #8A2BE2 | 138, 43, 226 |
DarkViolet | #9400D3 | 148, 0, 211 |
DarkOrchid | #9932CC | 153, 50, 204 |
DarkMagenta | #8B008B | 139, 0, 139 |
Purple | #800080 | 128, 0, 128 |
Indigo | #4B0082 | 75, 0, 130 |
SlateBlue | #6A5ACD | 106, 90, 205 |
DarkSlateBlue | #483D8B | 72, 61, 139 |
Наверх
Цвета в HTML — Как создать сайт
Способы указания цвета в языке 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 с помощью шестнадцатеричной системы счисления, вам для начала нужно узнать о таком понятии как RGB
RGB — это сокращение от слов Red Green Blue (Красный Зелёный Синий).
Цвет в 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
).
Приведём для наглядности, примеры цветов и их шестнадцатеричный код:
Цвет | Его вид | Шестнадцатеричный код |
---|---|---|
Красный | #ff0000 | |
Тёмно-красный | #960000 | |
Зелёный | #00ff00 | |
Тёмно-зелёный | #009600 | |
Синий | #0000ff | |
Тёмно-синий | #000096 | |
Белый | #ffffff | |
Чёрный | #000000 |
Смешиваем цвета в HTML
Если вы в школе не пропускали занятия по рисованию, то наверняка помните, что при равномерном смешивании красного и зеленого цвета можно получить жёлтый,
при добавлении к красному цвету немного зелёного можно получить оранжевый и т.д.
Цвета, заданные с помощью шестнадцатеричной системы счисления и RGB, тоже можно смешивать:
Цвет | Его вид | Шестнадцатеричный код | Что смешали |
---|---|---|---|
Желтый | #ffff00 | Красный и зелёный | |
Оранжевые оттенки | #ff8800 | Красный и немного зелёного | |
Фиолетовый | #ff00ff | Красный и синий | |
Фиолетовые оттенки | #8800ff | Немного красного и синий | |
Голубой | #00aaff | Синий и немного зелёного | |
Голубые оттенки | #0055ff | Немного зелёного и синий | |
Серые оттенки | #aaaaaa | Равномерно смешать все три цвета |
Экспериментируя с шестнадцатеричной системой счисления и RGB, вы со временем освоитесь и сами сможете подбирать себе цвет, какой только захотите.
Программы подбора цвета
(На данный момент, сервис от Яндекса отключили, обещают скоро включить.)
В мире существуют множество программ, которые помогут вам подобрать цвет. Например, если в Яндексе набрать слово RGB, то под поиском появится виджет, в котором можно подобрать для себя цвет.
Читать далее: Единицы измерения в HTML
- Category: Разное
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free
Что такое шестнадцатеричный код цвета?
Что означает цветовой шестнадцатеричный код?
Шестнадцатеричный код цвета — это шестнадцатеричный способ представления цвета в формате RGB путем объединения трех значений — количества красного, зеленого и синего в определенном оттенке цвета.
Эти цветовые шестнадцатеричные коды были неотъемлемой частью HTML для веб-дизайна и остаются ключевым способом представления цветовых форматов в цифровом виде.
Techopedia объясняет шестнадцатеричный код цвета
Один из способов показать состав цвета — перечислить все три значения красного, зеленого и синего.
Поскольку каждое значение красного, зеленого и синего находится в диапазоне от 0 до 255, результирующий код будет состоять из девяти символов.
В отличие от этого, шестнадцатеричный формат имеет длину всего шесть символов. В этом смысле он сжимает отдельные значения RGB в одно шестизначное значение, которое использует комбинацию буквенно-цифровых символов, включая буквы и цифры, для идентификации цвета.
Также можно расширить это шестизначное значение обратно до его индивидуального значения RGB.
Еще одна причина, по которой шестнадцатеричные значения цвета получили широкое распространение, заключается в том, что многие машины использовали 8-битные операционные коды. В этом смысле октет был разумным способом представления этих типов значений.
Стоит отметить, что с возможными перестановками 0-256 диапазонов для каждого из трех цветовых значений, красного, зеленого и синего, система выдает 16 777 216 результатов, что больше, чем может различить человеческий глаз. Кроме того, новые технологии часто абстрагируют как двоичное, так и шестнадцатеричное значение, используя имя цвета на основе этих значений, например, в каскадных таблицах стилей для универсализации тем и стилей в Интернете.
Другие цветовые системы
Важно отметить, что цветовая система RGB — не единственная цветовая система, используемая в мире технологий. Другая цветовая система, известная как CYMK или голубой, желтый, пурпурный и черный, используется для управления цветной печатью.
Однако в чисто цифровом представлении изображений преобладает система RGB.
Использование шестнадцатеричных цветовых кодов
Современные технологии используют значения цветов RGB и могут использовать или не использовать шестнадцатеричные значения для их представления. В общем, новые пользователи менее знакомы с шестнадцатеричными цветовыми кодами, чем в первые дни существования HTML. Однако новейшие технологии, работающие с цифровым цветом, по-прежнему признают представление цветов и шестнадцатеричных значений.
Одно из самых интересных применений этого метода содержится в описании TechCrunch цветной программы ученого-компьютерщика из Беркли, которая, как говорят, «галлюцинирует» цвета в черно-белые изображения. В общем, различные виды «ретро-технологических» программ могут стремиться «внедрить» цвет в системы или изображения, которые ранее были в градациях серого.
Сверточные нейронные сети детально работают с пикселизированными изображениями. Их оценка может использовать шестнадцатеричные цветовые коды как часть обработки изображений и компьютерного зрения. С его многочисленными слоями и функциями CNN учится объединять такие понятия, как края и функции, чтобы научиться идентифицировать объекты, людей или животных на изображениях.