Лиловый код. Учeбник HTML. Цвета RGB. Цвета безопасной палитры. Цвета CSS - RGB значения
Таблица (палитра) цветов html предоставляет вам возможность самостоятельно подобрать нужный вам тон. Значение цвета отображается в трех форматах: Hex, RGB и HSV.
- Hex состоит из трех двух символьных значений в шестнадцатеричной системе счисления. Например: #ff00b3, где первая пара чисел - красный, вторая - зеленый, а третья - синий.
- RGB (RedGreenBlue) имеет вид "200,100,255", обозначающее количество соответствующего тона(красный,зеленый,синий) в получаемом цвете.
- HSV
(Hue, Saturation, Value - тон, насыщенность, значение) - цветовая модель, в которой в качестве координат являются:
- Hue - цветовой тон, может варьироваться в пределах от 0° до 360°.
- Saturation - насыщенность, варьируется в пределах 0-100 или 0-1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому.
- Value (значение цвета) - задает яркость, значение так же может варьироваться в пределах 0-100 или 0-1.
Введите код цвета: GO
Список цветов с названиями
В таблице перечислены названия цветов на английском языке (которые можно использовать в качестве значений), поддерживаемые всеми браузерами, и их шестнадцатеричные значения. Все перечисленные цвета являются "безопасными", то есть во всех браузерах будут отображаться одинаково.
Название цвета | HEX | Цвет |
---|---|---|
Black | #000000 | |
Navy | #000080 | |
DarkBlue | #00008B | |
MediumBlue | #0000CD | |
Blue | #0000FF | |
DarkGreen | #006400 | |
Green | #008000 | |
Teal | #008080 | |
DarkCyan | #008B8B | |
DeepSkyBlue | #00BFFF | |
DarkTurquoise | #00CED1 | |
MediumSpringGreen | #00FA9A | |
Lime | #00FF00 | |
SpringGreen | #00FF7F | |
Aqua | #00FFFF | |
Cyan | #00FFFF | |
MidnightBlue | #191970 | |
DodgerBlue | #1E90FF | |
LightSeaGreen | #20B2AA | |
ForestGreen | #228B22 | |
SeaGreen | #2E8B57 | |
DarkSlateGray | #2F4F4F | |
LimeGreen | #32CD32 | |
MediumSeaGreen | #3CB371 | |
Turquoise | #40E0D0 | |
RoyalBlue | #4169E1 | |
SteelBlue | #4682B4 | |
DarkSlateBlue | #483D8B | |
MediumTurquoise | #48D1CC | |
Indigo | #4B0082 | |
DarkOliveGreen | #556B2F | |
CadetBlue | #5F9EA0 | |
CornflowerBlue | #6495ED | |
MediumAquaMarine | #66CDAA | |
DimGray | #696969 | |
SlateBlue | #6A5ACD | |
OliveDrab | #6B8E23 | |
SlateGray | #708090 | |
LightSlateGray | #778899 | |
MediumSlateBlue | #7B68EE | |
LawnGreen | #7CFC00 | |
Chartreuse | #7FFF00 | |
Aquamarine | #7FFFD4 | |
Maroon | #800000 | |
Purple | #800080 | |
Olive | #808000 | |
Gray | #808080 | |
SkyBlue | #87CEEB | |
LightSkyBlue | #87CEFA | |
BlueViolet | #8A2BE2 | |
DarkRed | #8B0000 | |
DarkMagenta | #8B008B | |
SaddleBrown | #8B4513 | |
DarkSeaGreen | #8FBC8F | |
LightGreen | #90EE90 | |
MediumPurple | #9370D8 | |
DarkViolet | #9400D3 | |
PaleGreen | #98FB98 | |
DarkOrchid | #9932CC | |
YellowGreen | #9ACD32 | |
Sienna | #A0522D | |
Brown | #A52A2A | |
DarkGray | #A9A9A9 | |
LightBlue | #ADD8E6 | |
GreenYellow | #ADFF2F | |
PaleTurquoise | #AFEEEE | |
LightSteelBlue | #B0C4DE | |
PowderBlue | #B0E0E6 | |
FireBrick | #B22222 | |
DarkGoldenRod | #B8860B | |
MediumOrchid | #BA55D3 | |
RosyBrown | #BC8F8F | |
DarkKhaki | #BDB76B | |
Silver | #C0C0C0 | |
MediumVioletRed | #C71585 | |
IndianRed | #CD5C5C | |
Peru | #CD853F | |
Chocolate | #D2691E | |
Tan | #D2B48C | |
LightGray | #D3D3D3 | |
PaleVioletRed | #D87093 | |
Thistle | #D8BFD8 | |
Orchid | #DA70D6 | |
GoldenRod | #DAA520 | |
Crimson | #DC143C | |
Gainsboro | #DCDCDC | |
Plum | #DDA0DD | |
BurlyWood | #DEB887 | |
LightCyan | #E0FFFF | |
Lavender | #E6E6FA | |
DarkSalmon | #E9967A | |
Violet | #EE82EE | |
PaleGoldenRod | #EEE8AA | |
LightCoral | #F08080 | |
Khaki | #F0E68C | |
AliceBlue | #F0F8FF | |
HoneyDew | #F0FFF0 | |
Azure | #F0FFFF | |
SandyBrown | #F4A460 | |
Wheat | #F5DEB3 | |
Beige | #F5F5DC | |
WhiteSmoke | #F5F5F5 | |
MintCream | #F5FFFA | |
GhostWhite | #F8F8FF | |
Salmon | #FA8072 | |
AntiqueWhite | #FAEBD7 | |
Linen | #FAF0E6 | |
LightGoldenRodYellow | #FAFAD2 | |
OldLace | #FDF5E6 | |
Red | #FF0000 | |
Fuchsia | #FF00FF | |
Magenta | #FF00FF | |
DeepPink | #FF1493 | |
OrangeRed | #FF4500 | |
Tomato | #FF6347 | |
HotPink | #FF69B4 | |
Coral | #FF7F50 | |
Darkorange | #FF8C00 | |
LightSalmon | #FFA07A | |
Orange | #FFA500 | |
LightPink | #FFB6C1 | |
Pink | #FFC0CB | |
Gold | #FFD700 | |
PeachPuff | #FFDAB9 | |
NavajoWhite | #FFDEAD | |
Moccasin | #FFE4B5 | |
Bisque | #FFE4C4 | |
MistyRose | #FFE4E1 | |
BlanchedAlmond | #FFEBCD | |
PapayaWhip | #FFEFD5 | |
LavenderBlush | #FFF0F5 | |
SeaShell | #FFF5EE | |
Cornsilk | #FFF8DC | |
LemonChiffon | #FFFACD | |
FloralWhite | #FFFAF0 | |
Snow | #FFFAFA | |
Yellow | #FFFF00 | |
LightYellow | #FFFFE0 | |
Ivory | #FFFFF0 | |
White | #FFFFFF |
Цвета html обозначаются шестью символами после символа слеш - например, #000000. Эти шесть символов обозначают доли различных цветов (Красного, Зеленого и Синего цветов (Red, Green, Blue)) в итоговом цвете. В мониторе вашего комьютера изображение формируется из огромного количества точек, называемых пикселями. Каждый пиксел - это маленький источник света, назовём его "фонарик", который в свою очередь состоит из трех фонариков - красного, зеленого и синего цвета. Уменьшая или увеличивая интенсивность свечения отдельных цветных фонариков, мы получаем нужный цвет.
Коды цветов html
Цвета в HTML обозначаются шестнадцатиричным (HEX) обозначением сочетания красного, синего и зеленого цвета (RGB).
Наименьшим значением цвета является 0 (шестнадцатиричное 00). Наибольшим значением цвета является 255 (шестнадцатиричное FF).
Шестнадцатиричное значение цвета представляет из себя три цифры, начинающиеся со знака #.
Коды (значения) цветов
Цвет | Код HEX | Код RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
16 миллионов оттенков
Сочетание красного, синего и зеленого цветов со значениями с долей каждого цвета от 0 до 255 дают в сумме более 16 миллионов оттенков (256 x 256 x 256).
Большинство современных мониторов способны отобразить не меньше 16384 различных оттенков (ЖК-мониторы, в основном, способны отображать 262 тысячи 16 миллионов (обновлено в октябре 2013 г.) цветов, а ЭЛТ-мониторы способны отображать практически неограниченное количество цветов).
В цветовой таблице ниже приведено изменение доли красного цвета с 0 до 255 при нулевых значениях синего и зеленого цветов:
Красный | Код HEX | Код RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
Оттенки серого
Для получение оттенков серого цвета используются равные доли всех цветов. Для облегчения выбора нужного цвета мы приводим вам коды оттенков серого цвета
Оттенки серого | Код HEX | Код RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080808 | rgb(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104,104,104) | |
#707070 | rgb(112,112,112) | |
#787878 | rgb(120,120,120) | |
#808080 | rgb(128,128,128) | |
#888888 | rgb(136,136,136) | |
#909090 | rgb(144,144,144) | |
#989898 | rgb(152,152,152) | |
#A0A0A0 | rgb(160,160,160) | |
#A8A8A8 | rgb(168,168,168) | |
#B0B0B0 | rgb(176,176,176) | |
#B8B8B8 | rgb(184,184,184) | |
#C0C0C0 | rgb(192,192,192) | |
#C8C8C8 | rgb(200,200,200) | |
#D0D0D0 | rgb(208,208,208) | |
#D8D8D8 | rgb(216,216,216) | |
#E0E0E0 | rgb(224,224,224) | |
#E8E8E8 | rgb(232,232,232) | |
#F0F0F0 | rgb(240,240,240) | |
#F8F8F8 | rgb(248,248,248) | |
#FFFFFF | rgb(255,255,255) |
Кросс-браузерные (для всех браузеров) названия цветов html
Коллекция из 150 названий цветов в html, поддерживаемых во всех браузерах.
Стандартизированные названия цветов
Консорциум W3C перечисляет 16 валидных названий цветов для HTML и CSS: aqua (аквамарин), black (черный), blue (синий), fuchsia (фуксиновый), gray (серый), green (зеленый), lime (лайм или салатовый), maroon (каштановый), navy (ультрамарин), olive (оливковый), purple (пурпурный), red (красный), silver (серебристый), teal (сизый), white (белый) и yellow (желтый).
При использовании цветов, не входящих в этот список, правильнее будет использовать их шестнадцатиричный код (HEX) или код RGB.
Безопасные цвета
Несколько лет назад, когда компьютеры могли поддерживать максимум 256 различных цветов, был предложен список из 216 «Безопасных web-цветов» с 40 цветами, зарезервированными для системы.
Эта 216-цветная палитра была создана для того, чтобы правильно отобразить цвета в режиме 256-цветной палитры.
Теперь это не важно, потому что большинство компьютеров во всем мире поддерживают миллионы оттенков цвета. В любом случае вот список этих цветов:
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Для html страниц цвета обозначаются в основном в шестнадцатеричной системе. Для этого используют два вида записи кода - полную или сокращенную. Чтобы правильно указать html цвет полной записью необходимо прописать шесть знаков (цифры и/или английские буквы) после решетки, например, черный записывается так: #000000. Сокращенная запись указания html цветов состоит из решетки и трех цифр и/или букв за ней. При этом данный вид запаси можно использовать только в том случае, если полная запись данного цвета состоит одинаковых символов после решетки. Например, этот же черный цвет можно записать так: #000. Указывать html цвета можно как большими, так и маленькими символами, так как они не чувствительны к регистру.
Каждый символ, записанный после "#" соответствует определенной доли красного, зеленого и синего цветов. В свою очередь все мониторы состоят из огромного количества пикселей (микроскопических точек), каждый из которых включает в себя по 3 так называемых "фонарика" (источника света): красны, зеленый и синий. Затем, регулируя интенсивность излучаемого света этими "фонариками", монитор отображает нужный нам цвет.
Сочетая интенсивность излучения красного, синего и зеленого света (от 0 для 256) мониторы могут отображать 16.000.000 различных оттенков.
Также цвета для сайтов могут указываться словесно или в RGB коде.
На сегодняшний день словесно можно прописать 147 цветов. При этом важно знать, что некоторые разные названия могут обозначать одинаковые цвета, например Gray и Grey - это серый цвет (#808080).
Безопасные цвета для сайтов.
Не каждый монитор и браузер может правильно отображать все 16 миллионов html цветов.
Если, например, попадается такой цвет, который браузер не может правильно отобразить, то:
- Браузер заменяет его на тот, который больше всего на него похож и может быть удачно воспроизведен;
- Для правильного отображения браузер может смешать несколько цветов и воспроизвести результат.
Чтобы гарантированно получить на выходе в любом браузере и на любом мониторе тот цвет, который Вы прописали в коде, рекомендуется использовать "Безопасные цвета". Они были определены не вручную или по чьему-то желанию, а математически. Таких на 100% безопасных цветов для html документов существует 216. И хотя сегодняшние технологии дошли до того, что современные мониторы и браузеры распознают миллионы оттенков, мы рекомендуем для гарантии цветопередачи использовать именно эти безопасные цвета.
Шестнадцатеричная система цветов. | Коды цветов в RGB (Red, Green, Blue). |
Код html цвета: #000000 | Цвет RGB: 0 0 0 |
Код html цвета: #333333 | Цвет RGB: 51 51 51 |
Код html цвета: #666666 | Цвет RGB: 102 102 102 |
Код html цвета: #999999 | Цвет RGB: 153 153 153 |
Код html цвета: #CCCCCC | Цвет RGB: 204 204 204 |
Код html цвета: #FFFFFF | Цвет RGB: 255 255 255 |
Код html цвета: #666600 | Цвет RGB: 102 102 0 |
Код html цвета: #999900 | Цвет RGB: 153 153 0 |
Код html цвета: #999933 | Цвет RGB: 153 153 51 |
Код html цвета: #999966 | Цвет RGB: 153 153 102 |
Код html цвета: #CCCC33 | Цвет RGB: 204 204 51 |
Код html цвета: #CCCC66 | Цвет RGB: 204 204 102 |
Код html цвета: #333300 | Цвет RGB: 51 51 0 |
Код html цвета: #666633 | Цвет RGB: 102 102 51 |
Код html цвета: #CCCC99 | Цвет RGB: 204 204 153 |
Код html цвета: #CCFF33 | Цвет RGB: 204 255 51 |
Код html цвета: #CCFF00 | Цвет RGB: 204 255 0 |
Код html цвета: #CCFF66 | Цвет RGB: 204 255 102 |
Код html цвета: #669900 | Цвет RGB: 102 153 0 |
Код html цвета: #99CC33 | Цвет RGB: 153 204 51 |
Код html цвета: #99CC00 | Цвет RGB: 153 204 0 |
Код html цвета: #99CC66 | Цвет RGB: 153 204 102 |
Код html цвета: #99FF33 | Цвет RGB: 153 255 51 |
Код html цвета: #99FF00 | Цвет RGB: 153 255 0 |
Код html цвета: #336600 | Цвет RGB: 51 102 0 |
Код html цвета: #669933 | Цвет RGB: 102 153 51 |
Код html цвета: #66CC33 | Цвет RGB: 102 204 51 |
Код html цвета: #66CC00 | Цвет RGB: 102 204 0 |
Код html цвета: #99FF66 | Цвет RGB: 153 255 102 |
Код html цвета: #CCFF99 | Цвет RGB: 204 255 153 |
Код html цвета: #009900 | Цвет RGB: 0 153 0 |
Код html цвета: #339900 | Цвет RGB: 51 153 0 |
Код html цвета: #33CC00 | Цвет RGB: 51 204 0 |
Код html цвета: #33FF00 | Цвет RGB: 51 255 0 |
Код html цвета: #66FF33 | Цвет RGB: 102 255 51 |
Код html цвета: #66FF00 | Цвет RGB: 102 255 0 |
Код html цвета: #00CC33 | Цвет RGB: 0 204 51 |
Код html цвета: #33CC33 | Цвет RGB: 51 204 51 |
Код html цвета: #00CC00 | Цвет RGB: 0 204 0 |
Код html цвета: #00FF00 | Цвет RGB: 0 255 0 |
Код html цвета: #00FF33 | Цвет RGB: 0 255 51 |
Код html цвета: #33FF33 | Цвет RGB: 51 255 51 |
Код html цвета: #003300 | Цвет RGB: 0 51 0 |
Код html цвета: #336633 | Цвет RGB: 51 102 51 |
Код html цвета: #669966 | Цвет RGB: 102 153 102 |
Код html цвета: #66CC66 | Цвет RGB: 102 204 102 |
Код html цвета: #99CC99 | Цвет RGB: 153 204 153 |
Код html цвета: #CCFFCC | Цвет RGB: 204 255 204 |
Код html цвета: #006600 | Цвет RGB: 0 102 0 |
Код html цвета: #339933 | Цвет RGB: 51 153 51 |
Код html цвета: #00FF66 | Цвет RGB: 0 255 102 |
Код html цвета: #33FF66 | Цвет RGB: 51 255 102 |
Код html цвета: #66FF66 | Цвет RGB: 102 255 102 |
Код html цвета: #99FF99 | Цвет RGB: 153 255 153 |
Код html цвета: #009933 | Цвет RGB: 0 153 51 |
Код html цвета: #00CC66 | Цвет RGB: 0 204 102 |
Код html цвета: #33CC66 | Цвет RGB: 51 204 102 |
Код html цвета: #00FF99 | Цвет RGB: 0 255 153 |
Код html цвета: #33FF99 | Цвет RGB: 51 255 153 |
Код html цвета: #66FF99 | Цвет RGB: 102 255 153 |
Код html цвета: #006633 | Цвет RGB: 0 102 51 |
Код html цвета: #009966 | Цвет RGB: 0 153 102 |
Код html цвета: #339966 | Цвет RGB: 51 153 102 |
Код html цвета: #00CC99 | Цвет RGB: 0 204 153 |
Код html цвета: #33CC99 | Цвет RGB: 51 204 153 |
Код html цвета: #66CC99 | Цвет RGB: 102 204 153 |
Код html цвета: #009999 | Цвет RGB: 0 153 153 |
Код html цвета: #33CCCC | Цвет RGB: 51 204 204 |
Код html цвета: #00FFCC | Цвет RGB: 0 255 204 |
Код html цвета: #33FFCC | Цвет RGB: 51 255 204 |
Код html цвета: #66FFCC | Цвет RGB: 102 255 204 |
Код html цвета: #99FFCC | Цвет RGB: 153 255 204 |
Код html цвета: #00CCCC | Цвет RGB: 0 204 204 |
Код html цвета: #00FFFF | Цвет RGB: 0 255 255 |
Код html цвета: #33FFFF | Цвет RGB: 51 255 255 |
Код html цвета: #66FFFF | Цвет RGB: 102 255 255 |
Код html цвета: #99FFFF | Цвет RGB: 153 255 255 |
Код html цвета: #CCFFFF | Цвет RGB: 204 255 255 |
Код html цвета: #336666 | Цвет RGB: 51 102 102 |
Код html цвета: #006666 | Цвет RGB: 0 102 102 |
Код html цвета: #669999 | Цвет RGB: 102 153 153 |
Код html цвета: #339999 | Цвет RGB: 51 153 153 |
Код html цвета: #66CCCC | Цвет RGB: 102 204 204 |
Код html цвета: #99CCCC | Цвет RGB: 153 204 204 |
Код html цвета: #003333 | Цвет RGB: 0 51 51 |
Код html цвета: #0099CC | Цвет RGB: 0 153 204 |
Код html цвета: #3399CC | Цвет RGB: 51 153 204 |
Код html цвета: #00CCFF | Цвет RGB: 0 204 255 |
Код html цвета: #33CCFF | Цвет RGB: 51 204 255 |
Код html цвета: #66CCFF | Цвет RGB: 102 204 255 |
Код html цвета: #006699 | Цвет RGB: 0 102 153 |
Код html цвета: #336699 | Цвет RGB: 51 102 153 |
Код html цвета: #6699CC | Цвет RGB: 102 153 204 |
Код html цвета: #0099FF | Цвет RGB: 0 153 255 |
Код html цвета: #3399FF | Цвет RGB: 51 153 255 |
Код html цвета: #99CCFF | Цвет RGB: 153 204 255 |
Код html цвета: #003366 | Цвет RGB: 0 51 102 |
Код html цвета: #003399 | Цвет RGB: 0 51 153 |
Код html цвета: #0033FF | Цвет RGB: 0 51 255 |
Код html цвета: #3366CC | Цвет RGB: 51 102 204 |
Код html цвета: #0066CC | Цвет RGB: 0 102 204 |
Код html цвета: #0066FF | Цвет RGB: 0 102 255 |
Код html цвета: #000033 | Цвет RGB: 0 0 51 |
Код html цвета: #0033CC | Цвет RGB: 0 51 204 |
Код html цвета: #0000CC | Цвет RGB: 0 0 204 |
Код html цвета: #0000FF | Цвет RGB: 0 0 255 |
Код html цвета: #3366FF | Цвет RGB: 51 102 255 |
Код html цвета: #6699FF | Цвет RGB: 102 153 255 |
Код html цвета: #000066 | Цвет RGB: 0 0 102 |
Код html цвета: #000099 | Цвет RGB: 0 0 153 |
Код html цвета: #3333CC | Цвет RGB: 51 51 204 |
Код html цвета: #3300CC | Цвет RGB: 51 0 204 |
Код html цвета: #3300FF | Цвет RGB: 51 0 255 |
Код html цвета: #3333FF | Цвет RGB: 51 51 255 |
Код html цвета: #333366 | Цвет RGB: 51 51 102 |
Код html цвета: #333399 | Цвет RGB: 51 51 153 |
Код html цвета: #666699 | Цвет RGB: 102 102 153 |
Код html цвета: #6666CC | Цвет RGB: 102 102 204 |
Код html цвета: #6666FF | Цвет RGB: 102 102 255 |
Код html цвета: #9999CC | Цвет RGB: 153 153 204 |
Код html цвета: #330066 | Цвет RGB: 51 0 102 |
Код html цвета: #330099 | Цвет RGB: 51 0 153 |
Код html цвета: #6600FF | Цвет RGB: 102 0 255 |
Код html цвета: #6633FF | Цвет RGB: 102 51 255 |
Код html цвета: #9999FF | Цвет RGB: 153 153 255 |
Код html цвета: #CCCCFF | Цвет RGB: 204 204 255 |
Код html цвета: #330033 | Цвет RGB: 51 0 51 |
Код html цвета: #663399 | Цвет RGB: 102 51 153 |
Код html цвета: #6633CC | Цвет RGB: 102 51 204 |
Код html цвета: #6600CC | Цвет RGB: 102 0 204 |
Код html цвета: #9966FF | Цвет RGB: 153 102 255 |
Код html цвета: #9966CC | Цвет RGB: 153 102 204 |
Код html цвета: #663366 | Цвет RGB: 102 51 102 |
Код html цвета: #660099 | Цвет RGB: 102 0 153 |
Код html цвета: #9900FF | Цвет RGB: 153 0 255 |
Код html цвета: #9933FF | Цвет RGB: 153 51 255 |
Код html цвета: #9933CC | Цвет RGB: 153 51 204 |
Код html цвета: #CC99FF | Цвет RGB: 204 153 255 |
Код html цвета: #660066 | Цвет RGB: 102 0 102 |
Код html цвета: #996699 | Цвет RGB: 153 102 153 |
Код html цвета: #9900CC | Цвет RGB: 153 0 204 |
Код html цвета: #CC00FF | Цвет RGB: 204 0 255 |
Код html цвета: #CC33FF | Цвет RGB: 204 51 255 |
Код html цвета: #CC66FF | Цвет RGB: 204 102 255 |
Код html цвета: #993399 | Цвет RGB: 153 51 153 |
Код html цвета: #990099 | Цвет RGB: 153 0 153 |
Код html цвета: #CC33CC | Цвет RGB: 204 51 204 |
Код html цвета: #CC00CC | Цвет RGB: 204 0 204 |
Код html цвета: #CC66CC | Цвет RGB: 204 102 204 |
Код html цвета: #CC99CC | Цвет RGB: 204 153 204 |
Код html цвета: #CC3399 | Цвет RGB: 204 51 153 |
Код html цвета: #FF00FF | Цвет RGB: 255 0 255 |
Код html цвета: #FF33FF | Цвет RGB: 255 51 255 |
Код html цвета: #FF66FF | Цвет RGB: 255 102 255 |
Код html цвета: #FF99FF | Цвет RGB: 255 153 255 |
Код html цвета: #FFCCFF | Цвет RGB: 255 204 255 |
Код html цвета: #990066 | Цвет RGB: 153 0 102 |
Код html цвета: #CC0099 | Цвет RGB: 204 0 153 |
Код html цвета: #CC6699 | Цвет RGB: 204 102 153 |
Код html цвета: #FF33CC | Цвет RGB: 255 51 204 |
Код html цвета: #FF00CC | Цвет RGB: 255 0 204 |
Код html цвета: #FF66CC | Цвет RGB: 255 102 204 |
Код html цвета: #660033 | Цвет RGB: 102 0 51 |
Код html цвета: #993366 | Цвет RGB: 153 51 102 |
Код html цвета: #CC0066 | Цвет RGB: 204 0 102 |
Код html цвета: #FF0099 | Цвет RGB: 255 0 153 |
Код html цвета: #FF3399 | Цвет RGB: 255 51 153 |
Код html цвета: #FF99CC | Цвет RGB: 255 153 204 |
Код html цвета: #663333 | Цвет RGB: 102 51 51 |
Код html цвета: #996666 | Цвет RGB: 153 102 102 |
Код html цвета: #CC3366 | Цвет RGB: 204 51 102 |
Код html цвета: #FF0066 | Цвет RGB: 255 0 102 |
Код html цвета: #FF3366 | Цвет RGB: 255 51 102 |
Код html цвета: #FF6699 | Цвет RGB: 255 102 153 |
Код html цвета: #330000 | Цвет RGB: 51 0 0 |
Код html цвета: #990033 | Цвет RGB: 153 0 51 |
Код html цвета: #993333 | Цвет RGB: 153 51 51 |
Код html цвета: #CC3333 | Цвет RGB: 204 51 51 |
Код html цвета: #CC6666 | Цвет RGB: 204 102 102 |
Код html цвета: #CC9999 | Цвет RGB: 204 153 153 |
Код html цвета: #CC0033 | Цвет RGB: 204 0 51 |
Код html цвета: #FF0033 | Цвет RGB: 255 0 51 |
Код html цвета: #FF3333 | Цвет RGB: 255 51 51 |
Код html цвета: #FF6666 | Цвет RGB: 255 102 102 |
Код html цвета: #FF9999 | Цвет RGB: 255 153 153 |
Код html цвета: #FFCCCC | Цвет RGB: 255 204 204 |
Код html цвета: #990000 | Цвет RGB: 153 0 0 |
Код html цвета:#CC0000 | Цвет RGB: 204 0 0 |
Код html цвета: #FF0000 | Цвет RGB: 255 0 0 |
Код html цвета: #FF3300 | Цвет RGB: 255 51 0 |
Код html цвета: #CC3300 | Цвет RGB: 204 51 0 |
Код html цвета: #FF6633 | Цвет RGB: 255 102 51 |
Код html цвета: #660000 | Цвет RGB: 102 0 0 |
Код html цвета: #993300 | Цвет RGB: 153 51 0 |
Код html цвета: #CC6633 | Цвет RGB: 204 102 51 |
Код html цвета: #FF6600 | Цвет RGB: 255 102 0 |
Код html цвета: #FF9966 | Цвет RGB: 255 153 102 |
Код html цвета: #FFCC99 | Цвет RGB: 255 204 153 |
Код html цвета: #663300 | Цвет RGB: 102 51 0 |
Код html цвета: #996633 | Цвет RGB: 153 102 51 |
Код html цвета: #CC6600 | Цвет RGB: 204 102 0 |
Код html цвета: #CC9966 | Цвет RGB: 204 153 102 |
Код html цвета: #FF9933 | Цвет RGB: 255 153 51 |
Код html цвета: #FF9900 | Цвет RGB: 255 153 0 |
Код html цвета: #996600 | Цвет RGB: 153 102 0 |
Код html цвета: #CC9933 | Цвет RGB: 204 153 51 |
Код html цвета: #CC9900 | Цвет RGB: 204 153 0 |
Код html цвета: #FFCC33 | Цвет RGB: 255 204 51 |
Код html цвета: #FFCC00 | Цвет RGB: 255 204 0 |
Код html цвета: #FFCC66 | Цвет RGB: 255 204 102 |
Код html цвета: #CCCC00 | Цвет RGB: 204 204 0 |
Код html цвета: #FFFF00 | Цвет RGB: 255 255 0 |
Код html цвета: #FFFF33 | Цвет RGB: 255 255 51 |
Код html цвета: #FFFF66 | Цвет RGB: 255 255 102 |
Код html цвета: #FFFF99 | Цвет RGB: 255 255 153 |
Код html цвета: #FFFFCC | Цвет RGB: 255 255 204 |
Данная таблица включает в себя 216 кодов безопасных html цветов. Каждый цвет имеет значение в RGB для определения цвета в графических редакторах и HEX для указания цвета на html страницах.
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
По названию
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
Имя | Цвет | Код | RGB | HSL | Описание |
---|---|---|---|---|---|
white | #ffffff или #fff | rgb(255,255,255) | hsl(0,0%,100%) | Белый | |
silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Серый | |
gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Темно-серый | |
black | #000000 или #000 | rgb(0,0,0) | hsl(0,0%,0%) | Черный | |
maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Темно-красный | |
red | #ff0000 или #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Красный | |
orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Оранжевый | |
yellow | #ffff00 или #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Желтый | |
olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Оливковый | |
lime | #00ff00 или #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Светло-зеленый | |
green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зеленый | |
aqua | #00ffff или #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Голубой | |
blue | #0000ff или #00f | rgb(0,0,255) | hsl(240,100%,50%) | Синий | |
navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Темно-синий | |
teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Сине-зеленый | |
fuchsia | #ff00ff или #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Розовый | |
purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Фиолетовый |
С помощью RGB
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
RGBA
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
HSL
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
HSLA
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Предупреждение
Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!
Результат данного примера показан на рис. 2.
Рис. 2. Цвета на веб-странице
В web-дизайне существует несколько способов представления цвета
HEX – шестнадцатеричная система представления цвета по основанию 16. Для данной системы используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F для дополнения цифрового количества до 16. Для web-дизайна взяты 16 основных (ключевых) цветов, так называемый шестнадцатеричный код цвета #RRGGBB, где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.
Два других представления цвета в web-дизайне это: в виде RGB(*,*,*), где каждая «*» доля цвета представлена десятичными цифрами от 0 до 255 и по наименованиям цвета на английском языке.
При создании цветного изображения главной проблемой является правильная передача цветов на разных типах компьтеров, мониторов и браузеров. Если браузер не может правильно отобразить цвет, то он подбирает похожий или смешивает несколько цветов. А иногда может заменить на какой-то совсем другой цвет.
Таблица 16 основных цветов , которые используются во всех браузерах
Название | Цвет | Hex | (RGB) |
Aqua (морская волна) | #00FFFF | (000,255,255) | |
Black (черный) | #000000 | (000,000,000) | |
Blue (голубой) | #0000FF | (000,000,255) | |
Fuchsia (фуксин) | #FF00FF | (255,000,255) | |
Gray (серый) | #808080 | (128,128,128) | |
Green (зеленый) | #008000 | (000,128,000) | |
Lime (ярко-зеленый) | #00FF00 | (000,255,000) | |
Maroon (темно-бордовый) | #800000 | (128,000,000) | |
Navy (темно-синий) | #000080 | (000,000,128) | |
Olive (оливковый) | #808000 | (128,128,000) | |
Purple (фиолетовый) | #800080 | (128,000,128) | |
Red (красный) | #FF0000 | (255,000,000) | |
Silver (серебряный) | #C0C0C0 | (192,192,192) | |
Teal (серо-зеленый) | #008080 | (000,128,128) | |
White (белый) | #FFFFFF | (255,255,255) | |
Yellow (желтый) | #FFFF00 | (255,255,000) |
Таблица пурпурного цвета и его оттенков
Название | Цвет | Hex | (RGB) |
Magenta (пурпурный) | #FFCBDB | (255,203,219) | |
Magenta (пурпурный) | #FF0099 | (255,000,153) | |
Magenta (маджента) | #F95A61 | (249,090,097) | |
Fuchsia (фуксия) | #FF00FF | (255,000,255) | |
Мовеин (анилиновый пурпур) | #EF0097 | (239,000,151) | |
Salmon pink (оранжево розовый) | #FF91A4 | (255,145,164) | |
Cenise (оттенок пурпурного) | #DE3163 | (153,149,140) | |
Aubergine Eggplant (баклажановый) | #990066 | (153,000,132) | |
Lavender blush (розовато-лавандовый) |  #FFF0F5 | (255,240,245) | |
Lilac (сиреневый) | #C8A2C8 | (200,162,200) | |
Magenta (маджента) | #FF008F | (255,000,143) | |
Orchid (орхидея) | #DA70D6 | (218,112,214) | |
Red-violet (фиолетово-красный) | #C71585 | (199,021,133) | |
Sanguine (сангиновый) | #92000A | (146,000,010) | |
Thistle (оттенок пурпурного) | #D8BFD8 | (185,211,238) | |
Violet-eggplant (оттенок пурпурного) | #991199 | (153,017,153) | |
Rosa vivo (насыщено розовый) | #FF007F | (255,000,127) | |
Lavender-rose (оттенок пурпурного) | #FBA0E3 | (108,123,139) | |
Mountbatten pink (розовый Маунбаттена) | #997ABD | (153,122,141) |
Таблица серого цвета и его оттенков
Название | Цвет | Hex | (RGB) |
Gray (Серый) | #808080 | (128,128,128) | |
Gray (Серый) | #bebebe | (190,190,190) | |
(Серый-оттенок) | #858585 | (133,133,133) | |
Gray33 (Серый-33) | #545454 | (084,084,084) | |
(Серого шифера) | #708090 | (112,128,144) | |
(Кварцевый) | #99958с | (153,149,140) | |
(Светло-серый) | #bbbbbb | (187,187,187) | |
(Серебристый) | #c0c0c0 | (192,192,192) | |
(Серо-белый) | #f0f0f0 | (240,240,240) | |
(Бороды Абдель-Керима) | #e0e0e0 | (224,224,224) | |
LightGray (Серый светлый) | #d3d3d3 | (211,211,211) | |
LightStateGray () | #778899 | (119,136,153) | |
StateGray-1 (Бледно-васильковый1) | #c6e2ff | (198,226,255) | |
StateGray-2 (Бледно-васильковый2) | #b9d3ee | (185,211,238) | |
StateGray3 () | #9fb6cd | (159,182,205) | |
StateGray4 () | #6c7b8b | (108,123,139) |