Теория цвета в цифрах Хабр

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

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

Табл. 1. Десятичные и шестнадцатеричные числа меньше 16
Десятичные123456789101112131415
Шестнадцатеричные123456789ABCDEF

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

Табл. 2. Десятичные и шестнадцатеричные числа больше 16
Десятичные16171819202122232425262728293031
Шестнадцатеричные101112131415161718191A1B1C1D1E1F

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

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

<body bgcolor="#FA8E47">

Цвет фона задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

FA+8E+47=FA8E47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 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 цветов. Пример веб-цвета — #33FF66.

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

Фиолетовые тона

HTML — название цветаHEXRGB
Lavender#E6E6FA230, 230, 250
Thistle#D8BFD8216, 191, 216
Plum#DDA0DD221, 160, 221
Violet#EE82EE238, 130, 238
Orchid#DA70D6218, 112, 214
Fuchsia#FF00FF255, 0, 255
Magenta#FF00FF255, 0, 255
MediumOrchid#BA55D3186, 85, 211
MediumPurple#9370DB147, 112, 219
BlueViolet#8A2BE2138, 43, 226
DarkViolet#9400D3148, 0, 211
DarkOrchid#9932CC153, 50, 204
DarkMagenta#8B008B139, 0, 139
Purple#800080128, 0, 128
Indigo#4B008275, 0, 130
SlateBlue#6A5ACD106, 90, 205
DarkSlateBlue#483D8B72, 61, 139

Зелёные тона

HTML Имя ЦветаHEXRGB
GreenYellow#ADFF2F173, 255, 47
Chartreuse#7FFF00127, 255, 0
LawnGreen#7CFC00124, 252, 0
Lime#00FF000, 255, 0
LimeGreen#32CD3250, 205, 50
PaleGreen#98FB98152, 251, 152
LightGreen#90EE90144, 238, 144
MediumSpringGreen#00FA9A0, 250, 154
SpringGreen#00FF7F0, 255, 127
MediumSeaGreen#3CB37160, 179, 113
SeaGreen#2E8B5746, 139, 87
ForestGreen#228B2234, 139, 34
Green#0080000, 128, 0
DarkGreen#0064000, 100, 0
YellowGreen#9ACD32154, 205, 50
OliveDrab#6B8E23107, 142, 35
Olive#808000128, 128, 0
DarkOliveGreen#556B2F85, 107, 47
MediumAquamarine#66CDAA102, 205, 170
DarkSeaGreen#8FBC8F143, 188, 143
LightSeaGreen#20B2AA32, 178, 170
DarkCyan#008B8B0, 139, 139
Teal#0080800, 128, 128

Коричневые тона

HTML — название цветаHEXRGB
Cornsilk#FFF8DC255, 248, 220
BlanchedAlmond#FFEBCD255, 235, 205
Bisque#FFE4C4255, 228, 196
NavajoWhite#FFDEAD255, 222, 173
Wheat#F5DEB3245, 222, 179
BurlyWood#DEB887222, 184, 135
Tan#D2B48C210, 180, 140
RosyBrown#BC8F8F188, 143, 143
SandyBrown#F4A460244, 164, 96
Goldenrod#DAA520218, 165, 32
DarkGoldenRod#B8860B184, 134, 11
Peru#CD853F205, 133, 63
Chocolate#D2691E210, 105, 30
SaddleBrown#8B4513139, 69, 19
Sienna#A0522D160, 82, 45
Brown#A52A2A165, 42, 42
Maroon#800000128, 0, 0

Синие тона

Aqua#00FFFF0, 255, 255
Cyan#00FFFF0, 255, 255
LightCyan#E0FFFF224, 255, 255
PaleTurquoise#AFEEEE175, 238, 238
Aquamarine#7FFFD4127, 255, 212
Turquoise#40E0D064, 224, 208
MediumTurquoise#48D1CC72, 209, 204
DarkTurquoise#00CED10, 206, 209
CadetBlue#5F9EA095, 158, 160
SteelBlue#4682B470, 130, 180
LightSteelBlue#B0C4DE176, 196, 222
PowderBlue#B0E0E6176, 224, 230
LightBlue#ADD8E6173, 216, 230
SkyBlue#87CEEB135, 206, 235
LightSkyBlue#87CEFA135, 206, 250
DeepSkyBlue#00BFFF0, 191, 255
DodgerBlue#1E90FF30, 144, 255
CornflowerBlue#6495ED100, 149, 237
MediumSlateBlue#7B68EE123, 104, 238
RoyalBlue#4169E165, 105, 225
Blue#0000FF0, 0, 255
MediumBlue#0000CD0, 0, 205
DarkBlue#00008B0, 0, 139
Navy#0000800, 0, 128
MidnightBlue#19197025, 25, 112

Коды цветов

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