HTML цвета
Подробную информацию об использовании цветов в HTML и CSS, способах указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов, вы сможете найти в следующих статьях учебников:
Конвертер цветов
Конвертер цветов позволяет преобразовать (конвертировать) RGB цвета (аббревиатура английских слов red, green, blue — красный, зелёный, синий) в шестнадцатеричные (HEX) значения, RGB цвета в формат HSL (от англ. hue, saturation, lightness (intensity) — тон, насыщенность и осветленность) и обратно HEX значения в RGB и HSL цвета.
Предопределенные имена цветов
Имя цвета | HEX | RGB |
---|---|---|
IndianRed | #CD5C5C | rgb(205, 92, 92) |
LightCoral | #F08080 | rgb(240, 128, 128) |
Salmon | #FA8072 | rgb(250, 128, 114) |
DarkSalmon | #E9967A | rgb(233, 150, 122) |
LightSalmon | #FFA07A | rgb(255, 160, 122) |
Crimson | #DC143C | rgb(220, 20, 60) |
Red | #FF0000 | rgb(255, 0, 0) |
FireBrick | #B22222 | rgb(178, 34, 34) |
DarkRed | #8B0000 | rgb(139, 0, 0) |
Имя цвета | HEX | RGB |
---|---|---|
Gold | #FFD700 | rgb(255, 215, 0) |
Yellow | #FFFF00 | rgb(255, 255, 0) |
LightYellow | #FFFFE0 | rgb(255, 255, 224) |
LemonChiffon | #FFFACD | rgb(255, 250, 205) |
LightGoldenrodYellow | #FAFAD2 | rgb(250, 250, 210) |
PapayaWhip | #FFEFD5 | rgb(255, 239, 213) |
Moccasin | #FFE4B5 | rgb(255, 228, 181) |
PeachPuff | #FFDAB9 | rgb(255, 218, 185) |
PaleGoldenrod | #EEE8AA | rgb(238, 232, 170) |
Khaki | #F0E68C | rgb(240, 230, 140) |
DarkKhaki | #BDB76B | rgb(189, 183, 107) |
Имя цвета | HEX | RGB |
---|---|---|
Coral | #FF7F50 | rgb(255, 127, 80) |
Tomato | #FF6347 | rgb(255, 99, 71) |
OrangeRed | #FF4500 | rgb(255, 69, 0) |
DarkOrange | #FF8C00 | rgb(255, 140, 0) |
Orange | #FFA500 | rgb(255, 165, 0) |
Имя цвета | HEX | RGB |
---|---|---|
Pink | #FFC0CB | rgb(255, 192, 203) |
LightPink | #FFB6C1 | rgb(255, 182, 193) |
HotPink | #FF69B4 | rgb(255, 105, 180) |
DeepPink | #FF1493 | rgb(255, 20, 147) |
MediumVioletRed | #C71585 | rgb(199, 21, 133) |
PaleVioletRed | #DB7093 | rgb(219, 112, 147) |
Имя цвета | HEX | RGB |
---|---|---|
Lavender | #E6E6FA | rgb(230, 230, 250) |
Thistle | #D8BFD8 | rgb(216, 191, 216) |
Plum | #DDA0DD | rgb(221, 160, 221) |
Violet | #EE82EE | rgb(238, 130, 238) |
Orchid | #DA70D6 | rgb(218, 112, 214) |
Fuchsia(Magenta) | #FF00FF | rgb(255, 0, 255) |
MediumOrchid | #BA55D3 | rgb(186, 85, 211) |
MediumPurple | #9370DB | rgb(147, 112, 219) |
BlueViolet | #8A2BE2 | rgb(138, 43, 226) |
DarkViolet | #9400D3 | rgb(148, 0, 211) |
DarkOrchid | #9932CC | rgb(153, 50, 204) |
DarkMagenta | #8B008B | rgb(139, 0, 139) |
Purple | #800080 | rgb(128, 0, 128) |
Indigo | #4B0082 | rgb(75, 0, 130) |
SlateBlue | #6A5ACD | rgb(106, 90, 205) |
DarkSlateBlue | #483D8B | rgb(72, 61, 139) |
Имя цвета | HEX | RGB |
---|---|---|
#FFF8DC | rgb(255, 248, 220) | |
BlanchedAlmond | #FFEBCD | rgb(255, 235, 205) |
Bisque | #FFE4C4 | rgb(255, 228, 196) |
NavajoWhite | #FFDEAD | rgb(255, 222, 173) |
Wheat | #F5DEB3 | rgb(245, 222, 179) |
BurlyWood | #DEB887 | rgb(222, 184, 135) |
Tan | #D2B48C | rgb(210, 180, 140) |
RosyBrown | #BC8F8F | rgb(188, 143, 143) |
SandyBrown | #F4A460 | rgb(244, 164, 96) |
Goldenrod | #DAA520 | rgb(218, 165, 32) |
DarkGoldenrod | #B8860B | rgb(184, 134, 11) |
Peru | #CD853F | rgb(205, 133, 63) |
Chocolate | #D2691E | rgb(210, 105, 30) |
SaddleBrown | #8B4513 | rgb(139, 69, 19) |
Sienna | #A0522D | rgb(160, 82, 45) |
Brown | #A52A2A | rgb(165, 42, 42) |
Maroon | #800000 | rgb(128, 0, 0) |
Имя цвета | HEX | RGB |
---|---|---|
Aqua(Cyan) | #00FFFF | rgb(0, 255, 255) |
LightCyan | #E0FFFF | rgb(224, 255, 255) |
PaleTurquoise | #AFEEEE | rgb(175, 238, 238) |
Aquamarine | #7FFFD4 | rgb(127, 255, 212) |
Turquoise | #40E0D0 | rgb(64, 224, 208) |
MediumTurquoise | #48D1CC | rgb(72, 209, 204) |
DarkTurquoise | #00CED1 | rgb(0, 206, 209) |
CadetBlue | #5F9EA0 | rgb(95, 158, 160) |
SteelBlue | #4682B4 | rgb(70, 130, 180) |
LightSteelBlue | #B0C4DE | |
PowderBlue | #B0E0E6 | rgb(176, 224, 230) |
LightBlue | #ADD8E6 | rgb(173, 216, 230) |
SkyBlue | #87CEEB | rgb(135, 206, 235) |
LightSkyBlue | #87CEFA | rgb(135, 206, 250) |
DeepSkyBlue | #00BFFF | rgb(0, 191, 255) |
DodgerBlue | #1E90FF | rgb(30, 144, 255) |
CornflowerBlue | #6495ED | rgb(100, 149, 237) |
MediumSlateBlue | #7B68EE | rgb(123, 104, 238) |
RoyalBlue | #4169E1 | rgb(65, 105, 225) |
Blue | #0000FF | rgb(0, 0, 255) |
MediumBlue | #0000CD | rgb(0, 0, 205) |
DarkBlue | #00008B | rgb(0, 0, 139) |
Navy | #000080 | rgb(0, 0, 128) |
MidnightBlue | #191970 | rgb(25, 25, 112) |
Имя цвета | HEX | RGB |
---|---|---|
GreenYellow | #ADFF2F | rgb(173, 255, 47) |
Chartreuse | #7FFF00 | rgb(127, 255, 0) |
LawnGreen | #7CFC00 | rgb(124, 252, 0) |
Lime | #00FF00 | rgb(0, 255, 0) |
LimeGreen | #32CD32 | rgb(50, 205, 50) |
PaleGreen | #98FB98 | rgb(152, 251, 152) |
LightGreen | #90EE90 | rgb(144, 238, 144) |
MediumSpringGreen | #00FA9A | rgb(0, 250, 154) |
SpringGreen | #00FF7F | rgb(0, 255, 127) |
MediumSeaGreen | #3CB371 | rgb(60, 179, 113) |
SeaGreen | #2E8B57 | rgb(46, 139, 87) |
ForestGreen | #228B22 | rgb(34, 139, 34) |
#008000 | rgb(0, 128, 0) | |
DarkGreen | #006400 | rgb(0, 100, 0) |
YellowGreen | #9ACD32 | rgb(154, 205, 50) |
OliveDrab | #6B8E23 | rgb(107, 142, 35) |
Olive | #808000 | rgb(128, 128, 0) |
DarkOliveGreen | #556B2F | rgb(85, 107, 47) |
MediumAquamarine | #66CDAA | rgb(102, 205, 170) |
DarkSeaGreen | #8FBC8F | rgb(143, 188, 143) |
LightSeaGreen | #20B2AA | rgb(32, 178, 170) |
DarkCyan | #008B8B | rgb(0, 139, 139) |
Teal | #008080 | rgb(0, 128, 128) |
Имя цвета | HEX | RGB |
---|---|---|
White | #FFFFFF | rgb(255, 255, 255) |
Snow | #FFFAFA | rgb(255, 250, 250) |
Honeydew | #F0FFF0 | rgb(240, 255, 240) |
MintCream | #F5FFFA | rgb(245, 255, 250) |
Azure | #F0FFFF | rgb(240, 255, 255) |
AliceBlue | #F0F8FF | rgb(240, 248, 255) |
GhostWhite | #F8F8FF | rgb(248, 248, 255) |
WhiteSmoke | #F5F5F5 | rgb(245, 245, 245) |
Seashell | #FFF5EE | rgb(255, 245, 238) |
Beige | #F5F5DC | rgb(245, 245, 220) |
OldLace | #FDF5E6 | rgb(253, 245, 230) |
FloralWhite | #FFFAF0 | rgb(255, 250, 240) |
Ivory | #FFFFF0 | rgb(255, 255, 240) |
AntiqueWhite | #FAEBD7 | rgb(250, 235, 215) |
Linen | #FAF0E6 | rgb(250, 240, 230) |
LavenderBlush | #FFF0F5 | rgb(255, 240, 245) |
MistyRose | #FFE4E1 | rgb(255, 228, 225) |
Имя цвета | HEX | RGB |
---|---|---|
Gainsboro | #DCDCDC | (220, 220, 220) |
LightGray | #D3D3D3 | rgb(211, 211, 211) |
Silver | #C0C0C0 | rgb(192, 192, 192) |
DarkGray | #A9A9A9 | rgb(169, 169, 169) |
Gray | #808080 | rgb(128, 128, 128) |
DimGray | #696969 | rgb(105, 105, 105) |
LightSlateGray | #778899 | rgb(119, 136, 153) |
SlateGray | #708090 | rgb(112, 128, 144) |
DarkSlateGray | #2F4F4F | rgb(47, 79, 79) |
Black | #000000 | rgb(0, 0, 0) |
Цвет | RGB код | HEX код | Название цвета | Название цвета на англ. |
000000000 | #000000 | Черный | Black | |
000000128 | #000080 | Темно-синий | Navy | |
000000139 | #00008b | Темно-голубой | Darkblue | |
000000205 | #0000cd | Умеренно-голубой | Mediumblue | |
000000255 | #0000ff | Синий | Blue | |
000100000 | #006400 | Темно-зеленый | Darkgreen | |
000128000 | #008000 | Зеленый | Green | |
000128128 | #008080 | Чайный | Teal | |
000139139 | #008b8b | Темный циан | Darkcyan | |
000191255 | #00bfff | Темный небесно-синий | Deepskyblue | |
000206209 | #00ced1 | Темно-бирюзовый | Darkturquoise | |
000250154 | #00fa9a | Умеренный синевато-серый | Mediumspringgreen | |
000255000 | #00ff00 | Известковый | Lime | |
000255127 | #00ff7f | Весенний зеленый | Springgreen | |
000255255 | #00ffff | Морской волны | Aqua | |
025025112 | #191970 | Ночной синий | Midnightblue | |
030144255 | #1e90ff | Тускло-васильковый | Dodgerblue | |
032178170 | #20b2aa | Светлой морской волны | Lightseagreen | |
034139034 | #228b22 | Лесной зеленый | Forestgreen | |
046139087 | #2e8b57 | Морской зеленый | Seagreen | |
047079079 | #2f4f4f | Темный синевато-серый | Darkslategray | |
050205050 | #32cd32 | Зеленовато-известковый | Limegreen | |
060179113 | #3cb371 | Умеренной морской волны | Mediumseagreen | |
064224208 | #40e0d0 | Бирюзовый | Turquoise | |
065105225 | #4169e1 | Королевский голубой | Royalblue | |
070130180 | #4682b4 | Голубовато-стальной | Steelblue | |
072061139 | #483d8b | Темный серовато-синий | Darkslateblue | |
072209204 | #48d1cc | Умеренно-бирюзовый | Mediumturquoise | |
075000130 | #4b0082 | Индиго | Indigo | |
085107047 | #556b2f | Темно-оливковый | Darkolivegreen | |
095158160 | #5f9ea0 | Блеклый серо-голубой | Cadetblue | |
100149237 | #6495ed | Васильковый | Cornflowerblue | |
102205170 | #66cdaa | Умеренно-аквамариновый | Mediumaaquamarine | |
105105105 | #696969 | Тускло-серый | Dimgray | |
106090205 | #6a5acd | Серовато-синий | Slateblue | |
107142035 | #6b8e23 | Тускло-коричневый | Olivedrab | |
112128144 | #708090 | Синевато-серый | Slategray | |
119136153 | #778899 | Светлый синевато-серый | Lightslategray | |
123104238 | #7b68ee | Умеренный серовато-синий | Mediumslateblue | |
124252000 | #7cfc00 | Зеленой травы | Lawngreen | |
127255000 | #7fff00 | Фисташковый | Chartreuse | |
127255212 | #7fffd4 | Аквамарин | Aquamarine | |
128000000 | #800000 | Оранжево-розовый | Maroon | |
128000128 | #800080 | Пурпурный | Purple | |
128128000 | #808000 | Оливковый | Olive | |
128128128 | #808080 | Серый | Gray | |
135206235 | #87ceeb | Небесно-голубой | Skyblue | |
135206250 | #87cefa | Светлый небесно-синий | Lightskyblue | |
138043226 | #8a2be2 | Светло-фиолетовый | Blueviolet | |
139000000 | #8b0000 | Темно-красный | Darkred | |
139000139 | #8b008b | Темный фуксин | Darkmagenta | |
139069019 | #8b4513 | Старой кожи | Saddlebrown | |
143188143 | #8fbc8f | Темный морской волны | Darkseagreen | |
147112219 | #9370db | Умеренно-пурпурный | Mediumpurple | |
148000211 | #9400d3 | Темно-фиолетовый | Darkviolet | |
152251152 | #98fb98 | Бледно-зеленый | Palegreen | |
153050204 | #9932cc | Темно-орхидейный | Darkorchid | |
154205050 | #9acd32 | Желто-зеленый | Yellowgreen | |
156238144 | #9cee90 | Светло-зеленый | Lightgreen | |
160082045 | #a0522d | Охра | Sienna | |
165042042 | #a52a2a | Коричневый | Brown | |
169169169 | #a9a9a9 | Темно-серый | Darkgray | |
173216230 | #add8e6 | Светло-голубой | Lightblue | |
173255047 | #adff2f | Желто-зеленый | Greenyellow | |
175238238 | #afeeee | Бледно-бирюзовый | Paleturquise | |
176196222 | #b0c4de | Светло-стальной | Lightsteelblue | |
176224230 | #b0e0e6 | Туманно-голубой | Powderblue | |
178034034 | #b22222 | Огнеупорного кирпича | Firebrick | |
184134011 | #b8860b | Темный красно-золотой | Darkgoldenrod | |
186085211 | #ba55d3 | Умеренно-орхидейный | Mediumorchid | |
188143143 | #bc8f8f | Розово-коричневый | Rosybrown | |
189183107 | #bdb76b | Темный хаки | Darkkhaki | |
192192192 | #c0c0c0 | Серебристый | Silver | |
199021133 | #c71585 | Умеренный красно-фиолетовый | Mediumvioletred | |
205092092 | #cd5c5c | Ярко-красный | Indianred | |
205133063 | #cd853f | Коричневый | Peru | |
210105030 | #d2691e | Шоколадный | Chocolate | |
210180140 | #d2b48c | Желтовато-коричневый | Tan | |
211211211 | #d3d3d3 | Светло-серый | Lightgray | |
216191216 | #d8bfd8 | Чертополоха | Thistle | |
218112214 | #da70d6 | Орхидейный | Orchid | |
218165032 | #daa520 | Красного золота | Goldenrod | |
219112147 | #db7093 | Бледный красно-фиолетовый | Plaevioletred | |
220020060 | #dc143c | Малиновый | Crimson | |
220220220 | #dcdcdc | Светлый серо-фиолетовый | Fainsboro | |
221160221 | #dda0dd | Сливовый | Plum | |
222184135 | #deb887 | Старого дерева | Burlywood | |
224255255 | #e0ffff | Светлый циан | Lightcyan | |
230230250 | #e6e6fa | Бледно-лиловый | Lavender | |
233150122 | #e9967a | Темный оранжево-розовый | Darksalmon | |
238130238 | #ee82ee | Фиолетовый | Violet | |
238232170 | #eee8aa | Бледно-золотой | Palegoldenrod | |
240128128 | #f08080 | Светло-коралловый | Lightcoral | |
240230140 | #f0e68c | Хаки | Khaki | |
240248255 | #f0f8ff | Блекло-голубой | Aliceblue | |
240255240 | #f0fff0 | Свежего меда | Honeydew | |
240255255 | #f0ffff | Лазурь | Azure | |
244164096 | #f4a460 | Рыже-коричневый | Sandybrown | |
245222179 | #f5deb3 | Пшеничный | Wheat | |
245245220 | #f5f5dc | Бежевый | Beige | |
245245245 | #f5f5f5 | Белый дымчатый | Whitesmoke | |
245255250 | #f5fffa | Мятно-кремовый | Mintcream | |
248248255 | #f8f8ff | Туманно-белый | Ghostwhite | |
250128114 | #fa8072 | Оранжево-розовый | Salmon | |
250235215 | #faebd7 | Античный белый | Antuquewhite | |
250240230 | #faf0e6 | Льняной | Linen | |
253245230 | #fdf5e6 | Старого коньяка | Oldlace | |
255000255 | #ff00ff | Фуксия | Fuchsia | |
255020147 | #ff1493 | Темно-розовый | Deeppink | |
255069000 | #ff4500 | Красно-оранжевый | Orangered | |
255099071 | #ff6347 | Томатный | Tomato | |
255105180 | #ff69b4 | Ярко-розовый | Hotpink | |
255127080 | #ff7f50 | Коралловый | Coral | |
255140000 | #ff8c00 | Темно-оранжевый | Darkorange | |
255160122 | #ffa07a | Светлый оранжево-розовый | Lightsalmon | |
255165000 | #ffa500 | Оранжевый | Orange | |
255182193 | #ffb6c1 | Светло-розовый | Lightpink | |
255192203 | #ffc0cb | Розовый | Pink | |
255215000 | #ffd700 | Золотой | Gold | |
255218185 | #ffdab9 | Персиковый | Peachpuff | |
255222173 | #ffdead | Грязно-серый | Navajowhite | |
255228181 | #ffe4b5 | Болотный | Moccasin | |
255228196 | #ffe4c4 | Бисквитный | Bisque | |
255228225 | #ffe4e1 | Туманно-розовый | Mistyrose | |
255235205 | #ffebcd | Светло-кремовый | Blanchedalmond | |
255239213 | #ffefd5 | Дыни | Papayaawhip | |
255240245 | #fff0f5 | Бледный розово-лиловый | Lavenderblush | |
255245238 | #fff5ee | Морской пены | Seashell | |
255248220 | #fff8dc | Бледно-желтый | Cornsilk | |
255250205 | #fffacd | Лимонный | Lemonchiffon | |
255250240 | #fffaf0 | Цветочно-белый | Floralwhite | |
255250250 | #fffafa | Снежный | Snow | |
255255000 | #ffff00 | Желтый | Yellow | |
255255224 | #ffffe0 | Светло-желтый | Lightyellow | |
255255240 | #fffff0 | Слоновой кости | Ivory | |
255255255 | #ffffff | Белый | White |
HTML цвета. Имена цветов HTML, CSS, SVG.
Одной из составляющих представления веб-страниц в интернете является цвет, современные браузеры принимают и воспроизводят его, используя цветовые модели RGB, HSL, или же ключевые слова (названия).
Значения цвета в HTML может быть задано одним из следующих способов.
- RGB:
в шестнадцатеричном коде (hex):#008800
или его сокращенном написании:#080
.
в процентах:rgb(80%, 20%, 30%)
,
числами от 0 до 255:rgb(240, 120, 10)
. - По имени:
Teal
илиteal
(регистр значения не имеет). - HSL:
в процентах:hsl(195, 60%, 40%)
.
Имя | R G B | H S L | |
---|---|---|---|
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
fuchsia | #ff00ff | 255, 0, 255 | 300°, 100%, 50% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
lime | #00ff00 | 0, 100, 0 | 120°, 100%, 50% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
Согласно последним рекомендациям W3C, применение элементов и атрибутов HTML для указания цвета (к примеру: style="color: #0000ff;"
) устарело, и в качестве альтернативы предложено использовать каскадные таблицы стилей — CSS.
Имена цветов CSS, SVG.
В отличие от Html, в котором стандартными являются 16 цветов, спецификации CSS и SVG, определяют более расширенный список имен, состоящий из 147 названий. Однако, несмотря на наличие в списке сто сорока семи наименований, оригинальные значения имеют только 138, так как все серые цвета могут быть указаны как через «a», так и через «e» (grAy или grEy), а fuchsia и aqua имеют альтернативные имена: magenta и cyan соответственно (последние не поддерживаются HTML 4.01).
Приведенная ниже таблица представляет имена цветов и их значения в HSL и HEX. При использовании имен, следует помнить, что синтаксис SVG отличается от HTML и CSS: атрибут fill, к примеру, применяется как к цвету текста (color), так и объекта (background-color), а stroke используются для задания контура (обводки) элемента.
Имя | R G B | H S L |
---|---|---|
white | #ffffffhex | 0°, 0%, 100% |
ivory | #fffff0hex | 60°, 100%, 97% |
lightyellow | #ffffe0hex | 60°, 100%, 94% |
yellow | #ffff00hex | 60°, 100%, 50% |
snow | #fffafahex | 0°, 100%, 99% |
floralwhite | #fffaf0hex | 40°, 100%, 97% |
lemonchiffon | #fffacdhex | 54°, 100%, 90% |
cornsilk | #fff8dchex | 48°, 100%, 93% |
seashell | #fff5eehex | 25°, 100%, 97% |
lavenderblush | #fff0f5hex | 340°, 100%, 97% |
papayawhip | #ffefd5hex | 37°, 100%, 92% |
blanchedalmond | #ffebcdhex | 36°, 100%, 90% |
mistyrose | #ffe4e1hex | 6°, 100%, 94% |
bisque | #ffe4c4hex | 33°, 100%, 88% |
moccasin | #ffe4b5hex | 38°, 100%, 86% |
navajowhite | #ffdeadhex | 36°, 100%, 84% |
peachpuff | #ffdab9hex | 28°, 27%, 100% |
gold | #ffd700hex | 51°, 100%, 50% |
pink | #ffc0cbhex | 350°, 100%, 88% |
lightpink | #ffb6c1hex | 351°, 100%, 86% |
orange | #ffa500hex | 39°, 100%, 50% |
lightsalmon | #ffa07ahex | 17°, 100%, 74% |
darkorange | #ff8c00hex | 33°, 100%, 50% |
coral | #ff7f50hex | 16°, 100%, 66% |
hotpink | #ff69b4hex | 330°, 100%, 71% |
tomato | #ff6347hex | 9°, 100%, 64% |
orangered | #ff4500hex | 16°, 100%, 50% |
deeppink | #ff1493hex | 328°, 100%, 54% |
magenta, fuchsia | #ff00ffhex | 300°, 100%, 50% |
red | #ff0000hex | 0°, 100%, 50% |
oldlace | #fdf5e6hex | 39°, 85%, 95% |
lightgoldenrodyellow | #fafad2hex | 60°, 80%, 90% |
linen | #faf0e6hex | 30°, 67%, 94% |
antiquewhite | #faebd7hex | 34°, 78%, 91% |
salmon | #fa8072hex | 6°, 93%, 71% |
ghostwhite | #f8f8ffhex | 240°, 100%, 99% |
mintcream | #f5fffahex | 150°, 100%, 98% |
whitesmoke | #f5f5f5hex | 0°, 0%, 96% |
beige | #f5f5dchex | 60°, 56%, 91% |
wheat | #f5deb3hex | 39°, 77%, 83% |
sandybrown | #f4a460hex | 28°, 87%, 67% |
azure | #f0ffffhex | 180°, 100%, 97% |
honeydew | #f0fff0hex | 120°, 100%, 97% |
aliceblue | #f0f8ffhex | 208°, 100%, 97% |
khaki | #f0e68chex | 54°, 77%, 75% |
lightcoral | #f08080hex | 0°, 79%, 72% |
palegoldenrod | #eee8aahex | 55°, 67%, 80% |
violet | #ee82eehex | 300°, 76%, 72% |
darksalmon | #e9967ahex | 15°, 72%, 70% |
lavender | #e6e6fahex | 240°, 67%, 94% |
lightcyan | #e0ffffhex | 180°, 100%, 94% |
burlywood | #deb887hex | 34°, 57%, 70% |
plum | #dda0ddhex | 300°, 47%, 75% |
gainsboro | #dcdcdchex | 0°, 0%, 86% |
crimson | #dc143chex | 348°, 83%, 47% |
palevioletred | #db7093hex | 340°, 60%, 65% |
goldenrod | #daa520hex | 43°, 74%, 49% |
orchid | #da70d6hex | 302°, 59%, 65% |
thistle | #d8bfd8hex | 300°, 24%, 80% |
lightgray, lightgrey | #d3d3d3hex | 0°, 0%, 83% |
tan | #d2b48chex | 34°, 44%, 67% |
chocolate | #d2691ehex | 25°, 75%, 47% |
peru | #cd853fhex | 30°, 59%, 53% |
indianred | #cd5c5chex | 0°, 53%, 58% |
mediumvioletred | #c71585hex | 322°, 81%, 43% |
silver | #c0c0c0hex | 0°, 0%, 75% |
darkkhaki | #bdb76bhex | 56°, 38%, 58% |
rosybrown | #bc8f8fhex | 0°, 25%, 65% |
mediumorchid | #ba55d3hex | 288°, 59%, 58% |
darkgoldenrod | #b8860bhex | 43°, 89%, 38% |
firebrick | #b22222hex | 0°, 68%, 42% |
powderblue | #b0e0e6hex | 187°, 52%, 80% |
lightsteelblue | #b0c4dehex | 214°, 41%, 78% |
paleturquoise | #afeeeehex | 180°, 65%, 81% |
greenyellow | #adff2fhex | 84°, 100%, 59% |
lightblue | #add8e6hex | 195°, 53%, 79% |
darkgray, darkgrey | #a9a9a9hex | 0°, 0%, 66% |
brown | #a52a2ahex | 0°, 59%, 41% |
sienna | #a0522dhex | 19°, 56%, 40% |
yellowgreen | #9acd32hex | 80°, 61%, 50% |
darkorchid | #9932cchex | 280°, 61%, 50% |
palegreen | #98fb98hex | 120°, 93%, 79% |
darkviolet | #9400d3hex | 282°, 100%, 41% |
mediumpurple | #9370dbhex | 260°, 60%, 65% |
lightgreen | #90ee90hex | 120°, 73%, 75% |
darkseagreen | #8fbc8fhex | 120°, 25%, 65% |
saddlebrown | #8b4513hex | 25°, 76%, 31% |
darkmagenta | #8b008bhex | 300°, 100%, 27% |
darkred | #8b0000hex | 0°, 100%, 27% |
blueviolet | #8a2be2hex | 271°, 76%, 53% |
lightskyblue | #87cefahex | 203°, 92%, 76% |
skyblue | #87ceebhex | 197°, 71%, 73% |
gray, grey | #808080hex | 0°, 0%, 50% |
olive | #808000hex | 60°, 100%, 25% |
purple | #800080hex | 300°, 100%, 25% |
maroon | #800000hex | 0°, 100%, 25% |
aquamarine | #7fffd4hex | 160°, 100%, 75% |
chartreuse | #7fff00hex | 90°, 100%, 50% |
lawngreen | #7cfc00hex | 91°, 100%, 4% |
mediumslateblue | #7b68eehex | 249°, 80%, 67% |
lightslategray, lightslategrey | #778899hex | 210°, 14%, 53% |
slategray или slategrey | #708090hex | 210°, 13%, 50% |
olivedrab | #6b8e23hex | 80°, 61%, 35% |
slateblue | #6a5acdhex | 248°, 54%, 58% |
dimgray, dimgrey | #696969hex | 0°, 0%, 41% |
mediumaquamarine | #66cdaahex | 160°, 51%, 60% |
rebeccapurple | #663399hex | 270°, 50%, 40% |
cornflowerblue | #6495edhex | 219°, 79%, 66% |
cadetblue | #5f9ea0hex | 182°, 26%, 50% |
darkolivegreen | #556b2fhex | 82°, 39%, 30% |
indigo | #4b0082hex | 275°, 100%, 26% |
mediumturquoise | #48d1cchex | 178°, 60%, 55% |
darkslateblue | #483d8bhex | 249°, 39%, 39% |
steelblue | #4682b4hex | 207°, 44%, 49% |
royalblue | #4169e1hex | 225°, 73%, 57% |
turquoise | #40e0d0hex | 174°, 72%, 57% |
mediumseagreen | #3cb371hex | 147°, 50%, 47% |
limegreen | #32cd32hex | 120°, 61%, 50% |
darkslategray, darkslategrey | #2f4f4fhex | 180°, 25%, 25% |
seagreen | #2e8b57hex | 147°, 50%, 36% |
forestgreen | #228b22hex | 120°, 61%, 34% |
lightseagreen | #20b2aahex | 177°, 70%, 41% |
dodgerblue | #1e90ffhex | 210°, 100%, 56% |
midnightblue | #191970hex | 240°, 64%, 27% |
aqua, cyan | #00ffffhex | 180°, 100%, 50% |
springgreen | #00ff7fhex | 150°, 100%, 50% |
lime | #00ff00hex | 120°, 100%, 50% |
mediumspringgreen | #00fa9ahex | 157°, 100%, 49% |
darkturquoise | #00ced1hex | 181°, 100%, 41% |
deepskyblue | #00bfffhex | 195°, 100%, 50% |
darkcyan | #008b8bhex | 180°, 100%, 27% |
teal | #008080hex | 180°, 100%, 25% |
green | #008000hex | 120°, 100%, 25% |
darkgreen | #006400hex | 120°, 100%, 20% |
blue | #0000ffhex | 240°, 100%, 50% |
mediumblue | #0000cdhex | 240°, 100%, 40% |
darkblue | #00008bhex | 240°, 100%, 27% |
navy | #000080hex | 240°, 100%, 25% |
black | #000000hex | 0°, 0%, 0% |
Для получения информации о других цветах и значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.
Цвета HTML
Цветовые модели
Таблица цветов HTML: онлайн коды в HEX, RGB, RGBA, CMYK
Цвета на веб-странице задаются тремя способами:
- шестнадцатиричным кодом;
- десятиричным кодом;
- кодом, который носит название цвета.
Чаще всего используют способ шестнадцатиричного исчисления, несмотря на то, что более традиционна десятиричная система.
Шестнадцатиричный код цветов
Шестнадцатиричная система задания цветов в HTML основана, как следует из ее названия, на цифре 16. Цифры, входящие в систему, составляют от 0 до 9 и латинскими буквами обозначены числа от 10 до 15. Соответствия между числами в десятиричной и шестнадцатиричной системах приведены в справочных таблицах.
Числа больше 15 обозначаются соединением двух чисел. Например, по такой таблице можно определить соответствие числа в десятиричной системе числу в шестнадцатиричной. Так, числу 255 соответствует число FF. Для удобства определения системы в шестнадцатиричной перед числом ставится символ «решетка» #, пример #666999.
Все цвета (красный, зеленый и синий) могут принимать число вариантов от 00 до FF, что в сумме составляет 256 оттенков. А всего в модели RGB число комбинаций может быть 256 × 256 × 256 = 16.777.216
Веб-цвета
Если передача монитора установлена в 8 бит (256 цветов), то разные браузеры один и тот же цвет будут показывать по-разному. Это объясняется индивидуальной цветовой палитрой браузера, когда он не может показать цвет, которого в его палитре нет. Отсутствующий цвет заменяется сочетанием близких к нему, которые браузеры его имитируют. Для неизменности цвета во всех браузерах были введены так называемые веб-цвета, в которых каждая составляющая (красная, зеленая и синяя) имела одно из шести значений 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Общее число сочетаний цветов 6х6х6= 216 цветов.
Общая черта всех веб-цветов в том, что во всех браузерах они показаны одинаково. Сегодня, когда качество мониторов резко выросло, актуальность веб-цветов не так велика, как раньше.
Названия цветов
- Если цвета широко используются, то вместо цифр можно пользоваться именами. Приведем основные способы представления цветов.
- В виде #123ABC, где первые две цифры — красный; в середине две — зеленый;последние две — синий.
- Представление цвета кратко в виде #ABC будет прочитано как #AABBCC.
- Показ цвета ключевыми словами — green, black. Чтобы указанное ключевым слово понималось браузером, нужно, чтобы количество их было ограничено и соответствовало только небольшому набору основных цветов, общему для всех браузеров.
- Вид RGB (*,*,*), где «*» – числа в диапазоне 0-255, которые соответствуют цветам красный, зелёный, синий
- Вид RGBA, (*,*,*,*), здесь первые 3 «*» — составляющие цвета в диапазоне 0-255, последняя «*» — степень непрозрачности или альфа-канал, который задается дробями в интервале 0 — 1.
Справочно: спецсимволы HTMLТаблица цветов HTML . Таблица цветов CSS. HTML safe Color Codes. «Безопасные» цвета HTML. Палитра цветов HTML.Сперва брузеры не поддерживали никаких цветов, кроме 256 «безопсных»:
Безопасные цвета HTML (safe web RGB Red-красный, Green-зеленый, и Blue-синий) цвета — это комбинация из шестнадцатеричных чисел:
Число комбинаций из 6 по 3: 63 = 216 «безопасных» цветов |
HTML — Цвета — CoderLessons.com
Цвета очень важны, чтобы придать вашему сайту хороший внешний вид. Вы можете указать цвета на уровне страницы, используя тег <body>, или вы можете установить цвета для отдельных тегов, используя атрибут bgcolor .
Тег <body> имеет следующие атрибуты, которые можно использовать для установки разных цветов:
bgcolor — устанавливает цвет фона страницы.
текст — устанавливает цвет для основного текста.
alink — устанавливает цвет для активных или выбранных ссылок.
ссылка — устанавливает цвет для связанного текста.
vlink — устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.
bgcolor — устанавливает цвет фона страницы.
текст — устанавливает цвет для основного текста.
alink — устанавливает цвет для активных или выбранных ссылок.
ссылка — устанавливает цвет для связанного текста.
vlink — устанавливает цвет для посещенных ссылок, то есть для связанного текста, по которому вы уже щелкнули.
Методы цветового кодирования HTML
Существует три способа настройки цвета на вашей веб-странице:
Названия цветов — Вы можете указать названия цветов, например, зеленый, синий или красный.
Шестнадцатеричные коды — шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.
Цветные десятичные или процентные значения — это значение указывается с помощью свойства rgb ().
Названия цветов — Вы можете указать названия цветов, например, зеленый, синий или красный.
Шестнадцатеричные коды — шестизначный код, обозначающий количество красного, зеленого и синего цветов, составляющих цвет.
Цветные десятичные или процентные значения — это значение указывается с помощью свойства rgb ().
Теперь мы увидим эти раскраски одну за другой.
HTML Colors — Названия цветов
Вы можете указать прямое имя цвета, чтобы установить цвет текста или фона. W3C перечислил 16 основных имен цветов, которые будут проверяться с помощью валидатора HTML, но есть более 200 различных имен цветов, поддерживаемых основными браузерами.
Примечание. Проверьте полный список имен цветов HTML.
Стандарт W3C 16 цветов
Вот список имен W3C Standard 16 Colours, и их рекомендуется использовать.
черный | Серый | Серебряный | белый | ||||
желтый | Лайм | вода | фуксия | ||||
красный | зеленый | синий | Пурпурный | ||||
каштановый | оливковый | флот | чирок |
пример
Вот примеры для установки фона тега HTML по имени цвета —
Live Demo
<!DOCTYPE html> <html> <head> <title>HTML Colors by Name</title> </head> <body text = "blue" bgcolor = "green"> <p>Use different color names for for body and table and see the result.</p> <table bgcolor = "black"> <tr> <td> <font color = "white">This text will appear white on black background.</font> </td> </tr> </table> </body> </html>
HTML-цвета — шестнадцатеричные коды
Шестнадцатеричное — это 6-значное представление цвета. Первые две цифры (RR) представляют значение красного цвета, следующие две — значение зеленого цвета (GG), а последние — значение синего (BB).
Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Paintshop Pro или MS Paint.
Каждому шестнадцатеричному коду будет предшествовать знак фунта или хеша #. Ниже приведен список нескольких цветов с использованием шестнадцатеричной записи.
цвет | Цвет HEX |
---|---|
# 000000 | |
# FF0000 | |
# 00FF00 | |
# 0000FF | |
# FFFF00 | |
# 00FFFF | |
# FF00FF | |
# C0C0C0 | |
#FFFFFF |
пример
Вот примеры для установки фона тега HTML по цветному коду в шестнадцатеричном формате —
Live Demo
<!DOCTYPE html> <html> <head> <title>HTML Colors by Hex</title> </head> <body text = "#0000FF" bgcolor = "#00FF00"> <p>Use different color hexa for for body and table and see the result.</p> <table bgcolor = "#000000"> <tr> <td> <font color = "#FFFFFF">This text will appear white on black background.</font> </td> </tr> </table> </body> </html>
HTML-цвета — значения RGB
Это значение цвета указывается с помощью свойства rgb () . Это свойство принимает три значения, по одному для красного, зеленого и синего. Значение может быть целым числом от 0 до 255 или в процентах.
Примечание. Все браузеры не поддерживают свойство цвета rgb (), поэтому рекомендуется его не использовать.
Примечание. Все браузеры не поддерживают свойство цвета rgb (), поэтому рекомендуется его не использовать.
Ниже приведен список, показывающий несколько цветов с использованием значений RGB.
цвет | Цвет RGB |
---|---|
RGB (0,0,0) | |
RGB (255,0,0) | |
RGB (0,255,0) | |
RGB (0,0,255) | |
RGB (255,255,0) | |
RGB (0255255) | |
RGB (255,0,255) | |
RGB (192192192) | |
RGB (255,255,255) |
пример
Вот примеры для установки фона тега HTML с помощью цветового кода с использованием значений rgb () —
Live Demo
<!DOCTYPE html> <html> <head> <title>HTML Colors by RGB code</title> </head> <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)"> <p>Use different color code for for body and table and see the result.</p> <table bgcolor = "rgb(0,0,0)"> <tr> <td> <font color = "rgb(255,255,255)">This text will appear white on black background.</font> </td> </tr> </table> </body> </html>
Браузер Безопасные Цвета
Вот список из 216 цветов, которые должны быть самыми безопасными и независимыми от компьютера. Эти цвета очень от гекса кода 000000 до FFFFFF, и они будут поддерживаться всеми компьютерами, имеющими 256 цветовую палитру.
HTML таблица цвета
Таблица цветов html, она будет полезна веб-разработчикам, дизайнеру сайта, оформителям и сайтостроителю, как инструмент подсказка, чтобы постоянно не смотреть в редактор и не выбирать значение кода. Такое часто приходится, если вам надо подобрать какой-нибудь цвет, тон или гамму, чтобы ресурс смотрелся, сделать его красивым, интересным и удобен пользователям. Задать значение можно несколькими способами, именно html таблица цветов показаны (варианты, отсортированы в порядке популярности их использования):Коды и названия цветов html (CSS и RGB)
По названию | цвет | rgb — код цвета | код цвета html |
snow |
|
255 250 250 | #fffafa |
ghostwhite |
|
248 248 255 | #f8f8ff |
whitesmoke |
|
245 245 245 | #f5f5f5 |
gainsboro |
|
220 220 220 | #dcdcdc |
floralwhite |
|
255 250 240 | #fffaf0 |
oldlace |
|
253 245 230 | #fdf5e6 |
linen |
|
250 240 230 | #faf0e6 |
antiquewhite |
|
250 235 215 | #faebd7 |
papayawhip |
|
255 239 213 | #ffefd5 |
blanchedalmond |
|
255 235 205 | #ffebcd |
bisque |
|
255 228 196 | #ffe4c4 |
peachpuff |
|
255 218 185 | #ffdab9 |
navajowhite |
|
255 222 173 | #ffdead |
moccasin |
|
255 228 181 | #ffe4b5 |
cornsilk |
|
255 248 220 | #fff8dc |
ivory |
|
255 255 240 | #fffff0 |
lemonchiffon |
|
255 250 205 | #fffacd |
seashell |
|
255 245 238 | #fff5ee |
honeydew |
|
240 255 240 | #f0fff0 |
mintcream |
|
245 255 250 | #f5fffa |
azure |
|
240 255 255 | #f0ffff |
aliceblue |
|
240 248 255 | #f0f8ff |
lavender |
|
230 230 250 | #e6e6fa |
lavenderblush |
|
255 240 245 | #fff0f5 |
mistyrose |
|
255 228 225 | #ffe4e1 |
white |
|
255 255 255 | #ffffff |
black |
|
0 0 0 | #000000 |
darkslategray |
|
47 79 79 | #2f4f4f |
dimgrey |
|
105 105 105 | #696969 |
slategrey |
|
112 128 144 | #708090 |
lightslategray |
|
119 136 153 | #778899 |
grey |
|
190 190 190 | #bebebe |
lightgray |
|
211 211 211 | #d3d3d3 |
midnightblue |
|
25 25 112 | #191970 |
navyblue |
|
0 0 128 | #000080 |
cornflowerblue |
|
100 149 237 | #6495ed |
darkslateblue |
|
72 61 139 | #483d8b |
slateblue |
|
106 90 205 | #6a5acd |
mediumslateblue |
|
123 104 238 | #7b68ee |
lightslateblue |
|
132 112 255 | #8470ff |
mediumblue |
|
0 0 205 | #0000cd |
royalblue |
|
65 105 225 | #4169e1 |
blue |
|
0 0 255 | #0000ff |
dodgerblue |
|
30 144 255 | #1e90ff |
deepskyblue |
|
0 191 255 | #00bfff |
skyblue |
|
135 206 235 | #87ceeb |
lightskyblue |
|
135 206 250 | #87cefa |
steelblue |
|
70 130 180 | #4682b4 |
lightsteelblue |
|
176 196 222 | #b0c4de |
lightblue |
|
173 216 230 | #add8e6 |
powderblue |
|
176 224 230 | #b0e0e6 |
paleturquoise |
|
175 238 238 | #afeeee |
darkturquoise |
|
0 206 209 | #00ced1 |
mediumturquoise |
|
72 209 204 | #48d1cc |
turquoise |
|
64 224 208 | #40e0d0 |
cyan |
|
0 255 255 | #00ffff |
lightcyan |
|
224 255 255 | #e0ffff |
cadetblue |
|
95 158 160 | #5f9ea0 |
mediumaquamarine |
|
102 205 170 | #66cdaa |
aquamarine |
|
127 255 212 | #7fffd4 |
darkgreen |
|
0 100 0 | #006400 |
darkolivegreen |
|
85 107 47 | #556b2f |
darkseagreen |
|
143 188 143 | #8fbc8f |
seagreen |
|
46 139 87 | #2e8b57 |
mediumseagreen |
|
60 179 113 | #3cb371 |
lightseagreen |
|
32 178 170 | #20b2aa |
palegreen |
|
152 251 152 | #98fb98 |
springgreen |
|
0 255 127 | #00ff7f |
lawngreen |
|
124 252 0 | #7cfc00 |
green |
|
0 255 0 | #00ff00 |
chartreuse |
|
127 255 0 | #7fff00 |
medspringgreen |
|
0 250 154 | #00fa9a |
greenyellow |
|
173 255 47 | #adff2f |
limegreen |
|
50 205 50 | #32cd32 |
yellowgreen |
|
154 205 50 | #9acd32 |
forestgreen |
|
34 139 34 | #228b22 |
olivedrab |
|
107 142 35 | #6b8e23 |
darkkhaki |
|
189 183 107 | #bdb76b |
palegoldenrod |
|
238 232 170 | #eee8aa |
ltgoldenrodyello |
|
250 250 210 | #fafad2 |
lightyellow |
|
255 255 224 | #ffffe0 |
yellow |
|
255 255 0 | #ffff00 |
gold |
|
255 215 0 | #ffd700 |
lightgoldenrod |
|
238 221 130 | #eedd82 |
goldenrod |
|
218 165 32 | #daa520 |
darkgoldenrod |
|
184 134 11 | #b8860b |
rosybrown |
|
188 143 143 | #bc8f8f |
indianred |
|
205 92 92 | #cd5c5c |
saddlebrown |
|
139 69 19 | #8b4513 |
sienna |
|
160 82 45 | #a0522d |
peru |
|
205 133 63 | #cd853f |
burlywood |
|
222 184 135 | #deb887 |
beige |
|
245 245 220 | #f5f5dc |
wheat |
|
245 222 179 | #f5deb3 |
sandybrown |
|
244 164 96 | #f4a460 |
tan |
|
210 180 140 | #d2b48c |
chocolate |
|
210 105 30 | #d2691e |
firebrick |
|
178 34 34 | #b22222 |
brown |
|
165 42 42 | #a52a2a |
darksalmon |
|
233 150 122 | #e9967a |
salmon |
|
250 128 114 | #fa8072 |
lightsalmon |
|
255 160 122 | #ffa07a |
orange |
|
255 165 0 | #ffa500 |
darkorange |
|
255 140 0 | #ff8c00 |
coral |
|
255 127 80 | #ff7f50 |
lightcoral |
|
240 128 128 | #f08080 |
tomato |
|
255 99 71 | #ff6347 |
orangered |
|
255 69 0 | #ff4500 |
red |
|
255 0 0 | #ff0000 |
hotpink |
|
255 105 180 | #ff69b4 |
deeppink |
|
255 20 147 | #ff1493 |
pink |
|
255 192 203 | #ffc0cb |
lightpink |
|
255 182 193 | #ffb6c1 |
palevioletred |
|
219 112 147 | #db7093 |
maroon |
|
176 48 96 | #b03060 |
mediumvioletred |
|
199 21 133 | #c71585 |
violetred |
|
208 32 144 | #d02090 |
magenta |
|
255 0 255 | #ff00ff |
violet |
|
238 130 238 | #ee82ee |
plum |
|
221 160 221 | #dda0dd |
orchid |
|
218 112 214 | #da70d6 |
mediumorchid |
|
186 85 211 | #ba55d3 |
darkorchid |
|
153 50 204 | #9932cc |
darkviolet |
|
148 0 211 | #9400d3 |
blueviolet |
|
138 43 226 | #8a2be2 |
purple |
|
160 32 240 | #a020f0 |
mediumpurple |
|
147 112 219 | #9370db |
thistle |
|
216 191 216 | #d8bfd8 |
snow1 |
|
255 250 250 | #fffafa |
snow2 |
|
238 233 233 | #eee9e9 |
snow3 |
|
205 201 201 | #cdc9c9 |
snow4 |
|
139 137 137 | #8b8989 |
seashell1 |
|
255 245 238 | #fff5ee |
seashell2 |
|
238 229 222 | #eee5de |
seashell3 |
|
205 197 191 | #cdc5bf |
seashell4 |
|
139 134 130 | #8b8682 |
antiquewhite1 |
|
255 239 219 | #ffefdb |
antiquewhite2 |
|
238 223 204 | #eedfcc |
antiquewhite3 |
|
205 192 176 | #cdc0b0 |
antiquewhite4 |
|
139 131 120 | #8b8378 |
bisque1 |
|
255 228 196 | #ffe4c4 |
bisque2 |
|
238 213 183 | #eed5b7 |
bisque3 |
|
205 183 158 | #cdb79e |
bisque4 |
|
139 125 107 | #8b7d6b |
peachpuff1 |
|
255 218 185 | #ffdab9 |
peachpuff2 |
|
238 203 173 | #eecbad |
peachpuff3 |
|
205 175 149 | #cdaf95 |
peachpuff4 |
|
139 119 101 | #8b7765 |
navajowhite1 |
|
255 222 173 | #ffdead |
navajowhite2 |
|
238 207 161 | #eecfa1 |
navajowhite3 |
|
205 179 139 | #cdb38b |
navajowhite4 |
|
139 121 94 | #8b795e |
lemonchiffon1 |
|
255 250 205 | #fffacd |
lemonchiffon2 |
|
238 233 191 | #eee9bf |
lemonchiffon3 |
|
205 201 165 | #cdc9a5 |
lemonchiffon4 |
|
139 137 112 | #8b8970 |
cornsilk1 |
|
255 248 220 | #fff8dc |
cornsilk2 |
|
238 232 205 | #eee8cd |
cornsilk3 |
|
205 200 177 | #cdc8b1 |
cornsilk4 |
|
139 136 120 | #8b8878 |
ivory1 |
|
255 255 240 | #fffff0 |
ivory2 |
|
238 238 224 | #eeeee0 |
ivory3 |
|
205 205 193 | #cdcdc1 |
ivory4 |
|
139 139 131 | #8b8b83 |
honeydew1 |
|
240 255 240 | #f0fff0 |
honeydew2 |
|
224 238 224 | #e0eee0 |
honeydew3 |
|
193 205 193 | #c1cdc1 |
honeydew4 |
|
131 139 131 | #838b83 |
lavenderblush2 |
|
255 240 245 | #fff0f5 |
lavenderblush3 |
|
238 224 229 | #eee0e5 |
lavenderblush4 |
|
205 193 197 | #cdc1c5 |
lavenderblush5 |
|
139 131 134 | #8b8386 |
mistyrose1 |
|
255 228 225 | #ffe4e1 |
mistyrose2 |
|
238 213 210 | #eed5d2 |
mistyrose3 |
|
205 183 181 | #cdb7b5 |
mistyrose4 |
|
139 125 123 | #8b7d7b |
azure1 |
|
240 255 255 | #f0ffff |
azure2 |
|
224 238 238 | #e0eeee |
azure3 |
|
193 205 205 | #c1cdcd |
azure4 |
|
131 139 139 | #838b8b |
slateblue1 |
|
131 111 255 | #836fff |
slateblue2 |
|
122 103 238 | #7a67ee |
slateblue3 |
|
105 89 205 | #6959cd |
slateblue4 |
|
71 60 139 | #473c8b |
royalblue1 |
|
72 118 255 | #4876ff |
royalblue2 |
|
67 110 238 | #436eee |
royalblue3 |
|
58 95 205 | #3a5fcd |
royalblue4 |
|
39 64 139 | #27408b |
blue1 |
|
0 0 255 | #0000ff |
blue2 |
|
0 0 238 | #0000ee |
blue3 |
|
0 0 205 | #0000cd |
blue4 |
|
0 0 139 | #00008b |
dodgerblue1 |
|
30 144 255 | #1e90ff |
dodgerblue2 |
|
28 134 238 | #1c86ee |
dodgerblue3 |
|
24 116 205 | #1874cd |
dodgerblue4 |
|
16 78 139 | #104e8b |
steelblue1 |
|
99 184 255 | #63b8ff |
steelblue2 |
|
92 172 238 | #5cacee |
steelblue3 |
|
79 148 205 | #4f94cd |
steelblue4 |
|
54 100 139 | #36648b |
deepskyblue1 |
|
0 191 255 | #00bfff |
deepskyblue2 |
|
0 178 238 | #00b2ee |
deepskyblue3 |
|
0 154 205 | #009acd |
deepskyblue4 |
|
0 104 139 | #00688b |
skyblue1 |
|
135 206 255 | #87ceff |
skyblue2 |
|
126 192 238 | #7ec0ee |
skyblue3 |
|
108 166 205 | #6ca6cd |
skyblue4 |
|
74 112 139 | #4a708b |
lightskyblue1 |
|
176 226 255 | #b0e2ff |
lightskyblue2 |
|
164 211 238 | #a4d3ee |
lightskyblue3 |
|
141 182 205 | #8db6cd |
lightskyblue4 |
|
96 123 139 | #607b8b |
slategray1 |
|
198 226 255 | #c6e2ff |
slategray2 |
|
185 211 238 | #b9d3ee |
slategray3 |
|
159 182 205 | #9fb6cd |
slategray4 |
|
108 123 139 | #6c7b8b |
lightsteelblue1 |
|
202 225 255 | #cae1ff |
lightsteelblue2 |
|
188 210 238 | #bcd2ee |
lightsteelblue3 |
|
162 181 205 | #a2b5cd |
lightsteelblue4 |
|
110 123 139 | #6e7b8b |
lightblue1 |
|
191 239 255 | #bfefff |
lightblue2 |
|
178 223 238 | #b2dfee |
lightblue3 |
|
154 192 205 | #9ac0cd |
lightblue4 |
|
104 131 139 | #68838b |
lightcyan1 |
|
224 255 255 | #e0ffff |
lightcyan2 |
|
209 238 238 | #d1eeee |
lightcyan3 |
|
180 205 205 | #b4cdcd |
lightcyan4 |
|
122 139 139 | #7a8b8b |
paleturquoise1 |
|
187 255 255 | #bbffff |
paleturquoise2 |
|
174 238 238 | #aeeeee |
paleturquoise3 |
|
150 205 205 | #96cdcd |
paleturquoise4 |
|
102 139 139 | #668b8b |
cadetblue1 |
|
152 245 255 | #98f5ff |
cadetblue2 |
|
142 229 238 | #8ee5ee |
cadetblue3 |
|
122 197 205 | #7ac5cd |
cadetblue4 |
|
83 134 139 | #53868b |
turquoise1 |
|
0 245 255 | #00f5ff |
turquoise2 |
|
0 229 238 | #00e5ee |
turquoise3 |
|
0 197 205 | #00c5cd |
turquoise4 |
|
0 134 139 | #00868b |
cyan1 |
|
0 255 255 | #00ffff |
cyan2 |
|
0 238 238 | #00eeee |
cyan3 |
|
0 205 205 | #00cdcd |
cyan4 |
|
0 139 139 | #008b8b |
darkslategray1 |
|
151 255 255 | #97ffff |
darkslategray2 |
|
141 238 238 | #8deeee |
darkslategray3 |
|
121 205 205 | #79cdcd |
darkslategray4 |
|
82 139 139 | #528b8b |
aquamarine1 |
|
127 255 212 | #7fffd4 |
aquamarine2 |
|
118 238 198 | #76eec6 |
aquamarine3 |
|
102 205 170 | #66cdaa |
aquamarine4 |
|
69 139 116 | #458b74 |
darkseagreen1 |
|
193 255 193 | #c1ffc1 |
darkseagreen2 |
|
180 238 180 | #b4eeb4 |
darkseagreen3 |
|
155 205 155 | #9bcd9b |
darkseagreen4 |
|
105 139 105 | #698b69 |
seagreen1 |
|
84 255 159 | #54ff9f |
seagreen2 |
|
78 238 148 | #4eee94 |
seagreen3 |
|
67 205 128 | #43cd80 |
seagreen4 |
|
46 139 87 | #2e8b57 |
palegreen1 |
|
154 255 154 | #9aff9a |
palegreen2 |
|
144 238 144 | #90ee90 |
palegreen3 |
|
124 205 124 | #7ccd7c |
palegreen4 |
|
84 139 84 | #548b54 |
springgreen1 |
|
0 255 127 | #00ff7f |
springgreen2 |
|
0 238 118 | #00ee76 |
springgreen3 |
|
0 205 102 | #00cd66 |
springgreen4 |
|
0 139 69 | #008b45 |
green1 |
|
0 255 0 | #00ff00 |
green2 |
|
0 238 0 | #00ee00 |
green3 |
|
0 205 0 | #00cd00 |
green4 |
|
0 139 0 | #008b00 |
chartreuse1 |
|
127 255 0 | #7fff00 |
chartreuse2 |
|
118 238 0 | #76ee00 |
chartreuse3 |
|
102 205 0 | #66cd00 |
chartreuse4 |
|
69 139 0 | #458b00 |
olivedrab1 |
|
192 255 62 | #c0ff3e |
olivedrab2 |
|
179 238 58 | #b3ee3a |
olivedrab3 |
|
154 205 50 | #9acd32 |
olivedrab4 |
|
105 139 34 | #698b22 |
darkolivegreen1 |
|
202 255 112 | #caff70 |
darkolivegreen2 |
|
188 238 104 | #bcee68 |
darkolivegreen3 |
|
162 205 90 | #a2cd5a |
darkolivegreen4 |
|
110 139 61 | #6e8b3d |
khaki1 |
|
255 246 143 | #fff68f |
khaki2 |
|
238 230 133 | #eee685 |
khaki3 |
|
205 198 115 | #cdc673 |
khaki4 |
|
139 134 78 | #8b864e |
lightgoldenrod1 |
|
255 236 139 | #ffec8b |
lightgoldenrod2 |
|
238 220 130 | #eedc82 |
lightgoldenrod3 |
|
205 190 112 | #cdbe70 |
lightgoldenrod4 |
|
139 129 76 | #8b814c |
lightyellow1 |
|
255 255 224 | #ffffe0 |
lightyellow2 |
|
238 238 209 | #eeeed1 |
lightyellow3 |
|
205 205 180 | #cdcdb4 |
lightyellow4 |
|
139 139 122 | #8b8b7a |
yellow1 |
|
255 255 0 | #ffff00 |
yellow2 |
|
238 238 0 | #eeee00 |
yellow3 |
|
205 205 0 | #cdcd00 |
yellow4 |
|
139 139 0 | #8b8b00 |
gold1 |
|
255 215 0 | #ffd700 |
gold2 |
|
238 201 0 | #eec900 |
gold3 |
|
205 173 0 | #cdad00 |
gold4 |
|
139 117 0 | #8b7500 |
goldenrod1 |
|
255 193 37 | #ffc125 |
goldenrod2 |
|
238 180 34 | #eeb422 |
goldenrod3 |
|
205 155 29 | #cd9b1d |
goldenrod4 |
|
139 105 20 | #8b6914 |
darkgoldenrod1 |
|
255 185 15 | #ffb90f |
darkgoldenrod2 |
|
238 173 14 | #eead0e |
darkgoldenrod3 |
|
205 149 12 | #cd950c |
darkgoldenrod4 |
|
139 101 8 | #8b658b |
rosybrown1 |
|
255 193 193 | #ffc1c1 |
rosybrown2 |
|
238 180 180 | #eeb4b4 |
rosybrown3 |
|
205 155 155 | #cd9b9b |
rosybrown4 |
|
139 105 105 | #8b6969 |
indianred1 |
|
255 106 106 | #ff6a6a |
indianred2 |
|
238 99 99 | #ee6363 |
indianred3 |
|
205 85 85 | #cd5555 |
indianred4 |
|
139 58 58 | #8b3a3a |
sienna1 |
|
255 130 71 | #ff8247 |
sienna2 |
|
238 121 66 | #ee7942 |
sienna3 |
|
205 104 57 | #cd6839 |
sienna4 |
|
139 71 38 | #8b4726 |
burlywood1 |
|
255 211 155 | #ffd39b |
burlywood2 |
|
238 197 145 | #eec591 |
burlywood3 |
|
205 170 125 | #cdaa7d |
burlywood4 |
|
139 115 85 | #8b7355 |
wheat1 |
|
255 231 186 | #ffe7ba |
wheat2 |
|
238 216 174 | #eed8ae |
wheat3 |
|
205 186 150 | #cdba96 |
wheat4 |
|
139 126 102 | #8b7e66 |
tan1 |
|
255 165 79 | #ffa54f |
tan2 |
|
238 154 73 | #ee9a49 |
tan3 |
|
205 133 63 | #cd853f |
tan4 |
|
139 90 43 | #8b5a2b |
chocolate1 |
|
255 127 36 | #ff7f24 |
chocolate2 |
|
238 118 33 | #ee7621 |
chocolate3 |
|
205 102 29 | #cd661d |
chocolate4 |
|
139 69 19 | #8b4513 |
firebrick1 |
|
255 48 48 | #ff3030 |
firebrick2 |
|
238 44 44 | #ee2c2c |
firebrick3 |
|
205 38 38 | #cd2626 |
firebrick4 |
|
139 26 26 | #8b1a1a |
brown1 |
|
255 64 64 | #ff4040 |
brown2 |
|
238 59 59 | #ee3b3b |
brown3 |
|
205 51 51 | #cd3333 |
brown4 |
|
139 35 35 | #8b2323 |
salmon1 |
|
255 140 105 | #ff8c69 |
salmon2 |
|
238 130 98 | #ee8262 |
salmon3 |
|
205 112 84 | #cd7054 |
salmon4 |
|
139 76 57 | #8b4c39 |
lightsalmon1 |
|
255 160 122 | #ffa07a |
lightsalmon2 |
|
238 149 114 | #ee9572 |
lightsalmon3 |
|
205 129 98 | #cd8162 |
lightsalmon4 |
|
139 87 66 | #8b5742 |
orange1 |
|
255 165 0 | #ffa500 |
orange2 |
|
238 154 0 | #ee9a00 |
orange3 |
|
205 133 0 | #cd8500 |
orange4 |
|
139 90 0 | #8b5a00 |
darkorange1 |
|
255 127 0 | #ff7f00 |
darkorange2 |
|
238 118 0 | #ee7600 |
darkorange3 |
|
205 102 0 | #cd6600 |
darkorange4 |
|
139 69 0 | #8b4500 |
coral1 |
|
255 114 86 | #ff7256 |
coral2 |
|
238 106 80 | #ee6a50 |
coral3 |
|
205 91 69 | #cd5b45 |
coral4 |
|
139 62 47 | #8b3e2f |
tomato1 |
|
255 99 71 | #ff6347 |
tomato2 |
|
238 92 66 | #ee5c42 |
tomato3 |
|
205 79 57 | #cd4f39 |
tomato4 |
|
139 54 38 | #8b3626 |
orangered1 |
|
255 69 0 | #ff4500 |
orangered2 |
|
238 64 0 | #ee4000 |
orangered3 |
|
205 55 0 | #cd3700 |
orangered4 |
|
139 37 0 | #8b2500 |
red1 |
|
255 0 0 | #ff0000 |
red2 |
|
238 0 0 | #ee0000 |
red3 |
|
205 0 0 | #cd0000 |
red4 |
|
139 0 0 | #8b0000 |
deeppink1 |
|
255 20 147 | #ff1493 |
deeppink2 |
|
238 18 137 | #ee1289 |
deeppink3 |
|
205 16 118 | #cd1076 |
deeppink4 |
|
139 10 80 | #8b0a50 |
hotpink1 |
|
255 110 180 | #ff6eb4 |
hotpink2 |
|
238 106 167 | #ee6aa7 |
hotpink3 |
|
205 96 144 | #cd6090 |
hotpink4 |
|
139 58 98 | #8b3a62 |
pink1 |
|
255 181 197 | #ffb5c5 |
pink2 |
|
238 169 184 | #eea9b8 |
pink3 |
|
205 145 158 | #cd919e |
pink4 |
|
139 99 108 | #8b636c |
lightpink1 |
|
255 174 185 | #ffaeb9 |
lightpink2 |
|
238 162 173 | #eea2ad |
lightpink3 |
|
205 140 149 | #cd8c95 |
lightpink4 |
|
139 95 101 | #8b5f65 |
palevioletred1 |
|
255 130 171 | #ff82ab |
palevioletred2 |
|
238 121 159 | #ee799f |
palevioletred3 |
|
205 104 137 | #cd6889 |
palevioletred4 |
|
139 71 93 | #8b475d |
maroon1 |
|
255 52 179 | #ff34b3 |
maroon2 |
|
238 48 167 | #ee30a7 |
maroon3 |
|
205 41 144 | #cd2990 |
maroon4 |
|
139 28 98 | #8b1c62 |
violetred1 |
|
255 62 150 | #ff3e96 |
violetred2 |
|
238 58 140 | #ee3a8c |
violetred3 |
|
205 50 120 | #cd3278 |
violetred4 |
|
139 34 82 | #8b2252 |
magenta1 |
|
255 0 255 | #ff00ff |
magenta2 |
|
238 0 238 | #ee00ee |
magenta3 |
|
205 0 205 | #cd00cd |
magenta4 |
|
139 0 139 | #8b008b |
orchid1 |
|
255 131 250 | #ff83fa |
orchid2 |
|
238 122 233 | #ee7ae9 |
orchid3 |
|
205 105 201 | #cd69c9 |
orchid4 |
|
139 71 137 | #8b4789 |
plum1 |
|
255 187 255 | #ffbbff |
plum2 |
|
238 174 238 | #eeaeee |
plum3 |
|
205 150 205 | #cd96cd |
plum4 |
|
139 102 139 | #8b668b |
mediumorchid1 |
|
224 102 255 | #e066ff |
mediumorchid2 |
|
209 95 238 | #d15fee |
mediumorchid3 |
|
180 82 205 | #b452cd |
mediumorchid4 |
|
122 55 139 | #7a378b |
darkorchid1 |
|
191 62 255 | #bf3eff |
darkorchid2 |
|
178 58 238 | #b23aee |
darkorchid3 |
|
154 50 205 | #9a32cd |
darkorchid4 |
|
104 34 139 | #68228b |
purple1 |
|
155 48 255 | #9b30ff |
purple2 |
|
145 44 238 | #912cee |
purple3 |
|
125 38 205 | #7d26cd |
purple4 |
|
85 26 139 | #551a8b |
mediumpurple1 |
|
171 130 255 | #ab82ff |
mediumpurple2 |
|
159 121 238 | #9f79ee |
mediumpurple3 |
|
137 104 205 | #8968cd |
mediumpurple4 |
|
93 71 139 | #5d478b |
thistle1 |
|
255 225 255 | #ffe1ff |
thistle2 |
|
238 210 238 | #eed2ee |
thistle3 |
|
205 181 205 | #cdb5cd |
thistle4 |
|
139 123 139 | #8b7b8b |
grey11 |
|
28 28 28 | #1c1c1c |
grey21 |
|
54 54 54 | #363636 |
grey31 |
|
79 79 79 | #4f4f4f |
grey41 |
|
105 105 105 | #696969 |
grey51 |
|
130 130 130 | #828282 |
grey61 |
|
156 156 156 | #9c9c9c |
grey71 |
|
181 181 181 | #b5b5b5 |
gray81 |
|
207 207 207 | #cfcfcf |
gray91 |
|
232 232 232 | #e8e8e8 |
darkgrey |
|
169 169 169 | #a9a9a9 |
darkblue |
|
0 0 139 | #00008b |
darkcyan |
|
0 139 139 | #008b8b |
darkmagenta |
|
139 0 139 | #8b008b |
darkred |
|
139 0 0 | #8b0000 |
lightgreen |
|
144 238 144 | #90ee90 |
Как самостоятельно задать цвет в CSS, задать код, вот несколько вариант:
1. Задать хтмл цвет методом шести цифр шестнадцатеричного кода
В начале, обязательно пишется символ решётка, пример этого варианта: #XXXXXX. Две цифры впереди отвечают за силу и глубину красного оттенка (Red), две следующие цифры зеленый (Green) и оставшиеся две цифры отвечает за синий цвет (Blue). Из букв получаем модель RGB цветосочетания или (rgb таблица). Метод применяется чаще всего для решения задач, чтобы качественно оформить страницы сайта, упростить работу вебмастеру, список кодов замечательно позволяет точно подобрать подходящий оттенок цвета.Примечание Существует более краткая форма обозначения цвета html в виде трех шестнадцатеричных цифры: #XXX. В этом случаи каждый код определяется двухзначным шестнадцатеричным числом, поэтому каждая цифра дублируется. К примеру, #ABC соответствует коду #AABBCC. Также и с цифрами.
2. Задать цвет можно с помощью слов, через его название
Удобный и понятный вариант, вместо цифр по его названию, пишите слово (Red) и получаете красный цвет. Но есть ограничение, малое количество вариантов, которые можно задать по названию, поэтому получает применять только в некоторых случая. И всё же название цвета достаточно во многих ситуациях, чтобы можно было работать с ними, подобрать подходящий для себя соответствующий, хотя бы на время.3. Задание цвета методом трех десятичных чисел
Похожий метод на первый вариант, но с более сложным синтаксисом: rgb(XYZ,XYZ,XYZ), где X, Y, Z — любые десятичные цифры, но XYZ не должны быть больше значения 255. Каждый из трех чисел отделенные запятой отвечают за какой-то цвет (красный, зелёный, синий).Сама таблица цветов html представлен здесь на dle9.com ниже, наглядный пример состоит из трёх вариантов с обозначением в формате цифр, RGB-модели, и названия html и код.
Добавьте эту страницу в закладки браузера,
чтобы всегда была «под рукой».
Для добавления в закладки нажмите Ctrl+D.
Кроме этого, если вы хотите вводить символ, недоступные при использовании обычной клавиатуры, существуют возможность это сделать.
Смотрите также:
Рекомендуем интересные темы
140 цветов HTML с кодами HEX, RGB и именами
Используя цветовой код RGB или HEX в HTML, вы можете изменить цвет текста, фона, URL-адреса, шрифта, таблицы или всей страницы.
Цвета в HTML #
Значение свойства color
можно установить тремя основными способами:
- по названию цвета, например,
красный
,зеленый
,синий
- шестнадцатеричным числом : от
# 000000
до#ffffff
- по цветовому коду в палитре RGB: от
rgb (0, 0, 0)
доrgb (255, 255, 255)
Название цвет относительно простой.Единственное ограничение заключается в том, что мы должны выбрать цвет из нескольких предопределенных вариантов.
Стандартный набор цветов HTML состоит из 140 различных значений. Если вам нужен цвет, которого там нет, вам нужно будет использовать шестнадцатеричный формат (HEX-код) или RGB.
Цветовые коды HEX в HTML #
Шестнадцатеричный код всегда начинается с #
, за которым следует 3-байтовое шестнадцатеричное число (всего 6 цифр). Каждый байт отвечает за интенсивность одного из трех основных цветов: первый отвечает за интенсивность красного, второй — за зеленый, а третий — за синий:
Значение 00
— самая низкая интенсивность, FF
— самый высокий.Например, чтобы получить белый цвет, нужно «смешать» три основных цвета с максимальной интенсивностью: #FFFFFF
. Для получения черного цвета интенсивность всех цветов должна быть минимальной: # 000000
.
— То же самое, что и в классе рисования — чтобы получить любой цвет, вам просто нужно смешать красный, синий и зеленый.
— Именно так. Чтобы получить красный цвет, нужно установить максимальное значение для байта, отвечающего за красный цвет, а для остальных — минимальное: ## FF0000
.
— Тогда для зеленого будет шестнадцатеричный код: # 00FF00
Палитра цветов HTML HTML #
В палитре RGB цвета смешиваются аналогичным образом, смешивая интенсивность красного и зеленого , и синие цвета. Отсюда и сокращение RGB. Здесь только интенсивность устанавливается числами 0 из 255, где 0 — самая низкая интенсивность, 255 — самая высокая. Например, зеленый цвет будет выглядеть так: rgb (0, 255, 0)
;
Все эти значения подходят для других ситуаций, когда необходим цвет, например, в background-color
.
Таблица 140 цветов HTML с именами и кодами (строка, HEX, rgb) #
В этой таблице вы найдете все цвета, которые имеют имя HTML и код. Если вы хотите, чтобы стал FULL STACK JS Developer , вы можете присоединиться к моему современному курсу веб-разработки
Цвет | Имя | HTML-код строки | HEX-код | Код RGB | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
бордовый | бордовый | # 800000 | (128,0,0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-красный | темно-красный | # 8B0000 | (139,0,0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
коричневый | коричневый | # A52A2A | (165,42,42) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
огнеупорный кирпич | огнеупорный кирпич | # B22222 | (178,34,34) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
малиновый малиновый | # DC143C | (220,20,60) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
красный | красный | # FF0000 | (255,0,0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
помидор | 9 0101 помидор# FF6347 | (255,99,71) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
коралл | коралл | # FF7F50 | (255,127,80) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
индийский красный CD5C5C | (205,92,92) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
светло-коралловый | светло-коралловый | # F08080 | (240,128,128) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-лососевый | темно-лососевый | темно-лососевый | темно-лососевый | темный | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
лосось | лосось | # FA8072 | (250,128,114) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
светлый лосось | светлый лосось | # FFA07A 9010,1601красный | # FF4500 | (255,69,0) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-оранжевый | темно-оранжевый | 901 01 # FF8C00(255,140,0) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
оранжевый | оранжевый | # FFA500 | (255,165,0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
золото | золото | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
золото | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-золотой стержень | темно-золотой стержень | # B8860B | (184,134,11) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
золотой стержень | золотой стержень | палочка бледно-золотая | palegoldenrod | # EEE8AA | (238,232,170) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-хаки | темнохаки | # BDB7610 | # BDB76B | # BDB76B | # F0E68C | (240,230,140) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
оливковое | оливковое | # 808000 | (128,128,0 ) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
желтый | желтый | # FFFF00 | (255,255,0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
желто-зеленый | желто-зеленый | # 9ACD32 | темно-оливково-зеленый | темно-оливковый | # 556B2F | (85,107,47) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
оливковый | оливковый | # 6B8E23 | (107,142,35) зеленый | (107,142,35) зеленый | # 7CFC00 | (124,252,0) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
шартрез | шартрез | # 7FFF00 | (127,255,0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
FF зеленый желтый | FF зеленый желтый | 173,255,47)||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-зеленый | темно-зеленый | # 006400 | (0,100,0) | 9 0097||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
зеленый | зеленый | # 008000 | (0,128,0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
лесной зеленый | лесной зеленый | # 228B22 | (34,139 | лайм | # 00FF00 | (0,255,0) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
салатовый | салатовый | # 32CD32 | (50,205,50) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
9010EE светло-зеленый 9010EE | (144,238,144) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
бледно-зеленый | бледно-зеленый | # 98FB98 | (152,251,152) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-зеленый цвет моря | 9010,1978 | средний весенний зеленый | средний весенний зеленый | # 00FA9A | (0,250,154) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
весенне-зеленый | весенне-зеленый | # 00FF7F | (0,255,127) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
морской зеленый | морской зеленый | # 2E8B57 |
| цвет морской волны | # 66CDAA | (102,205,170) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
средний морской зеленый | средний морской зеленый | # 3CB371 | (60,179,113) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
светло-зеленый ) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-сланцево-серый | темно-серый | # 2F4F4F | (47,79,79) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
бирюзовый | бирюзовый | ,128 # 0010802 | 9008темно-голубой | темно-голубой | # 008B8B | (0,139,139) | 90 097|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
голубой | голубой | # 00FFFF | (0,255,255) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
голубой | голубой | # 00FFFF | голубой | голубой # E0FFFF | (224,255,255) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
тёмно-бирюзовый | тёмно-бирюзовый | # 00CED1 | (0,206,209) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
бирюзовый | средне-бирюзовый | средний бирюзовый | # 48D1CC | (72,209,204) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
бледно-бирюзовый | paleturquoise | #AFEEEE
| бирюзовый | морской воды | акв. | (127,255,212) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
синий порошковый | синий порошковый | # B0E0E6 | (176,224,230) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
синий кадет | синий кадет | # 5F9EA0 9010,12 | синийсиний | сталь сталь # 4682B4(70,130,180) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
васильковый | васильковый | # 6495ED | (100,149,237) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-синий | темно-синийdeeps | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
dodger blue | dodgerblue | # 1E90FF | (30,144,255) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
голубой | голубой | # ADD8E6 | голубой | голубой небосклон# 87CEEB | (135,206,235) | светло-голубой | светло-голубой | # 87CEFA | (135,206,250) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
полуночно-синий | полуночно-синий | # 1 | темно-синий | # 000080 | (0,0,128) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-синий | темно-синий | # 00008B | (0,0,139) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
средне-синий | 9010 0000101 средний синийсиний | (0,0,205) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
синий | синий | # 0000FF | (0,0,255) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
королевский синий | royalblue | # 4169E1 | сине-фиолетовый | сине-фиолетовый | # 8A2BE2 | (138,43,226) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
индиго 901 02 | индиго | # 4B0082 | (75,0,130) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-синий сланец | темно-синий | # 483D8B | (72,61,139) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
(106,90,205) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
средний сланцевый синий | средний голубой | # 7B68EE | (123,104,238) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
средний фиолетовый | средний фиолетовый | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-пурпурный | темно-пурпурный | # 8B008B | (139,0,139) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-фиолетовый | темно-фиолетовый | темная орхидея | темная орхидея | # 9932CC | (153,50,204) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
средняя орхидея | средняя орхидея | # BA55D3 | (186,85,211) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
фиолетовый | фиолетовый | # 800080 | (128,0,128) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
9010 D8BFD8 | (216,191,216) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
слива | слива | # DDA0DD | (221,160,221) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
EE | фиолетовый | фиолетовый | фуксия | фуксия | # FF00FF | (255,0,255) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
орхидея | орхидея | # DA70D6 | (218,112,214) красная | красная | красная | (199,21,133) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
бледно-фиолетовый красный | paleviol etred | # DB7093 | (219,112,147) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-розовый | deeppink | # FF1493 | (255,20,147) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ярко-розовый | горячий розовый | 255,105,180)||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
светло-розовый | светло-розовый | # FFB6C1 | (255,182,193) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
розовый | розовый | антикв-белый | # FAEBD7 | (250,235,215) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
бежевый | бежевый | # F5F5DC | (245,245,220) бисквитный | бисквитный | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
бланшированный миндаль | бланшированный миндаль | #FFEBCD | (255,235,205) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
пшеница | пшеница | # F5DEB3 | (245,222,179) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
кукурузный шелк | корнсилк |
| лимонный шифон | #FFFACD | (255,250,205) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
светло-золотистый желтый стержень | светло-золотистый желтый | # FAFAD2 | 9010 желтый 9010 желтый FFFFE0 | (255,255,224) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
седло-коричневый | седло-коричневый | # 8B4513 | (139,69,19) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
сиенна | сиенна , 45)|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
шоколад | шоколад | # D2691E | (210,105,30) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
peru | peru | # CD853F | (205,133,63) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
песочно-коричневый | сэндибраун 96) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
массивное дерево | бурливуд | # DEB887 | (222,184,135) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
желто-коричневый | коричневый | # D2B48C |
| коричневый | розово-коричневый | # BC8F8F | (188,143,143) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
мокасины | мокасины | # FFE4B5 | (255,228,181) 9010,29101 | 9010Jo86 белый | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
слойка персик | слойка персик | # FFDAB9 | (255,218,18 5) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
роза туманная | роза туманная | # FFE4E1 | (255,228,225) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
румяна лавандовые | румяна лаванды
| белье | # FAF0E6 | (250,240,230) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
старое кружево | oldlace | # FDF5E6 | (253,245,230) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
морская ракушка | морская ракушка | # FFF5EE | (255,245,238) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
мятный крем | мятный крем | # F5FF10 | # F5FFFA | серый | # 708090 | (112,128,144) | 900 97|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
светло-серый | светло-серый | # 778899 | (119,136,153) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
светло-стальной синий | светло-синий | # B010,286101 | бледно-лиловый | # E6E6FA | (230,230,250) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
цветочный белый | цветочный белый | # FFFAF0 | (255,250,240) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
белый привидение | белый призрак | # F8F8FF | (248,248,255) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
медовая роса | медовая роса | ivory409# FFFFF0 | (255,255,240) 9010 2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
лазурный | лазурный | # F0FFFF | (240,255,255) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
снег | снег | #FFFAFA | черный | 50,250 # 000000 | (0,0,0) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
тусклый серый | тусклый серый | # 696969 | (105,105,105) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
серый | серый 80102 | # | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
темно-серый / темно-серый | темно-серый | # A9A9A9 | (169,169,169) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
серебристый | серебристый | # C092,1992 | # C0C09109 серый / светло-серый | светло-серый | # D3D3D3 | (211,211,211) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
усиление сборо | gainsboro | #DCDCDC | (220,220,220) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
белый дым | белый дым | # F5F5F5 |
Подробнее об HTML-руководствах или изучите Full-Stack JS с нуля!
цветов | HTML Dog
Следующие значения, чтобы указать полный как красный-как-красный-может-быть, все дают один и тот же результат:
-
красный
-
RGB (255,0,0)
-
RGB (100%, 0%, 0%)
-
# ff0000
-
# f00
Предопределенные названия цветов включают аква
, черный
, синий
, фуксия
, серый
, зеленый
, салатовый
, бордовый
, темно-синий
,
оливковый
красный
, серебристый
, бирюзовый
, белый
и желтый
. прозрачный
также является допустимым значением.
За возможным исключением черный
и белый
, названия цветов имеют ограниченное использование на современных, хорошо спроектированных веб-сайтах, поскольку они очень специфичны и ограничивают.
Три значения в значении RGB: от 0 до 255, 0 - самый низкий уровень (например, без красного), 255 - самый высокий уровень (например, полный красный). Эти значения также могут быть в процентах.
Шестнадцатеричная система (ранее и более точно известная как « шестнадцатеричная ») - это система счисления по основанию 16 и .Обычно мы используем десятичную систему счисления и ( с основанием 10, , от 0 до 9), но шестнадцатеричная имеет 16 цифр, от 0 до f.
Шестнадцатеричное число предваряется символом решетки ( # ) и может состоять из трех или шести цифр. По сути, трехзначная версия является сжатой версией шестизначной ( # ff0000
становится # f00
, # cc9966
становится # c96
и т. Д.). Трехзначную версию легче расшифровать (первая цифра, как и первое значение в RGB, красная, вторая зеленая и третья синяя), но шестизначная версия дает вам больше контроля над точным цветом.
CSS3, последняя версия CSS, также позволяет определять HSL цвета - оттенок, насыщенность и яркость. Подробнее об этом, а также о полупрозрачных цветах можно найти в Расширенном руководстве по CSS.
Рекламируйте здесь! На давнем, начитанном и уважаемом ресурсе веб-разработки.
цвет и цвет фона
Цвета могут быть применены с использованием color
и background-color
(обратите внимание, что это должен быть «цвет» американского английского языка, а не «цвет»).
Синий фон и желтый текст могут выглядеть так:
h2 {
цвет: желтый;
цвет фона: синий;
}
Эти цвета могут быть слишком резкими, поэтому вы можете изменить код своего файла CSS для немного других оттенков:
тело {
размер шрифта: 14 пикселей;
цвет: темно-синий;
}
h2 {
цвет: #ffc;
цвет фона: # 009;
}
Сохраните файл CSS и обновите страницу в браузере.Вы увидите, что цвета первого заголовка (элемент h2
) изменились на желтый и синий.
Вы можете применить свойства color
и background-color
к большинству HTML-элементов, включая body
, который изменит цвета страницы и всего на ней.
50 оттенков серого темного режима
Погрузитесь в палитры темного режима Spotify, Twitter и Facebook, проанализировав шестнадцатеричные коды
Если вы, как я, заядлый пользователь темного режима, то знаете, что темный режим - это не только белый текст на черном фоне.В одном приложении несколько оттенков серого придают ему некоторую глубину. А в различных приложениях спектр серого становится еще шире.
Мне было любопытно, какие приложения и сайты в темном режиме я использую. Изучив элементы и получив шестнадцатеричные коды цветов со скриншота, я проанализировал палитры темного режима 6 популярных приложений.
Цветовое пространство RGB
RGB
Говоря о цветах, мы должны начать с того, как цвета могут быть представлены в цифровом виде.
Цветовое пространство RGB - одна из самых популярных моделей.Каждый цвет представляет собой совокупный вес трех цветов: красного, зеленого и синего. Вес варьируется от 0 (минимум) до 255 (максимум) и обычно отображается тройкой: (красный вес, зеленый вес, синий вес)
. Например, красный будет (255, 0, 0)
, поскольку чистый красный не имеет следов зеленого или синего. Глубокий пурпурный баклажан - это (128, 0, 128)
с равными частями красного и синего. У нас также есть черный, которому не хватает цвета: (0, 0, 0)
и белый, все цвета: (255, 255, 255).
Мы также можем визуализировать цветовое пространство RGB в виде куба с осью красного, зеленого и синего цветов. В этом кубе можно «нанести» любой цвет.
Нас интересуют цвета вдоль и вокруг линии оттенков серого . В этом кубе RGB линия оттенков серого простирается от черного к белому. Каждый цвет в этой строке имеет одинаковое значение для красного, зеленого и синего. Например, средний серый - (127, 127, 127),
и является средней точкой линии градаций серого. Чем ближе значения к 0, тем темнее оттенок серого, поскольку черный - (0, 0, 0)
.
Линия оттенков серого от черного к белому
Цвета, окружающие линию градаций серого, не являются чисто серыми, а имеют слегка оттенки. Например, Twitter использует (25, 39, 52)
. Обратите внимание на то, что, хотя значения близки друг к другу, синее значение является самым большим. Таким образом, этот оттенок серого немного синеватый.
Шестнадцатеричные коды
Для оцифровки этого триплета RGB у нас есть цветовые коды HTML (Hex). HTML, CSS, SVG и другие используют шестнадцатеричные коды для представления цветов.Название происходит от того, что шестнадцатеричные коды представляют собой просто конкатенацию значений RGB в шестнадцатеричном формате в десятичном виде. Иногда перед шестнадцатеричным кодом ставится знак фунта. Если преобразовать вышеупомянутые цвета в Hex, мы получим:
- Красный:
(255, 0, 0) → # ff0000
- Баклажан фиолетовый:
(128, 0, 128) → # 800080
- Черный:
(0, 0, 0) → # 000000
- Средне-серый:
(127, 127, 127) → # 7f7f7f
- Белый:
(255, 255, 255) → #ffffff
- Twitter сине-серый:
(25, 39, 52) → # 1
Теперь, когда мы немного знаем о представлениях RGB и Hex, мы можем исследовать мир темного режима.
Анатомия приложения темного режима
Анализируя различные приложения и сайты, я заметил некоторые общие закономерности, которым следуют большинство приложений в темном режиме:
Фон
Как самый доминирующий цвет, фон почти всегда самый темный. Это никогда не бывает чисто черным - обычно на пару оттенков светлее.
Их можно найти сбоку (обычно слева) или вверху приложения. Строки меню помогают в навигации по приложению и светлее, чем цвет фона.
Карточка
С появлением материального дизайна появилась концепция карточек. Эти элементы разделяют контент сайта и также имеют более светлый серый цвет.
Разделитель
На некоторых картах есть разделители для разделения содержимого. Разделители еще легче.
Кнопка
Кнопки вызывают действия и могут быть серыми или выделенными цветом приложения.
Основной текст
Заголовки и заголовки. Первичный текст - самый светлый цвет на сайте, обычно очень близкий к белому.
Дополнительный текст
Дополнительные тексты меньше по размеру шрифта и немного темнее, чем их основные аналоги.
Значок
Представляя идеи без слов, значки также светлые и иногда сопровождаются второстепенным текстом.
Это некоторые характеристики, которые разделяют многие современные приложения в темном режиме! Теперь посмотрим, как эти элементы применимы к популярным приложениям.
Spotify (приложение для macOS)
Слева направо : фон, строка меню, верхний градиент, нижний градиент, основной текст, дополнительный текст
Spotify - самое раннее приложение, которое я помню, что только имел темный режим.Все началось не так. После кардинального редизайна в 2014 году стриминговый сервис заставил всех своих пользователей использовать темную тему. Аргумент в пользу перехода был таким: темный фон позволяет красочным обложкам альбомов появляться, как в театрах, приглушающих свет для шоу.
Действительно, красочные обложки альбомов контрастируют с темным приложением и заставляют их казаться ярче, чем на белом фоне:
Яркие цвета pop
Spotify - также единственное приложение, которое я заметил, в котором используется градиент для основного фона.Ссылаясь на палитру, фон варьируется от # 404040
, более светлый серый, до # 181818
, почти черный. Моя теория также заключается в том, что пользователи проводят больше всего времени, просматривая страницы списков воспроизведения:
Здесь градиент имеет смысл для длинного списка элементов, почти имитируя движение. На страницах без списков воспроизведения градиент также обеспечивает некоторую глубину.
Дополнительные комментарии :
- Основной текст - чистый белый, а второстепенный текст - светло-серый - довольно стандартный
- Каждый цвет - чистый оттенок серого, без оттенков
- Акцентный цвет (зеленый) используется для разделения оттенков серого
Twitter (Интернет)
Слева направо : фон, карточка, цвет наведения, основной текст, дополнительный текст
Сразу же, просто взглянув на значения RGB, Twitter сильно отдает предпочтение синему цвету в качестве темного режима.Для каждого из оттенков значение синего является самым высоким.
Поскольку его логотип / акцентный цвет - синий, синяя окраска темного режима неудивительна и хорошо сочетается. Как и в случае с любым другим приложением, которое использует синий в качестве идентифицирующего цвета, Twitter надеется, что этот выбор цвета передает доверие и спокойствие.
Дополнительные комментарии :
- Twitter использует карточки с разделителями. Карты светлее фона, чтобы казаться ближе, создавая ощущение глубины.
- Разделители на карточках более светлого оттенка синего
- Основной текст - чисто-белый, второстепенный текст - голубой
- Синий акцентный цвет, используемый во всем
- Логотип в виде значка белого цвета
Facebook (Интернет)
Слева направо : фон, карточка, цвет наведения, основной текст, дополнительный текст
Цветовые решения темного режима Facebook интересны. Если вы посмотрите на шестнадцатеричные коды, ни один из цветов не находится на линии оттенков серого.Вместо этого все значения RGB близки друг к другу, слегка увеличиваясь от красного до зеленого и до синего. Он настолько тонкий, что практически незаметен при использовании приложения:
Цвета также могут быть оттенками серого.
Дополнительные комментарии :
- Facebook также использует более светлые карты
- Более легкие разделители используются в левой и правой строках меню
- Основной текст не белый, а оттенок очень светло-серого
- Значки в правом верхнем углу тоже не совсем белые, они заключены в серые кружки с кнопками, а значки вверху имеют более темный оттенок серого.Иконки в левом меню цветные, а не
Youtube (Интернет)
Слева направо : фон, меню, цвет наведения, основной текст, дополнительный текст
Палитра темного режима, используемая YouTube, почти не интересна. Каждый оттенок серого находится точно на линиях оттенков серого. В отличие от вышеперечисленных приложений, здесь нет акцентного цвета. Вы не увидите красного значка YouTube нигде в приложении, кроме логотипа в левом верхнем углу.
Средний (приложение для iOS)
Слева направо : фон, строки меню, основной текст, дополнительный текст
Если бы в Medium не было темного режима, я бы определенно не использовал приложение каждую ночь перед сном 😅 Как и его простой черно-белый логотип, цвета темного режима приложения Medium для iOS очень просты.На мой взгляд, такая простота хорошо работает для издательской платформы - она напоминает старомодные газеты.
Дополнительные комментарии :
- Самый темный цвет фона, который мы когда-либо видели, почти чистый черный.
- Medium также использует зеленый акцентный цвет во всем приложении.
Яблоко
iPhone
Слева направо : фон, карточка (Настройки), карточка (iMessage), основной текст, дополнительный текст
Темный режим для iPhone можно увидеть во встроенных приложениях Apple, таких как «Настройки», «iMessage», «Заметки», «Фотографии» и т. Д.Загружаемые приложения также могут распознавать, что вы установили темный режим iPhone, и автоматически настраивать их тему.
Дополнительные комментарии :
- В отличие от всех предыдущих приложений, в темном режиме iPhone в качестве фона используется чистый черный цвет.
- Цвета карт предпочитают синий. Как и Facebook, синий оттенок практически незаметен.
Mac
А вот и самое интересное. Apple на самом деле делает фоны собственных приложений Mac прозрачными - но прозрачными по сравнению с вашими обоями рабочего стола , а не с тем, что в данный момент открыто в приложении.Таким образом, нет однозначной цветовой палитры, поскольку обои различаются.
Однако в MacOS есть элементы типичного приложения темного режима: строки меню, карточки, основной / дополнительный текст и т.д. темный режим предсказуем.
Заключение
Если вы когда-нибудь думали, что все приложения в темном режиме начинают выглядеть одинаково, вы не ошиблись. У них есть общие элементы, о которых мы узнали: обычно темный, почти черный цвет фона, с более светлыми полосами меню сверху и / или по бокам; даже более легкие, закругленные уголки карточек разделяют содержимое и кажутся более близкими из-за цветового контраста; Ярко-белый основной текст и более мелкий, немного более темный вторичный текст… Все приложения сочетаются друг с другом.
Тем не менее, есть еще способы немного отклониться от этого шаблона. Мы видели градиент Spotify, синие оттенки Twitter и непрозрачный фон MacOS. Если вы разрабатываете приложение в темном режиме, я рекомендую вам найти способы незаметно выделиться. В конце концов, мы могли бы использовать некоторое разнообразие… и больше оттенков серого.
Спасибо за чтение!
Первоначально опубликовано в кодовой передаче на носителе .
Преобразование RGB в цвет HTML
В документах HTML цвета обычно представлены в виде шестнадцатеричных значений.Обработчики в листингах 31-1 и 31-2 показывают, как преобразовать 8-битные или 256 цветовые значения RGB в шестнадцатеричные значения. Укажите цвет RGB, представленный списком из трех чисел, каждое из которых имеет значение от 0
до 65535
.
ПРИЛОЖЕНИЕ
Открыть в редакторе скриптов
Листинг 31-1. AppleScript: обработчик, преобразующий цвет RGB в шестнадцатеричное значение.-
при convertRGBColorToHexValue (theRGBValues)
-
установить theHexList на {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", «B», «C», «D», «E», «F»}
-
установите для параметра HexValue значение ""
-
повторяется от 1 до подсчета значений RGB
-
установить для CurrentRGBValue значение (элемент a из значенийRGBValues) div 256
-
, если CurrentRGBValue равно 256, установите для CurrentRGBValue значение 255
-
установите для параметра FirstItem значение элемента ((theCurrentRGBValue div 16) + 1) из списка HexList
-
установите для SecondItem значение (((theCurrentRGBValue / 16 mod 1) * 16) + 1) в HexList
-
установите для параметра HexValue значение (theHexValue, theFirstItem и theSecondItem) как строку
-
повторитель конца
-
возврат ("#" и theHexValue) в виде строки
-
конец convertRGBColorToHexValue
JAVASCRIPT
Открыть в редакторе скриптов
Листинг 31-2. JavaScript: функция, преобразующая цвет RGB в шестнадцатеричное значение.-
функция convertRGBColorToHexValue (rgbValues) {
-
var r = parseInt (rgbValues [0], 10).toString (16) .slice (-2)
-
если (r.length == 1)
-
r = "0" + r
-
var g = parseInt (rgbValues [1], 10) .toString (16) .slice (-2)
-
если (g.length == 1)
-
г = "0" + г
-
var b = parseInt (rgbValues [2], 10) .toString (16) .slice (-2)
-
если (р.длина == 1)
-
b = "0" + b
-
возврат ("#" + r + g + b)
-
}
В листинге 31-3 показано, как вызвать обработчики из листинга 31-1 для преобразования указанного цвета RGB в шестнадцатеричное значение для использования в HTML.
ПРИЛОЖЕНИЕ
Открыть в редакторе скриптов
Листинг 31-3. AppleScript: Вызов обработчика для преобразования цвета RGB в шестнадцатеричное значение.-
установите для параметра RGBValues значение (выберите цвет по умолчанию, {65535, 0, 0})
-
convertRGBColorToHexValue (theRGBValues)
-
-> Результат: "# FF0000"
JAVASCRIPT
Открыть в редакторе скриптов
Листинг 31-4. JavaScript: Вызов функции для преобразования цвета RGB в шестнадцатеричное значение.-
var app = Приложение.currentApplication ()
-
app.includeStandardAdditions = true
-
-
var color = app.chooseColor ({defaultColor: [1, 0, 0]})
-
цвет = [Math.trunc (цвет [0] * 65535), Math.trunc (цвет [1] * 65535), Math.trunc (цвет [2] * 65535)]
-
convertRGBColorToHexValue (цвет)
-
// Результат: "# FF0000"
Примечание
В AppleScript команда выбрать цвет
создает значения RGB в диапазоне от 0
до 65535
.В JavaScript значения RGB находятся в диапазоне от 0
до 1
. Эти значения необходимо преобразовать, чтобы они соответствовали используемым значениям AppleScript. Перечисление 31-4 демонстрирует это преобразование.
Вы можете указать цвет определенных элементов страницы с помощью HTML-тегов. Есть два метода указания цветов в веб-документах: RGB. значения и название цвета. 16.1. Определение цвета по значениям RGBСамый простой и точный способ чтобы указать цвет в HTML, по его числовому RGB (красный, зеленый, синий) значения. Описание цвета RGB см. В разделе 3.3 «Цвет в Интернете» в главе 3 «Принципы веб-дизайна для полиграфистов». После того, как вы определили значения красного, зеленого и синего цветов вашего выбранный цвет (с этой задачей помогает инструмент для редактирования изображений), вам необходимо перевести их в их шестнадцатеричные эквиваленты в чтобы ввести их в цветовой тег HTML.Эти значения записываются в HTML со следующим синтаксисом: "#RRGGBB" RR обозначает шестнадцатеричное значение красного цвета, GG обозначает шестнадцатеричное значение зеленого цвета, а BB обозначает шестнадцатеричное значение синего цвета. С использованием эти значения, вы можете указать любой цвет из "истинного" цветовое "пространство" (миллионы цветов). Давайте рассмотрим пример, чтобы пояснить это в контексте. Чтобы установить цвет фона документа до темно-оливково-зеленого, сначала найдите Значения RGB цвета (85, 107, 47) и преобразовать их в их шестнадцатеричные эквиваленты (55, 6B, 2F; объяснение преобразования следует).Затем значения можно поместить в тег HTML, в данном случае чтобы изменить цвет фона страницы: 16.1.1. Шестнадцатеричная системаШестнадцатеричная система счисления - основание 16 (по сравнению с основанием 10). для десятичных чисел). В нем используются следующие 16 символов: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F от A до F представляют десятичные значения от 10 до 15. 16.1.2. Преобразование десятичного числа в шестнадцатеричноеВы можете вычислить шестнадцатеричные значения в диапазон от 0 до 255, разделив число на 16, чтобы получить первую цифру, затем используя остаток для второй цифры. Например, разделив десятичное число 203 на 16 дает 12 с остатком 11. шестнадцатеричное значение 12 - C; шестнадцатеричное значение 11 - B. Следовательно, шестнадцатеричный эквивалент 203 - CB. К счастью, есть более простые методы преобразования чисел в шестнадцатеричный:
Таблица 16-1. Десятичные и шестнадцатеричные эквиваленты
16.1.3. Шестнадцатеричные значения для цветов веб-палитрыВеб-палитра - это набор из 216 цветов, которые не будут смещаться или размываться. при рендеринге в браузерах на 8-битных мониторах (для тщательного объяснение веб-палитры см. в главе 3 «Принципы веб-дизайна для полиграфистов»). Все цвета в веб-палитра состоит из комбинации следующих шести шестнадцатеричных значений: 00, 33, 66, 99, CC, и FF.
Авторские права © 2002 O'Reilly & Associates. Все права защищены. |
HEX по сравнению с RGB - Goedemorgen
Если вы когда-либо создавали или изменяли стили для веб-сайта, или если вы цифровой художник, то вы, вероятно, видели HEX и / или RGB. И HEX, и RGB используются для определения цветов с помощью кода, поэтому вы можете часто видеть это в программном обеспечении, таком как Adobe Creative Suite, или в веб-дизайне.
В этой статье я не собираюсь вдаваться в технические подробности об этих цветовых типах, но я предоставлю краткую информацию о каждом цветовом типе вместе с полезными ссылками, которые вы можете использовать в своем проекте.
Разница между HEX и RGB
В чем разница между HEX и RGB и когда следует использовать тот или иной цветовой тип? По сути, функциональность обоих цветовых типов одинакова, то есть они оба будут отображать один и тот же цвет. Визуально эти два цветотипа выглядят по-разному.В цвете HEX используется сочетание шести цифр и символов, а в цвете RGB используются три набора из трех чисел в диапазоне от 0 до 255.
Давайте посмотрим на этот цветовой тип на примере, а для нашего примера я выберу основной цвет акцента темы Goedemorgen, который представляет собой синий цвет .
Пример цвета HEX:
# 0161bd
Пример цвета RGB:
RGB (1,97,189)
Как видите, они оба выглядят по-разному, но когда вы добавляете каждый из этих типов к двум разным элементам, цвет этих элементов будет идентичным.Теперь вы, вероятно, задаетесь вопросом, в чем причина использования цвета RGB, если цвет HEX намного проще в использовании. Что ж, каждый цветовой тип имеет различное использование, и красота цвета RGB в том, что он позволяет добавить непрозрачность вашему цвету.
Добавление непрозрачности к цвету может быть удобно, если вы хотите добавить более светлый или более темный цвет фона к определенному разделу. Например, если вы хотите добавить оверлей с аналогичным стилем в раздел Jumbotron в теме Goedemorgen, это можно легко сделать с помощью RGBa (красный, зеленый, синий и альфа) цвет:
rgba (0,0,0,0.5)
Как вы могли заметить, мы добавили четвертый аргумент к нашему цвету, который определяет непрозрачность или альфа-канал элемента. Диапазон непрозрачности составляет от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность). В нашем примере мы использовали 0,5;
Полезные ресурсы
Ниже вы можете найти несколько онлайн-инструментов, которые помогут вам создать цветовую палитру из цветов HEX и при необходимости преобразовать некоторые из этих цветов в RGBa.
Генератор цветовых схем от Coloors - на этом веб-сайте есть множество предустановленных цветовых схем, которые вы можете выбрать для своего проекта.Каждая цветовая схема состоит из пяти цветов, которые прекрасно сочетаются друг с другом. Вы можете перейти к следующей цветовой схеме, щелкнув пробел на клавиатуре.