Цвета в программировании таблица – Конвертер Цветов Онлайн — HEX ⇒ RGB ⇒ RGBA ⇒ CMYK ⇒ HSL ⇒ HSLA ⇒ HSB ⇒ HSV ⇒ XYZ ⇒ LAB. Калькулятор цветов HTML. Генератор цветов CSS3 — ColorScheme.Ru

Содержание

Таблица цветовых кодов | Html | Статьи | Программирование Realcoding.Net

Русское название

In English

Код / Сode

Белоснежный Snow

FFFAFA

Призрачно-белый Ghostwhite

F8F8FF

Белый-антик Antique White

FAEBD7

Кремовый Cream

FFFBF0

Персиковый Peachpuff

FFDAB9

Белый-навахо Navajo White

FFDEAD

Шелковый оттенок Cornsilk

FFF8DC

Слоновая кость Ivory

FFFFF0

Лимонный Lemon Chiffon

FFFACD

Морская раковина Seashell

FFF5EE

Медовый Honeydew

F0FFF0

Лазурный Azure

F0FFFF

Бледно-лиловый Lavender

E6E6FA

Голубой с красным отливом Lavender Blush

FFF0F5

Тускло-розовый Misty Rose

FFE4E1

Белый White (*)

FFFFFF

Черный Black (*)

000000

Тускло-серый Dim Gray

696969

Синевато-серый Slate Gray

708090

Грифельно-серый Light Slate Gray

778899

Серый Gray

BEBEBE

Светло-серый Light Gray

C0C0C0

Серый нейтральный Medium Gray

A0A0A4

Темно-серый Dark Gray

808080

Полуночно-синий Midnight Blue

191970

Темно-синий Navy (*), Dark Blue

000080

Васильковый Cornflower

6495ED

Грифельно-синий Slate Blue

6A5ACD

Светлый грифельно-синий Light Slate Blue

8470FF

Голубой королевский Royal Blue

4169E1

Синий Blue

0000FF

Небесно-голубой Sky Blue

87CEEB

Небесно-голубой светлый Light Sky Blue

87CEFA

Синий со стальным оттенком Steel Blue

4682B4

Голубой со стальным оттенком Light Steel Blue

B0C4DE

Светло-синий Light Blue

A6CAF0

Синий с пороховым оттенком Powder Blue

B0E0E6

Бледно-бирюзовый Pale Turquoise

AFEEEE

Бирюзовый Turquoise

40E0D0

Зеленовато-голубой Cyan (*)

00FFFF

Светлый циан
Light Cyan

E0FFFF

Темный циан Dark Cyan

008080

Серо-синий Cadet Blue

5F9EA0

Аквамарин Aquamarine

7FFFD4

Цвет морской волны Seagreen

54FF9F

Цвет морской волны, светлый Light Seagreen

20B2AA

Бледно-зеленый
Pale Green

98FB98

Весенне-зеленый Spring Green

00FF7F

Зеленая лужайка Lawn Green

7CFC00

Зеленый Green (*)

00FF00

Средне-зеленый Medium Green

C0DCC0

Темно-зеленый Dark Green

008000

Зеленовато-желтый
Chartreuse

7FFF00

Зелено-желтый Green Yellow

ADFF2F

Лимонно-зеленый Lime Green

32CD32

Желто-зеленый Yellow Green

9ACD32

Зеленый лесной Forest Green

228B22

Хаки Forest Green

F0E68C

Бледно-золотистый Pale Goldenrod

EEE8AA

Светло-желтый золотистый Light Goldenrod Yellow

FAFAD2

Светло-желтый Light Yellow

FFFFE0

Желтый Yellow (*)

FFFF00

Темно-желтый Dark Yellow

808000

Золотой Gold

FFD700

Светло-золотистый
Light Goldenrod

FFEC8B

Золотистый Goldenrod

DAA520

Желтоватый Burly Wood

DEB887

Розово-коричневый Rosy Brown

BC8F8F

Кожано-коричневый Saddle Brown

8B4513

Охра Sienna

A0522D

Бежевый Beige

F5F5DC

Пшеничный Wheat

F5DEB3

Рыжевато-коричневый Tan

D2B48C

Шоколадный Chocolate

D2691E

Кирпичный Firebrick

B22222

Коричневый Brown

A52A2A

Сомон Salmon

FA8072

Светлый сомон Light Salmon

FFA07A

Оранжевый Orange

FFA500

Коралловый Coral

FF7F50

Коралловый светлый Light Coral

F08080

Оранжево-красный Orange Red

FF4500

Красный Red (*)

FF0000

Темно-красный Dark Red

800000

Теплый розовый Hot Pink

FF69B4

Розовый Pink

FFC0CB

Светло-розовый Light Pink

FFB6C1

Красно-фиолетовый бледный Pale Violet Red

DB7093

Темно-бордовый Maroon (*)

B03060

Красно-фиолетовый Violet Red

D02090

Фуксин Magenta (*)

FF00FF

Фуксин темный Dark Magenta

800080

Фиолетовый Violet

EE82EE

Темно-фиолетовый Plum

DDA0DD

Орсель Orchid

DA70D6

Фиолетово-синий Blue Violet

8A2BE2

Пурпурный Purple

A020F0

Палитра веб цветов -Будни программиста

Иногда все таки нужна такая вещь как цветовая палитра, и не важно что во многих программах она встроена. Иногда возникает необходимость и все тут… Ладно, не важно просто размещу у себя, может кому пригодится.

Цвет   Код цвета RGB
White   #FFFFFF 255 255 255
Snow   #FFFAFA 255 250 250
Whitesmoke   #F5F5F5 245 245 245
Ghostwhite   #F8F8FF 248 248 255
Floralwhite   #FFFAF0 255 250 240
Oldlace   #FDF5E6 253 245 230
Seashell   #FFE5EE 255 229 238
Mistyrose   #FFE4E1 255 228 225
Lavenderblush   #FFF0F5 255 240 245
Linen   #FAF0F6 250 240 246
Lavender   #E6E6FA 230 230 250
Aliceblue   #F0F8FF 240 248 255
Mintcream   #F5FFFA 245 255 250
Lightcyan   #E0FFFF 224 255 255
Azure   #F0FFFF 240 255 255
Honeydew   #F0FFF0 240 255 240
Ivory   #FFFFF0 255 255 240
Beige   #F5F5DC 245 245 220
Cornsilk   #FFF8DC 255 248 220
Antiquewhite   #FAEBD7 250 235 215
Papayawhip   #FFEED5 255 239 213
Blanchedalmond   #FFEBCD 255 235 205
Bisque   #FFE4C4 255 228 196
Peachpuff   #FFDAB9 255 218 185
Moccasin   #FFE4B5 225 228 181
Navajowhite   #FFDEAD 255 222 173
Wheat   #F5DEB3 245 222 179
Tan   #D2B48C 210 180 140
Lightyellow   #FFFFE0 255 255 224
Lightgoldenrodyellow   #FAFAD2 250 250 210
Lemonchiffon   #FFFACD 255 250 205
Yellow   #FFFF00 255 255 0
Gold   #FFD700 255 215 0
Goldenrod   #DAA520 218 165 32
Darkgoldenrod   #B8860B 184 134 11
Sandybrown   #F4A460 244 164 96
Orange   #FFA500 255 165 0
Darkorange   #FF8C00 255 140 0
Orangered   #FF4500 255 69 0
Tomato   #FF6347 255 99 71
Coral   #FF7F50 255 127 80
Lightsalmon   #FFA07A 255 160 122
Salmon   #FA8072 250 128 114
Darksalmon   #E9967A 233 150 122
Chocolate   #D2691E 210 105 30
Peru   #CD853F 205 133 63
Sienna   #A0522D 160 82 45
Brown   #A52A2A 165 42 42
Maroon   #800000 128 0 0
Darkred   #8B0000 139 0 0
Firebrick   #B22222 178 34 34
Indianred   #CD5C5C 205 92 92
Lightcoral   #F08080 240 128 128
Burlywood   #DE8887 222 136 135
Crimson   #DC143C 220 20 60
Red   #FF0000 255 0 0
Pink   #FFC0CB 255 192 203
Lightpink   #FFB6C1 255 182 193
Hotpink   #FF69B4 255 105 180
Deeppink   #FF1493 255 20147 79
Palevioletred   #DB7093 219 112 147
Rosybrown   #BC8F8F 188 143 143
Thistle   #D8BFD8 216 191 216
Plum   #DDA0DD 221 160 221
Violet   #EE82EE 238 130 238
Fuchsia   #FF00FF 255 0 255
Mediumvioletred   #C71585 199 21 133
Orchid   #DA70D6 218 112 214
Mediumorchid   #BA55D3 186 85 211
Darkorchid   #9932CC 153 50 204
Darkviolet   #9400D3 148 0 211
Darkmagenta   #8B008B 139 0 139
Purple   #800080 128 00 128
Indigo   #4B0082 75 0 130
Blueviolet   #8A2BE2 138 43 226
Slateblue   #6A5ACD 106 90 205
Mediumpurple   #9370DB 147 112 219
Mediumslateblue   #7B68EE 123 104 238
Cornflowerblue   #6495ED 100 149 237
Royalblue   #4169E1 65 105 225
Darkslateblue   #483D8B 72 61 139
Midnightblue   #191970 25 25 112
Navy   #000080 0 0 128
Darkblue   #00008B 0 0 139
Mediumblue   #0000CD 0 0 205
Blue   #0000FF 0 0 255
Dodgerblue   #1E90FF 30 144 255
Deepskyblue   #00BFFF 0 191 255
Lightskyblue   #87CEFA 135 206 250
Skyblue   #87CEEB 135 206 235
Steelblue   #4682B4 70 130 180
Lightsteelblue   #B0C4DE 176 196 222
Lightblue   #ADD8E6 173 216 230
Powderblue   #B0E0E6 176 224 230
Paleturquoise   #AFEEEE 175 238 238
Darkturquoise   #00CED1 0 206 209
Mediumturquoise   #48D1CC 72 209 204
Turquoise   #40E0D0 64 224 208
Aqua   #00FFFF 0 255 255
Aquamarine   #7FFFD4 127 255 212
Mediumaquamarine   #66CDAA 102 205 170
Palegreen   #98FB98 152 251 152
Lightgreen   #90EE90 144 238 144
Greenyellow   #ADFF2F 173 255 47
Mediumspringgreen   #00FA9A 0 250 154
Springgreen   #00FF7F 0 255 127
Lime   #00FF00 0 255 0
Limegreen   #32CD32 50 205 50
Mediumseagreen   #3CB371 60 179 113
Yellowgreen   #9ACD32 154 205 50
Darkseagreen   #8FBC8F 143 188 143
Lightseagreen   #20B2AA 32 178 170
Cadetblue   #5F9EA0 95 158 160
Darkcyan   #008B8B 0 139 139
Teal   #008080 0 128 128
Darkslategray   #2F4F4F 47 79 79
Palegoldenrod   #EEE8AA 238 232 170
Khaki   #F0E68C 240 230 140
Darkkhaki   #BDB76D 189 183 109
Olive   #808000 128 128 0
Darkolivegreen   #556B2F 85 107 47
Olivedrab   #6B8E233 107 142 35
Forestgreen   #228B22 34 139 34
Green   #008000 0 128 0
Darkgreen   #006400 0 100 0
Gainsboro   #DCDCDC 220 220 220
Lightslategray   #778899 119 136 153
Slategray   #708090 112 128 144
Seagreen   #2E2B57 43 46 87
Silver   #C0C0C0 192 192 192
Darkgray   #A9A9A9 169 169 169
Gray   #808080 128 128 128
Dimgray   #696969 105 105 105
Black   #000000 0 0 0
snow1   #fffafa 255 250 250
snow2   #eee9e9 238 233 233
snow3   #cdc9c9 205 201 201
snow4   #8b8989 139 137 137
seashell1   #fff5ee 255 245 238
seashell2   #eee5de 238 229 222
seashell3   #cdc5bf 205 197 191
seashell4   #8b8682 139 134 130
AntiqueWhite1   #ffefdb 255 239 219
AntiqueWhite2   #eedfcc 238 223 204
AntiqueWhite3   #cdc0b0 205 192 176
AntiqueWhite4   #8b8378 139 131 120
bisque1   #ffe4c4 255 228 196
bisque2   #eed5b7 238 213 183
bisque3   #cdb79e 205 183 158
bisque4   #8b7d6b 139 125 107
PeachPuff1   #ffdab9 255 218 185
PeachPuff2   #eecbad 238 203 173
PeachPuff3   #cdaf95 205 175 149
PeachPuff4   #8b7765 139 119 101
NavajoWhite1   #ffdead 255 222 173
NavajoWhite2   #eecfa0 238 207 161
NavajoWhite3   #cdb38b 205 179 139
NavajoWhite4   #8b795e 139 121 94
LemonChiffon1   #fffacd 255 250 205
LemonChiffon2   #eee9bf 238 233 191
LemonChiffon3   #cdc9a5 205 201 165
LemonChiffon4   #8b8970 139 137 112
cornsilk1   #fff8dc 255 248 220
cornsilk2   #eee8cd 238 232 205
cornsilk3   #cdc8b1 205 200 177
cornsilk4   #8b8878 139 136 120
ivory1   #fffff0 255 255 240
ivory2   #eeeee0 238 238 224
ivory3   #cdcdc1 205 205 193
ivory4   #8b8b83 139 139 131
honeydew1   #f0fff0 240 255 240
honeydew2   #e0eee0 224 238 224
honeydew3   #c1cdc1 193 205 193
honeydew4   #838b83 131 139 131
LavenderBlush2   #fff0f5 255 240 245
LavenderBlush3   #eee0e5 238 224 229
LavenderBlush4   #cdc1c5 205 193 197
LavenderBlush5   #8b8386 139 131 134
MistyRose1   #ffe4e1 255 228 225
MistyRose2   #eed5d2 238 213 210
MistyRose3   #cdb7b5 205 183 181
MistyRose4   #8b7d7b 139 125 123
azure1   #f0ffff 240 255 255
azure2   #e0eeee 224 238 238
azure3   #c1cdcd 193 205 205
azure4   #838b8b 131 139 139
SlateBlue1   #836fff 131 111 255
SlateBlue2   #7a67ee 122 103 238
SlateBlue3   #6959cd 105 89 205
SlateBlue4   #473c8b 71 60 139
RoyalBlue1   #4876ff 72 118 255
RoyalBlue2   #436eee 67 110 238
RoyalBlue3   #3a5fcd 58 95 205
RoyalBlue4   #27408b 39 64 139
blue1   #0000ff 0 0 255
blue2   #0000ee 0 0 238
blue3   #0000cd 0 0 205
blue4   #00008b 0 0 139
DodgerBlue1   #1e90ff 30 144 255
DodgerBlue2   #1c86ee 28 134 238
DodgerBlue3   #1874cd 24 116 205
DodgerBlue4   #104e8b 16 78 139
SteelBlue1   #63b8ff 99 184 255
SteelBlue2   #5cacee 92 172 238
SteelBlue3   #4f94cd 79 148 205
SteelBlue4   #36648b 54 100 139
DeepSkyBlue1   #00bfff 0 191 255
DeepSkyBlue2   #00b2ee 0 178 238
DeepSkyBlue3   #009acd 0 154 205
DeepSkyBlue4   #00688b 0 104 139
SkyBlue1   #87ceff 135 206 255
SkyBlue2   #7ec0ee 126 192 238
SkyBlue3   #6ca6cd 108 166 205
SkyBlue4   #4a708b 74 112 139
LightSkyBlue1   #b0e2ff 176 226 255
LightSkyBlue2   #a4d3ee 164 211 238
LightSkyBlue3   #8db6cd 141 182 205
LightSkyBlue4   #607b8b 96 123 139
SlateGray1   #c6e2ff 198 226 255
SlateGray2   #b9d3ee 185 211 238
SlateGray3   #9fb6cd 159 182 205
SlateGray4   #6c7b8b 108 123 139
LightSteelBlue1   #cae1ff 202 225 255
LightSteelBlue2   #bcd2ee 188 210 238
LightSteelBlue3   #a2b5cd 162 181 205
LightSteelBlue4   #6e7b8b 110 123 139
LightBlue1   #bfefff 191 239 255
LightBlue2   #b2dfee 178 223 238
LightBlue3   #9ac0cd 154 192 205
LightBlue4   #68838b 104 131 139
LightCyan1   #e0ffff 224 255 255
LightCyan2   #d1eeee 209 238 238
LightCyan3   #b4cdcd 180 205 205
LightCyan4   #7a8b8b 122 139 139
PaleTurquoise1   #bbffff 187 255 255
PaleTurquoise2   #aeeeee 174 238 238
PaleTurquoise3   #96cdcd 150 205 205
PaleTurquoise4   #668b8b 102 139 139
CadetBlue1   #98f5ff 152 245 255
CadetBlue2   #8ee5ee 142 229 238
CadetBlue3   #7ac5cd 122 197 205
CadetBlue4   #53868b 83 134 139
turquoise1   #00f5ff 0 245 255
turquoise2   #00e5ee 0 229 238
turquoise3   #00c5cd 0 197 205
turquoise4   #00868b 0 134 139
cyan1   #00ffff 0 255 255
cyan2   #00eeee 0 238 238
cyan3   #00cdcd 0 205 205
cyan4   #008b8b 0 139 139
DarkSlateGray1   #97ffff 151 255 255
DarkSlateGray2   #8deeee 141 238 238
DarkSlateGray3   #79cdcd 121 205 205
DarkSlateGray4   #528b8b 82 139 139
aquamarine1   #7fffd4 127 255 212
aquamarine2   #76eec6 118 238 198
aquamarine3   #66cdaa 102 205 170
aquamarine4   #458b74 69 139 116
DarkSeaGreen1   #c1ffc1 193 255 193
DarkSeaGreen2   #b4eeb4 180 238 180
DarkSeaGreen3   #9bcd9b 155 205 155
DarkSeaGreen4   #698b69 105 139 105
SeaGreen1   #54ff9f 84 255 159
SeaGreen2   #4eee94 78 238 148
SeaGreen3   #43cd80 67 205 128
SeaGreen4   #2e8b57 46 139 87
PaleGreen1   #9aff9a 154 255 154
PaleGreen2   #90ee90 144 238 144
PaleGreen3   #7ccd7c 124 205 124
PaleGreen4   #548b54 84 139 84
SpringGreen1   #00ff7f 0 255 127
SpringGreen2   #00ee76 0 238 118
SpringGreen3   #00cd66 0 205 102
SpringGreen4   #008b45 0 139 69
green1   #00ff00 0 255 0
green2   #00ee00 0 238 0
green3   #00cd00 0 205 0
green4   #008b00 0 139 0
chartreuse1   #7fff00 127 255 0
chartreuse2   #76ee00 118 238 0
chartreuse3   #66cd00 102 205 0
chartreuse4   #458b00 69 139 0
OliveDrab1   #c0ff3e 192 255 62
OliveDrab2   #b3ee3a 179 238 58
OliveDrab3   #9acd32 154 205 50
OliveDrab4   #698b22 105 139 34
DarkOliveGreen1   #caff70 202 255 112
DarkOliveGreen2   #bcee68 188 238 104
DarkOliveGreen3   #a2cd5a 162 205 90
DarkOliveGreen4   #6e8b3d 110 139 61
khaki1   #fff68f 255 246 143
khaki2   #eee685 238 230 133
khaki3   #cdc673 205 198 115
khaki4   #8b864e 139 134 78
LightGoldenrod1   #ffec8b 255 236 139
LightGoldenrod2   #eedc82 238 220 130
LightGoldenrod3   #cdbe70 205 190 112
LightGoldenrod4   #8b814c 139 129 76
LightYellow1   #ffffe0 255 255 224
LightYellow2   #eeeed1 238 238 209
LightYellow3   #cdcdb4 205 205 180
LightYellow4   #8b8b7a 139 139 122
yellow1   #ffff00 255 255 0
yellow2   #eeee00 238 238 0
yellow3   #cdcd00 205 205 0
yellow4   #8b8b00 139 139 0
gold1   #ffd700 255 215 0
gold2   #eec900 238 201 0
gold3   #cdad00 205 173 0
gold4   #8b7500 139 117 0
goldenrod1   #ffc125 255 193 37
goldenrod2   #eeb422 238 180 34
goldenrod3   #cd9b1d 205 155 29
goldenrod4   #8b6914 139 105 20
DarkGoldenrod1   #ffb90f 255 185 15
DarkGoldenrod2   #eead0e 238 173 14
DarkGoldenrod3   #cd950c 205 149 12
DarkGoldenrod4   #8b6508 139 101 8
RosyBrown1   #ffc1c1 255 193 193
RosyBrown2   #eeb4b4 238 180 180
RosyBrown3   #cd9b9b 205 155 155
RosyBrown4   #8b6969 139 105 105
IndianRed1   #ff6a6a 255 106 106
IndianRed2   #ee6363 238 99 99
IndianRed3   #cd5555 205 85 85
IndianRed4   #8b3a3a 139 58 58
sienna1   #ff8247 255 130 71
sienna2   #ee7942 238 121 66
sienna3   #cd6839 205 104 57
sienna4   #8b4726 139 71 38
burlywood1   #ffd39b 255 211 155
burlywood2   #eec591 238 197 145
burlywood3   #cdaa7d 205 170 125
burlywood4   #8b7355 139 115 85
wheat1   #ffe7ba 255 231 186
wheat2   #eed8ae 238 216 174
wheat3   #cdba96 205 186 150
wheat4   #8b7e66 139 126 102
tan1   #ffa54f 255 165 79
tan2   #ee9a49 238 154 73
tan3   #cd853f 205 133 63
tan4   #8b5a2b 139 90 43
chocolate1   #ff7f24 255 127 36
chocolate2   #ee7621 238 118 33
chocolate3   #cd661d 205 102 29
chocolate4   #8b4513 139 69 19
firebrick1   #ff3030 255 48 48
firebrick2   #ee2c2c 238 44 44
firebrick3   #cd2626 205 38 38
firebrick4   #8b1a1a 139 26 26
brown1   #ff4040 255 64 64
brown2   #ee3b3b 238 59 59
brown3   #cd3333 205 51 51
brown4   #8b2323 139 35 35
salmon1   #ff8c69 255 140 105
salmon2   #ee8262 238 130 98
salmon3   #cd7054 205 112 84
salmon4   #8b4c39 139 76 57
LightSalmon1   #ffa07a 255 160 12
LightSalmon2   #ee9572 238 149 114
LightSalmon3   #cd8162 205 129 98
LightSalmon4   #8b5742 139 87 66
orange1   #ffa500 255 165 0
orange2   #ee9a00 238 154 0
orange3   #cd8500 205 133 0
orange4   #8b5a00 139 90 0
DarkOrange1   #ff7f00 255 127 0
DarkOrange2   #ee7600 238 118 0
DarkOrange3   #cd6600 205 102 0
DarkOrange4   #8b4500 139 69 0
coral1   #ff7256 255 114 86
coral2   #ee6a50 238 106 80
coral3   #cd5b45 205 91 69
coral4   #8b3e2f 139 62 47
tomato1   #ff6347 255 99 71
tomato2   #ee5c42 238 92 66
tomato3   #cd4f39 205 79 57
tomato4   #8b3626 139 54 38
OrangeRed1   #ff4500 255 69 0
OrangeRed2   #ee4000 238 64 0
OrangeRed3   #cd3700 205 55 0
OrangeRed4   #8b2500 139 37 0
red1   #ff0000 255 0 0
red2   #ee0000 238 0 0
red3   #cd0000 205 0 0
red4   #8b0000 139 0 0
DeepPink1   #ff1493 255 20 147
DeepPink2   #ee1289 238 18 137
DeepPink3   #cd1076 205 16 118
DeepPink4   #8b0a50 139 10 80
HotPink1   #ff6eb4 255 110 180
HotPink2   #ee6aa7 238 106 167
HotPink3   #cd6090 205 96 144
HotPink4   #8b3a62 139 58 98
pink1   #ffb5c5 255 181 197
pink2   #eea9b8 238 169 184
pink3   #cd919e 205 145 158
pink4   #8b636c 139 99 108
LightPink1   #ffaeb9 255 174 185
LightPink2   #eea2ad 238 162 173
LightPink3   #cd8c95 205 140 149
LightPink4   #8b5f65 139 95 101
PaleVioletRed1   #ff82ab 255 130 171
PaleVioletRed2   #ee799f 238 121 159
PaleVioletRed3   #cd6889 205 104 137
PaleVioletRed4   #8b475d 139 71 93
maroon1   #ff34b3 255 52 179
maroon2   #ee30a7 238 48 167
maroon3   #cd2990 205 41 144
maroon4   #8b1c62 139 28 98
VioletRed1   #ff3e96 255 62 150
VioletRed2   #ee3a8c 238 58 140
VioletRed3   #cd3278 205 50 120
VioletRed4   #8b2252 139 34 82
magenta1   #ff00ff 255 0 255
magenta2   #ee00ee 238 0 238
magenta3   #cd00cd 205 0 205
magenta4   #8b008b 139 0 139
orchid1   #ff83fa 255 131 250
orchid2   #ee7ae9 238 122 233
orchid3   #cd69c9 205 105 201
orchid4   #8b4789 139 71 137
plum1   #ffbbff 255 187 255
plum2   #eeaeee 238 174 238
plum3   #cd96cd 205 150 205
plum4   #8b668b 139 102 139
MediumOrchid1   #e066ff 224 102 255
MediumOrchid2   #d15fee 209 95 238
MediumOrchid3   #b452cd 180 82 205
MediumOrchid4   #7a378b 122 55 139
DarkOrchid1   #bf3eff 191 62 255
DarkOrchid2   #b23aee 178 58 238
DarkOrchid3   #9a32cd 154 50 205
DarkOrchid4   #68228b 104 34 139
purple1   #9b30ff 155 48 255
purple2   #912cee 145 44 238
purple3   #7d26cd 125 38 205
purple4   #551a8b 85 26 139
MediumPurple1   #ab82ff 171 130 255
MediumPurple2   #9f79ee 159 121 238
MediumPurple3   #8968cd 137 104 205
MediumPurple4   #5d478b 93 71 139
thistle1   #ffe1ff 255 225 255
thistle2   #eed2ee 238 210 238
thistle3   #cdb5cd 205 181 205
thistle4   #8b7b8b 139 123 139
Теги: color, Web color, веб цвета, Палитра

Теория цвета в цифрах / Habr

Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.
Основы

Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.

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

То есть величина чисел в парах означает количество цвета, проще говоря, если все числа максимальные, то в результате будет белый цвет — #FFFFFF, если числа минимальные, нули, то цвета нет, получается черный — #000000. Если изменять каждую пару, то получается: #FF0000 — самый яркий красный, #00FF00 — самый яркий зеленый и #0000FF — самый яркий синий. Соответственно, #00FFFF — самый яркий голубой, #FF00FF — самый яркий пурпурный и #FFFF00 — самый яркий желтый.

Распознавание цвета

Шестнадцатеричный код может быть сокращен с шести символов до трех. Например цвет #FAE означает #FFAAEE. Такая возможность иногда помогает упростить код, и что важнее, легко сократить количество оттенков, если это требуется.

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

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

Можно также легко менять яркость, оттенок или насыщенность цвета, отредактировав лишь его шестнадцатеричный код. В первом примере ниже одна из пар меняется с шагом в 10%, при этом растет яркость цвета. Во втором примере яркость растет, но насыщенность падает:

Подчеркивание ссылок

По умолчанию браузеры подчеркивают гиперссылки на веб-страницах. При использовании не слишком крупных шрифтов подчеркивание может смешиваться с буквами ссылки, и выглядит такая конструкция не очень. Но можно сделать подчеркивание менее насыщенным:
  • Для темного текста на светлом фоне делаем ссылки ярче.
  • Для яркого текста на темном фоне делаем ссылки темнее.

Чтобы это работало, необходимо использовать тег span внутри каждого тега a, например:
a { text-decoration:underline;color:#aaaaff; }
a span { text-decoration:none;color:#0000ff; }

Получившиеся ссылки легче читаются, т.к. подчеркивание не смешивается с символами. Однако добавлять span в каждую ссылку не очень рационально. Поэтому можно убрать подчеркивание ссылок, но при этом добавить border-bottom:

a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

Цвета контента

Зачастую на сайтах используется один и тот же цвет для заголовков и основного текста. Но при таком подходе снижается читабельность контента: чем мельче шрифт, тем контрастнее он должен быть. Пример:
h2, p { color: #797979; }

Уменьшение первых цифр в парах hex-кода повысит контрастность текста, а значит читабельность улучшится:

h2 { color: #797979; }
p { color: #393939; }

Редактирование фона

Легко управлять фоном, изменяя hex-код цвета:
  • #404040 — нейтральный
  • #504030 — теплее
  • #304050 — холоднее

Фон страницы визуально более чувствителен к изменениям цвета, чем контент. Поэтому можно легко сделать его теплее или холоднее, корректируя и вторую цифру в парах hex-кода. Например:

  • #404040 — нейтральный
  • #594039 — теплее
  • #394059 — холоднее

Подбор и комбинирование цветов

Понимание структуры шестнадцатеричного кода цветов дает дизайнеру возможность точно подбирать комбинации цветов и выбирать цветовые схемы. Самая простая техника — это переставлять одну пару в разные места кода. Еще один способ — удвоение первой цифры в первой паре и разделение на два остальных первых цифр. Также можно комбинировать цвета, взятые из фото. Описанные способы наглядно продемонстрированы на рисунке ниже:

Использованный материал и полезное чтиво

Таблица кодировок цветов HTML . Таблица цветов CSS.  HTML safe Color Codes. «Безопасные» цвета HTML. Палитра цветов HTML

Справочно: спецсимволы HTML

Таблица цветов HTML . Таблица цветов CSS.  HTML safe Color Codes. «Безопасные» цвета HTML. Палитра цветов HTML.

Сперва брузеры не поддерживали никаких цветов, кроме 256 «безопсных»:

Цвет: Color Шестнадцатеричный код:
Hex code
(#RRGGBB)
Десятичный код:
Decimal code
(R,G,B)
HTML/CSS
цвет
#000000 rgb(0,0,0) black — черный
#000033 rgb(0,0,51)
#000066 rgb(0,0,102)
#000099 rgb(0,0,153)
#0000CC rgb(0,0,204)
#0000FF rgb(0,0,255) blue — синий
#003300 rgb(0,51,0)
#003333 rgb(0,51,51)
#003366 rgb(0,51,102)
#003399 rgb(0,51,153)
#0033CC rgb(0,51,204)
#0033FF rgb(0,51,255)
#006600 rgb(0,102,0)
#006633 rgb(0,102,51)
#006666 rgb(0,102,102)
#006699 rgb(0,102,153)
#0066CC rgb(0,102,204)
#0066FF rgb(0,102,255)
#009900 rgb(0,153,0)
#009933 rgb(0,153,51)
#009966 rgb(0,153,102)
#009999 rgb(0,153,153)
#0099CC rgb(0,153,204)
#0099FF rgb(0,153,255)
#00CC00 rgb(0,204,0)
#00CC33 rgb(0,204,51)
#00CC66 rgb(0,204,102)
#00CC99 rgb(0,204,153)
#00CCCC rgb(0,204,204)
#00CCFF rgb(0,204,255)
#00FF00 rgb(0,255,0) lime — лайм
#00FF33 rgb(0,255,51)
#00FF66 rgb(0,255,102)
#00FF99 rgb(0,255,153)
#00FFCC rgb(0,255,204)
#00FFFF rgb(0,255,255) cyan — цвет морс

Таблица html цветов. Названия и коды цветов в RGB. Палитра цветов : WEBCodius

В языках html и css, для того чтобы страницы не были серыми и однотипными, имеется возможность цветового оформления документов. Для этого обычно используют модель RGB — аббревиатура от трех английских слов — названий цветов: red (красный), green (зеленый) и blue (синий).

В html и css для обозначения цвета используются ключевые слова — названия цвета, либо шестнадцатеричный цветовой код.

Формат цветового кода html представляет из себя символ «#» и набор из шести цифр и латинских букв от A до F . Это так называемый шестнадцатеричный код, в котором, например, буква «A» соответствует десятеричному числу 10, а комбинация «FF» — десятеричному 255.

Каждый символ в шестнадцатеричном коде имеет определенное значение. Так первые два символа в коде цвета HTML обозначают насыщенность красного цвета (00 — минимальная насыщенность; FF — максимальная насыщенность). Третий и четвертый символ определяют насыщенность зеленого цвета, а пятый и шестой синего. Например, код красного цвета #FF0000, зеленого соответственно #00FF00.

Далее представлены таблицы ключевых слов — названий цветов и их шестнадцатеричных значений, которые можно использовать при разработке сайтов на языках html и css.

Таблица базовых названий цветов

Название цвета HEX Цвет
Black #000000
silver #C0C0C0
gray #808080
white #FFFFFF
maroon #800000
red #FF0000
purple #800080
fuchsia #FF00FF
green #008000
lime #00FF00
olive #808000
yellow #FFFF00
navy #000080
blue #0000FF
teal #008080
aqua #00FFFF

Расширенная таблица названий цветов

Название цвета 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

При помощи цветовых html кодов и соответствующих css свойств можно задавать цвет фона для элементов веб страницы или цвет текста.

Например, используя css свойство background и любой из цветовых кодов можно задать цвет фона страницы:

<body>

А с помощью свойства color можно управлять цветом текста любого html элемента:

<p>

На этом все! До новых встреч!

Loading…

как цвет помогает в работе с кодом / Habr

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

Во всех IDE есть такая замечательная функция, как подсветка синтаксиса. Все бы хорошо, но везде она разная и даже внутри одной среды разработки может отличаться для разных языков. Но главное то, что подсветка не помогает достаточно часто (лично мне) различать структурные компоненты, такие как методы, переменные, классы, структуры… Они, как правило, отрисовываются одним цветом и я решила подобрать свою цветовую схему, которая бы выполняла функцию дифференциации не только синтаксических элементов (как то ключевые слова), но и семантических (классы, структуры, методы и функции).Пример цветовой схемы Darkula в Android StudioПодсвечены в принципе только ключевые слова и константы


Начало концепции положила цветовая схема Ciapre для Xcode. Она изначально (да и стоит признать, сама IDE) предоставляет такое семантическое деление именно цветом. Flat цвета не режут глаза и достаточно сильно отличаются для разных типов семантических элементов.
В результате получилось примерно следующее разделение:
  • Ключевые слова — красный
  • Reference Types (классы) — желтый
  • Интерфейсы — оранжевый
  • Value Types — фиолетовый
  • Константные значения — тоже фиолетовый, но поярче
  • Методы и функции — синий (внешние, из пакетов/модулей — чуть ярче)
  • Поля и свойства типов — зеленый

После переноса в разные IDE получилось примерно следующее (да-да, я знаю первую реакцию — «что за кислятина» 🙂 ):
  • Swift (Xcode)
    В Xcode проблемы с интерфейсами (в плане разделения от классов), они считаются за reference type и тоже отображаются желтым.

  • Kotlin (Android Studio) (можно сравнить с примером выше — darkula)
    В котлине существуют разного рода квалифаеры и метки, для них тоже есть отдельный цвет

  • Java (Android Studio)

  • C# (Visual Studio)
    В шарпе есть неймспейсы, для них — отдельный цвет. Ну а еще студия огорчает тем, что нет четкого семантического разделения в настройках (поле класса, метод и т.п.). В этом мне помогает ReSharper.


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

Собственно и все 🙂

Для желающих прикладываю цветовые схемы
Хорошего и красивого кода всем!

Алгоритм генерирования цветовых палитр / Mail.ru Group corporate blog / Habr

Ищете красивую цветовую палитру для сайта? Недавно установили дома RGB-подсветку, или хотите покрасить комнату в новые цвета? Или купили клавиатуру с цветной подсветкой и хотите использовать её по полной? В какой бы ситуации вы ни оказались, наверняка постоянно настраиваете цветовые схемы.

Будучи программистом, я быстро написал несколько строк кода для генерирования случайных цветовых палитр. Сразу почуяв, что такой подход может дать не лучшие результаты, я за пару минут реализовал кнопку «перезагрузки» палитры. Мне представлялось, что для получения прекрасной схемы просто нужно немного удачи и терпения.

Я ошибался. Генерирование палитр из случайных цветов — отстой. Время от времени красивый цвет соседствует с уродливым, грязным оттенком коричневого или жёлтого. Подборки цветов получаются всегда либо слишком тёмные, либо слишком светлые и малоконтрастные, либо наборы состоят из очень похожих цветов. Нужно было придумать другое решение.

Цветовые пространства


Начнём с теории. Сегодня для классификации цветов широко используются такие цветовые пространства:
sRGB

RGB означает Red Green Blue. Так работают дисплеи: они излучают свет в трёх цветовых каналах, которые смешиваются в разной пропорции для получения всевозможных цветов. Значение в каждом канале варьируется от 0 до 255. R:0, G:0, B:0 (или #000000 в шестнадцатеричном выражении) — это чёрный цвет, а R:255, G:255, B:255 (или #ffffff) — белый.
CIE Lab

Цветовое пространство CIE Lab шире sRGB и включает в себя все цвета, воспринимаемые человеком. Оно создавалось с расчётом на универсальность восприятия. Иными словами, расстояние между цветами соответствует субъективной разнице: если значения двух цветов близки друг к другу, то и выглядят они похоже. С другой стороны, два далеко расположенных друг от друга цвета также воспринимаются как совсем непохожие. В CIE Lab для насыщенных цветов выделено больше места, чем для тёмных и светлых. К слову, для человеческого глаза очень тёмный зелёный почти неотличим от чёрного. Кроме того, это цветовое пространство трёхмерное: L означает светлоту (от 0.0 до 1.0), a и b (примерно от -1.0 до 1.0) — цветовые каналы.
HCL

Если RGB описывает, как дисплей отображает цвета, а CIE Lab — как мы их воспринимаем, то HCL — это цветовое пространство, которое ближе всего описывает то, как мы думаем о цветах. Оно тоже трёхмерное, H означает цветовой тон (hue) (от 0 до 360 градусов), С — насыщенность (chroma) и L — яркость (luminance) (оба параметра измеряются от 0,0 до 1,0).

Для вычислений рекомендую использовать CIE Lab, а для представления палитр пользователю — HCL. При желании можно преобразовать значения из этих пространств в RGB.

Разложение цветового пространства


Поскольку мне нужно было получить набор уникальных, индивидуальных цветов, сначала отбросим те, что выглядят очень похожими. Цветовое пространство будет трёхмерным, и для разделения таких низкоразмерных наборов данных прекрасно подходит алгоритм кластеризации методом k-средних. Он пытается разложить данные (в нашем случае — цветовое пространство) на k отдельных областей. И затем палитра собирается из центральных точек кластеров в этих областях. На гифке показано двумерное отображение работы алгоритма в трёхмерном пространстве CIE Lab.

Пишем код


С помощью реализованного на Go алгоритма метода k-средних задача решается всего в несколько строк кода. Сначала подготовим значения цветов в пространстве CIE Lab:
var d clusters.Observations
for l := 0.2; l <= 0.8; l += 0.05 {
    for a := -1.0; a < 1.0; a += 0.1 {
        for b := -1.0; b < 1.0; b += 0.1 {
            d = append(d, clusters.Coordinates{l, a, b})
        }
    }
}

Я уже подобрал пару параметров и ввёл определённые ограничения для генерируемых цветов. В этом примере мы выкинем цвета слишком тёмные (яркость 0,8).

Разложим только что созданное цветовое пространство:

km := kmeans.New()
clusters, _ := km.Partition(d, 8)

Функция Partition возвратит кусочки восьми кластеров. У каждого кластера есть точка Center, представляющая собой отдельный цвет в заданном пространстве. Её координаты легко можно преобразовать в шестнадцатеричное RGB-значение:
col := colorful.Lab(c.Center[0], c.Center[1], c.Center[2])
col.Clamped().Hex()

Помните, что CIE Lab шире RGB, и значит некоторые Lab-значения нельзя преобразовать в RGB. Такие значения можно с помощью Clamped преобразовать в наиболее близкие цвета RGB-пространства.

Полный код

package main

import (
    "github.com/muesli/kmeans"
    "github.com/muesli/clusters"
    colorful "github.com/lucasb-eyer/go-colorful"
)

func main() {
    // Create data points in the CIE L*a*b* color space
    // l for lightness, a & b for color channels
    var d clusters.Observations
    for l := 0.2; l <= 0.8; l += 0.05 {
        for a := -1.0; a <= 1.0; a += 0.1 {
            for b := -1.0; b <= 1.0; b += 0.1 {
                d = append(d, clusters.Coordinates{l, a, b})
            }
        }
    }

    // Partition the color space into 8 clusters
    km := kmeans.New()
    clusters, _ := km.Partition(d, 8)

    for _, c := range clusters {
        col := colorful.Lab(c.Center[0], c.Center[1], c.Center[2])
        fmt.Println("Color as Hex:", col.Clamped().Hex())
    }
}

Набор из восьми (не очень) случайных цветов, сгенерированный этим кодом:

Определяем собственное цветовое пространство


Добавим больше контроля над генерированием цветов. Мы легко можем управлять данными, используемыми для дальнейших вычислений, тем самым подбирая цветовое пространство под свои нужды. Сгенерируем пастельную палитру:
func pastel(c colorful.Color) bool {
    _, s, v := col.Hsv()
    return 0.2 <= s && s <= 0.4 && 0.7 <= v && v <= 1.0
}

for l := 0.0; l <= 1.0; l += 0.05 {
    for a := -1.0; a <= 1.0; a += 0.1 {
        for b := -1.0; b <= 1.0; b += 0.1 {
            col := colorful.Lab(l, a, b)

            if col.IsValid() && pastel(col) {
                d = append(d, clusters.Coordinates{l, a, b})
            }
        }
    }
}

Ещё одно цветовое пространство — HSV, буквы в названии означают оттенок (hue), насыщенность (saturation) и яркость (value). В этом пространстве пастельные цвета обычно имеют высокие значения яркости и низкие значения насыщенности.

Вот что получилось:

Также вы можете фильтровать цвета по их насыщенности (chroma) и яркости, чтобы получить набор «тёплых» тонов:

func warm(col colorful.Color) bool {
        _, c, l := col.Hcl()
        return 0.1 <= c && c <= 0.4 && 0.2 <= l && l <= 0.5
}

Результат:

Пакет gamut


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

Добавить комментарий

Ваш адрес email не будет опубликован.