Содержание

Палитра веб цветов | Web Color

Цвет   Код цвета 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

Вернуться на главную страницу

Безопасные веб цвета » Инструменты вебмастера

Когда было время 256-цветных мониторов применялась «безопасная палитра», конечно она применяется и сейчас. У безопасной палитры всего три главных цвета для смешивания — R G B и соответствуют значениям: 00, 33, 66, 99, CC, FF.
Вообще, цветовая палитра 6x6x6 является приоритетной при выборе цвета для фона или цвета шрифта.
Вашему вниманию представляется палитра «безопасных веб цветов», которые одинаково хорошо будут отображаться во всех браузерах и во всех оперативных системах.
Имя цвета для HTML Код для HTML R G B

Красные

IndianRed CD 5C 5C 205 92 92
LightCoral F0 80 80 240 128 128
Salmon FA 80 72 250 128 114
DarkSalmon E9 96 7A 233 150 122
LightSalmon FF A0 7A 255 160 122
Crimson DC 14 3C 220 20 60
Red FF 00 00 255 0 0
FireBrick B2 22 22 178 34 34
DarkRed 8B 00 00 139 0 0

Розовые

Pink FF C0 CB 255 192 203
LightPink FF B6 C1 255 182 193
HotPink FF 69 B4 255 105 180
DeepPink FF 14 93 255 20 147
MediumVioletRed C7 15 85 199 21 133
PaleVioletRed DB 70 93 219 112 147

Оранжевые

LightSalmon FF A0 7A 255 160 122
Coral FF 7F 50 255 127 80
Tomato FF 63 47 255 99 71
OrangeRed FF 45 00 255 69 0
DarkOrange FF 8C 00 255 140 0
Orange FF A5 00 255 165 0

Жёлтые

Gold FF D7 00 255 215 0
Yellow FF FF 00 255 255 0
LightYellow FF FF E0 255 255 224
LemonChiffon FF FA CD 255 250 205
LightGoldenrodYellow FA FA D2 250 250 210
PapayaWhip FF EF D5 255 239 213
Moccasin FF E4 B5 255 228 181
PeachPuff FF DA B9 255 218 185
PaleGoldenrod EE E8 AA 238 232 170
Khaki F0 E6 8C 240 230 140
DarkKhaki BD B7 6B 189 183 107

Фиолетовые

Lavender E6 E6 FA 230 230 250
Thistle D8 BF D8 216 191 216
Plum DD A0 DD 221 160 221
Violet EE 82 EE 238 130 238
Orchid DA 70 D6 218 112 214
Fuchsia FF 00 FF 255 0 255
Magenta FF 00 FF 255 0 255
MediumOrchid BA 55 D3 186 85 211
MediumPurple 93 70 DB 147 112 219
BlueViolet 8A 2B E2 138 43 226
DarkViolet 94 00 D3 148 0 211
DarkOrchid 99 32 CC 153 50 204
DarkMagenta 8B 00 8B 139 0 139
Purple 80 00 80 128 0 128
Indigo 4B 00 82 75 0 130
SlateBlue 6A 5A CD 106 90 205
DarkSlateBlue 48 3D 8B 72 61 139

Зелёные

GreenYellow AD FF 2F 173 255 47
Chartreuse 7F FF 00 127 255 0
LawnGreen 7C FC 00 124 252 0
Lime 00 FF 00 0 255 0
LimeGreen 32 CD 32 50 205 50
PaleGreen 98 FB 98 152 251 152
LightGreen 90 EE 90 144 238 144
MediumSpringGreen 00 FA 9A 0 250 154
SpringGreen 00 FF 7F 0 255 127
MediumSeaGreen 3C B3 71 60 179 113
SeaGreen 2E 8B 57 46 139 87
ForestGreen 22 8B 22 34 139 34
Green 00 80 00 0 128 0
DarkGreen 00 64 00 0 100 0
YellowGreen 9A CD 32 154 205 50
OliveDrab 6B 8E 23 107 142 35
Olive 80 80 00 128 128 0
DarkOliveGreen 55 6B 2F 85 107 47
MediumAquamarine 66 CD AA 102 205 170
DarkSeaGreen 8F BC 8F 143 188 143
LightSeaGreen 20 B2 AA 32 178 170
DarkCyan 00 8B 8B 0 139 139
Teal 00 80 80 0 128 128

Синие

Aqua 00 FF FF 0 255 255
Cyan 00 FF FF 0 255 255
LightCyan E0 FF FF 224 255 255
PaleTurquoise AF EE EE 175 238 238
Aquamarine 7F FF D4 127 255 212
Turquoise 40 E0 D0 64 224 208
MediumTurquoise 48 D1 CC 72 209 204
DarkTurquoise 00 CE D1 0 206 209
CadetBlue 5F 9E A0 95 158 160
SteelBlue 46 82 B4 70 130 180
LightSteelBlue B0 C4 DE 176 196 222
PowderBlue B0 E0 E6 176 224 230
LightBlue AD D8 E6 173 216 230
SkyBlue 87 CE EB 135 206 235
LightSkyBlue 87 CE FA 135 206 250
DeepSkyBlue 00 BF FF 0 191 255
DodgerBlue 1E 90 FF 30 144 255
CornflowerBlue 64 95 ED 100 149 237
MediumSlateBlue 7B 68 EE 123 104 238
RoyalBlue 41 69 E1 65 105 225
Blue 00 00 FF 0 0 255
MediumBlue 00 00 CD 0 0 205
DarkBlue 00 00 8B 0 0 139
Navy 00 00 80 0 0 128
MidnightBlue 19 19 70 25 25 112

Коричневые

Cornsilk FF F8 DC 255 248 220
BlanchedAlmond FF EB CD 255 235 205
Bisque FF E4 C4 255 228 196
NavajoWhite FF DE AD 255 222 173
Wheat F5 DE B3 245 222 179
BurlyWood DE B8 87 222 184 135
Tan D2 B4 8C 210 180 140
RosyBrown BC 8F 8F 188 143 143
SandyBrown F4 A4 60 244 164 96
Goldenrod DA A5 20 218 165 32
DarkGoldenrod B8 86 0B 184 134 11
Peru CD 85 3F 205 133 63
Chocolate D2 69 1E 210 105 30
SaddleBrown 8B 45 13 139 69 19
Sienna A0 52 2D 160 82 45
Brown A5 2A 2A 165 42 42
Maroon 80 00 00 128 0 0

Белые

White FF FF FF 255 255 255
Snow FF FA FA 255 250 250
Honeydew F0 FF F0 240 255 240
MintCream F5 FF FA 245 255 250
Azure F0 FF FF 240 255 255
AliceBlue F0 F8 FF 240 248 255
GhostWhite F8 F8 FF 248 248 255
WhiteSmoke F5 F5 F5 245 245 245
Seashell FF F5 EE 255 245 238
Beige F5 F5 DC 245 245 220
OldLace FD F5 E6 253 245 230
FloralWhite FF FA F0 255 250 240
Ivory FF FF F0 255 255 240
AntiqueWhite FA EB D7 250 235 215
Linen FA F0 E6 250 240 230
LavenderBlush FF F0 F5 255 240 245
MistyRose FF E4 E1 255 228 225

Серые

Gainsboro DC DC DC 220 220 220
LightGrey D3 D3 D3 211 211 211
Silver C0 C0 C0 192 192 192
DarkGray A9 A9 A9 169 169 169
Gray 80 80 80 128 128 128
DimGray 69 69 69 105 105 105
LightSlateGray 77 88 99 119 136 153
SlateGray 70 80 90 112 128 144
DarkSlateGray 2F 4F 4F 47 79 79
Black 00 00 00 0 0 0

Гайд по созданию цветовой палитры для сайта — статьи на Skillbox

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

Спросите, есть ли у компании логотип и визуальная айдентика. Если уже есть фирменный стиль, то для сайта следует взять цвета, которые соответствуют айдентике торговой марки или бренда, с которыми вы работаете. Нельзя делать сайт в оттенках синего, если логотип, визитки и оформление в социальных сетях — красные.

Брифование клиента. Кадр из видеоурока курса «Веб-дизайн с 0 до PRO»

 Бывает так, что фирменного стиля нет или его разрабатывают параллельно с сайтом. Тогда следует работать в паре с графическим дизайнером, который создает айдентику. Это поможет избежать разногласий и выработать единую цветовую концепцию.

В разговоре с заказчиком обращайте внимание на детали рабочего процесса, манеру вести бизнес и специфику отрасли, в которой работает компания. Вряд ли 50-летний директор сталелитейного завода, который построил бизнес в девяностых, захочет розовый логотип с вкраплениями бирюзового.

Узнайте, кто аудитория сайта. Некоторые компании, нацеленные в основном на людей старше40 лет, иногда заказывают сайты, чтобы привлечь более молодую аудиторию. Так, например, поступает Сбербанк, который создает сайты для отдельных проектов.

Сайт проекта 500 Startups Сбербанка.

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

Например, ритейлеры бытовой техники часто используют красные, желтые, оранжевые и другие яркие цвета: «М.Видео», DNS, Корпорация «Центр». При этом потребитель легко различает эти три компании между собой.

Сайт компании «М.Видео».

Компании из сферы digital, производители бытовой техники или спортивных товаров чаще используют синие цвета и их оттенки: Samsung, Dell, Twitter, Skechers.

Даже в промороликах и на презентациях Samsung в зале — синяя подсветка.

Цветовая палитра должна помогать людям выстроить связи между цветами и содержанием сайта. Для этого важно узнать, с какими цветами и картинками аудитория сайта встречается в жизни, когда использует подобные продукты. Например, пекарни, булочные используют пастельные тона: коричневый, песочный и их оттенки. У людей срабатывает прямая ассоциация. Хлеб коричневый — поджаристый — вкусный.

Сайт «Поль Бейкери».

Магазины здорового питания чаще выбирают зеленый, оранжевый и близкие к ним оттенки.

Интернет-магазин здорового питания FreshBurg.

Однако это не значит, что нужно скопировать фирменную палитру Apple или Microsoft и начать делать ноутбуки. Артемий Лебедев считает, что хороший дизайнер умеет своими работами создавать новые нейронные связи. Именно такие логотипы, сайты, продукты запоминаются лучше всего.

Разберем это на примере социальных сетей. В основном их сайты и приложения выполнены в синих, голубых тонах. Но есть как минимум три примера социальных сетей, которые разрушают привычные стереотипы — Tumblr, Instagram и Одноклассники. В отличие от других продуктов, они используют не синий цвет и его оттенки, а яркие, выделяющиеся из общей массы палитры.

Tumblr использует непривычный темный фон, а в качестве акцентных цветов — оранжево-желтый, красный и зеленый.

Главная страница Tumblr.

Instagram когда-то начинал с синих оттенков, но чтобы выделиться, сменил темно-синий цвет на оранжево-фиолетовый градиент. У «Одноклассников» всего один фирменный цвет, зато очень контрастный фону остальных социальных сетей — оранжевый. Он используется для всех кнопок и ключевых элементов интерфейса.

Иллюстрация на стартовой странице «Одноклассников» тоже выполнена в оранжевых тонах.

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

Если вы только начинаете работать в дизайне, используйте бесплатные инструменты и сервисы: Adobe Color Wheel, Coolors, Swiss Color. Они помогут составить первоначальную цветовую палитру за несколько минут и выбрать основные цвета для будущего сайта. Чтобы лучше понимать композицию и цветовые сочетания, прочитайте книгу «Искусство цвета» Иоханнеса Иттена. В ней хорошо сформулированы и описаны принципы выбора.

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

Не присылайте клиенту цветовую палитру в таком виде.

Самый эффективный способ, представить цветовую палитру — сделать UI-кит. Это документ, в котором представлены все элементы интерфейса, используемые на сайте, указаны их параметры и цвета. На основе UI-кита собираются две-три страницы сайта, подбираются фотографии или иллюстрации в тон цветовой гамме — так макет будет смотреться более полно и гармонично.

Пример UI-кита с Behance. Автор Raul Taciu.

Если вы хотите создавать приятные и лаконичные палитры для сайтов, приходите на курс «Веб-дизайн с 0 до PRO». Вы научитесь создавать контраст, управлять вниманием пользователей с помощью цвета и правильно презентовать цветовую палитру клиенту.

Курс «Веб-дизайн с 0 до PRO»

Годовой практический курс для тех, кто хочет освоить веб-дизайн с самого начала с индивидуальным наставником, сделать отличное портфолио и получить первые заказы или стажировку в студии.

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

После того как вы составили цветовую палитру, сделали одну-две страницы макета, проверьте себя по списку.

В палитре не более пяти цветов, и только один ключевой.

Для отдельных элементов добавьте вспомогательные цвета — оттенки основной палитры.

Пользуйтесь бесплатными сервисами по подбору цветовой палитры.

Adobe Color Wheel, Coolors, Swiss Color и другими — их очень много.

Вам хватает цветов в палитре.

Элементы сайта, которые выполняют разные функции, не должны быть одного цвета.

Элементы интерфейса сочетаются между собой.

Сайт не выглядит, как цветная «каша»: текст и заливка разного цвета, якорные объекты выделены одним цветом, цвет не мешает воспринимать информацию.

На сайте нет явных и грубых ошибок.

Например: красная кнопка «Купить» и зеленая кнопка «Отмена».

Подключите «Яндекс.Метрику» и Google Analytics.

Метрики покажут, насколько интерфейс сайта удобен и понятен пользователям.

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

  1. Андрей Туканов, «10 упражнений построения цветовых структур».
  2. Иоханнес Иттен, «Искусство цвета».
  3. Статья о теории цвета и влиянии цветов на психику человека на «Постнауке».
  4. Краткая история теории цвета на Awdee.
  5. Статья преподавателя Skillbox Вадима Паясу о ключевых навыках дизайнера: типографике, стиле и композиции.

Web цвета, что это — простыми словами

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

Как кодируется цвет, что такое web цвета, почему при создании сайтов нужно использовать web цвета?

Попробуем ответить на эти вопросы.

Как известно, для создания всего многообразия цветов достаточно всего три цвета. При этом используются различные модели цветообразования. Мы рассмотрим модель RGB, в которой каждый цвет образуется тремя основными цветами: красным, зеленым, синим. Каждый из этих цветов может иметь 256 градаций яркости. Эти значения могут быть записаны десятичными числами от 0 до 255, что дает 255*255*255=16777216 цветовых оттенков.

В HTML эти цвета записываются с помощью шестнадцатеричных чисел.

В шестнадцатеричной системе счисления используется основание 16 и, соответственно, 16 цифр: 0. 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Например, десятичному числу 45 соответствует шестнадцатеричное число 2D, а числу 255 – FF. Переводить числа вы можете, используя стандартный калькулятор Windows, переключив его вид в Инженерный.

Чтобы не путать эту кодировку, перед кодом цвета ставят знак «решетки» #, например, #A38E34. Первые две цифры А3 определяют красную составляющую цвета, далее, 8Е – зеленую, а пятая и шестая цифры,34 – синюю.

Большинство графических редакторов и редакторов Web-страниц отображают коды цветов в десятичном и шестнадцатеричном виде. Например, если открыть в программе Adobe Photoshop окно настройки цвета, можно увидеть поля, в которых отображаются десятичные коды красной, зеленой и синей составляющей, а также поле с шестнадцатеричным кодом цвета.

Web цвета


Для глубокого изучения программы Adobe Photoshop воспользуйтесь видеокурсом Зинаиды Лукьяновой «Фотошоп с нуля в видеоформате».


Палитра Adobe Dreamweaver также позволяет определить шестнадцатеричный код цвета.

Web цвета

Но в настройках монитора можно настроить качество цветопередачи 8 бит (256 цветов). В этом случае в разных браузерах один и тот же цвет может отображаться по разному. Это объясняется тем, что каждый браузер по-своему заменяет цвета, отсутствующие в 256-цветной палитре.

Для того, чтобы решить эту проблему, договорились использовать так называемые Web цвета. В их кодировке для каждой из трех составляющих – красной, зеленой и синей – используется шесть значений: 00 33 66 99 CC FF. Тогда получается 6*6*6=216 цветов, которые и рекомендованы для использования при создании Web-страниц.

Вернемся к окну настроек цветов в Photoshop. Если поставить галочку в поле Только Web-цвета, то цвета будут отображаться ступенчато. Останутся только 216 Web цветов.

Web цвета

Конечно, в настоящее время мало кто использует 8-битную цветопередачу. Да и современные сайты одержат высококачественную графику, профессиональные фотографии со множеством оттенков. Качество мониторов и видеокарт стремительно растет.  Поэтому понятие Web цветов становится неактуальным.

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

Адаптивная, SEO подготовленная WordPress тема

Практика И Теория Выбора Цвета В Веб-Дизайне / WAYUP

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

Теория цвета в несколько абзацев

При разработке сайта у нас есть 16,8 миллионов цветов на выбор. И все их приходится комбинировать и подбирать, а если представить, сколько вариантов таких комбинаций существует, то… это практически бесконечно. Но цвета имеют смысл. Представьте, вам дарят вашу любимую вещь. Вам приятно, вы рады. А теперь представьте, что вещь вещью, но цвет её – самый ненавистный вам. Например, оттенок смешения зеленого, желтого и серого. О, вы будете возбуждены, вы будете крепиться, но радость будет сходить «на нет».

Цвета имеют смысл. Они придают тонус, эмоционально воздействуют аналогично тому, как и шрифт имеет огромное влияние на психологию человека.

Основные цвета – главные для оттенков. Человеческий глаз воспринимает три базовых цвета: голубой, желтый и пурпурный. Любой цвет, что вы видите сейчас перед собой, состоит из комбинации этих трех, но в разных количествах яркости, оттенков и прочего. Да-да, печать полиграфии происходит в этих цветах.

В интернете, наоборот, используется RGB (красный, зеленый, синий) и его шестнадцатеричные значения.

RGB (59, 89, 145) или #3b599b – синий Facebook

RGB (0, 0, 0) или #000000 – черный

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Каждые два символа в 16-тиречном коде обозначают основной цвет: красный – 3b, зеленый – 59, синий – 9b.

Холод-тепло

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Холодные цвета привносят прохладу, подходят для зимних тематик, ночных, печальных или водных. Они несут в себе одиночество и холод, страх. Но между тем, они неагрессивны и успокаивающие.

Температура

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

Оттенки и тени

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

Например, возьмем основной цвет #8dbdd8 (светло-голубой). Ниже на изображения представлена монохромная палитра, в которой два оттенка справа и слева представляют собой результат добавления разного количества черного и белого.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Насыщенность, тон, свет

Также цвета распределяются по насыщенности, тону и светимости. Насыщение позволяет сделать цвет богаче и темнее. Когда мы говорим «светло-голубой» или «темно-зеленый» — мы имеем ввиду насыщенность.

Цветовой тон определяет отличие от основного цвета радуги (их семь). То есть, например, «зеленовато-голубой». Ни тот, ни этот, но как раз тон.

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Цветовые схемы

Если рассматривать цветовые схемы, то их всего четыре: монохромные (оттенки одного основного цвета), взаимодополняемые (из двух цветов, что находятся на противоположных сторонах цветового колеса), аналоговые (три цвета, что находятся рядом на цветовом колесе), триада или триадические (три цвета, что находятся на углах треугольника, нарисованного поверх цветового колеса).

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

Тем не менее, когда речь идет о веб-цветах, есть такая концепция, как «веб-безопасные цвета». Она появилась, когда еще дисплеи не могли передать 16 миллионов цветов. Но если есть такие безопасные цвета, зачем еще что-то нужно? Но, согласитесь, приятно знать, почему они вообще существуют и как влияют на выбор цветов в целом.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Когда помощь необходима

Если же у вас возникли затруднения проектирования еще на нулевой стадии, то идеи цветовых решений всегда можно найти в интернете. Просто посетите сайт с цветовыми палитрами и настройте его под себя, а затем соберите нужные цвета и работайте с ними в Photoshop. Например, изучайте webdesign-inspiration или awwwards, сортируйте по цветам и находите вдохновение.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Подбирает все цвета и оттенки для заданного вами цвета. Кроме того, ресурс предлагает цвета для сочетания и комбинации, монохромную палитру, аналоговую, вариации насыщения, тонов, светимости и прочего.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Позволяет не только подобрать цвет, оперируя сразу несколькими параметрами, но и затем собрать палитру по заданному цвету. В первом варианте мы создали цвет, а во втором – создали палитру и разброс цветовых оттенков и тонов.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Это одно из немногих мобильных приложений, позволяющее поработать с палитрами цветов на смартфоне или планшете. Но существует и версия для браузера РС. Особенность проекта – работа с цветом в 3D. Нам предлагают конус цветов. Каждая точка для смешивания оттенка придвигается в пределах только своего треугольника, а сам конус можно поворачивать как удобно.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Кроме того существуют и наборы готовых палитр, для Рождества, монохромные, современные, цитрусовые и прочие.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Сайт уже в течение долго времени является каталогом пользовательских цветовых схем. Как правило, в него входят цвета flat дизайна, а также многочисленные узоры, текстуры, фоны, что доступны в свободном доступе.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Цветовые палитры можно подбирать из фотографий и изображений. Мы об этом уже рассказывали и о ресурсах для этого тоже. Идея в целом интересная и весьма полезная, почитайте на досуге.

Цветовые профили

Но между тем, подбор палитры это еще полбеды. Наиболее актуальная тема в веб-дизайне –  выбор цветовых профилей. Мы немного касались этой темы ранее (ссылка в начале материала), но вот, что хотим отметить сейчас. Каждый монитор может быть откалиброван под определенный цветовой профиль. Делается это, например, в Windows 10 -> Панель управления -> Управление цветом. Соответственно, определенные цвета могут передаваться по-разному на разных мониторах.

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

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

Цвета Material UI

Google, создавая правила для material design, подробно описали и положения о цвете. Тем не менее, правила настолько просты в целом, что могут с легкостью применяться к любому интерфейсу, что и сделали их популярными.

Когда же дело доходит до выбора цвета, то конструкция Material следует стилю, аналогичному flat design.  Конструкции material для приложений и сайтов находятся в свободном доступе в интернете, и потому можно увидеть наборы цветов воочию, создать палитры и многое иное.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Если вы решаетесь работать только с набором цветов от Google, то рекомендуем протестировать оба инструмента, чтобы увидеть, как и чем они могут дополнить друг друга. Затем дополнительно можно воспользоваться ресурсом 0to255, чтобы подобрать цвета в по яркости и насыщенности.

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Заключение

Цвет в интернете в основном прост и не требуется больше, чем пары недель для понимания его основ и теорий. Но если вы решаетесь копнуть глубже в этой самой теории цвета, то вы узнаете очень и очень много сложностей, особенностей, закономерностей, влияний и способов решений. Возможно, у кого-то из вас от обилия информации «голова пойдет кругом»; кто-то решит, что «ему такое и знать незачем, ткнул пипеткой в логотип и раскрасил сайт». Но кто-то решит заглянуть в теорию еще раз, и еще; решит покопаться в «корзинке с цветами» и оттенками, решит начать экспериментировать.

Мы только надеемся, что наши материалы о цвете немного помогут вам в будущем в работе над своими проектами. Помогут найти тот простой способ понимания работы веб-цветов через практику, повторение, доверия своим глазам.

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

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

Список ресурсов для создания идеальной цветовой палитры вашего сайта

Эффективный дизайн сайта немыслим без подбора цветового решения. Осталось разобраться, как это сделать.

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

Если вы ищете возможность облегчить и ускорить работу или делаете сайт впервые, эти инструменты помогут вам найти решение.

Начнем с краткого введения в теорию цвета. 

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

На диаграмме не отражены оттенки, способные сделать цвет ярче, насыщеннее или темнее.

Оттенок (tint), насыщенность цвета регулируется добавлением белого; тень (shade), яркость — черного; тон (tone) меняется наложением коричневого.

Вооружившись этими знаниями, приступим к делу.

Читайте также: Нейромаркетинг: психология оттенков

Что такое цветовая палитра?

Цветовая палитра — это набор оттенков, которые вы будете использовать в своем проекте. С палитрой работают художники, смешивая на ней краски для создания будущей картины.

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

Например, эта палитра выглядит вполне гармонично: 

Но она не позволит выделить те или иные элементы сайта. В нашем случае цвета должны не только гармонировать, но и отличаться друг от друга более явно, чтобы посетитель сайта мог сразу увидеть призывы к действию (call-to-action), элементы меню и важную информацию.

Этот вариант мало отличается от предыдущего, но позволяет выделить нужные моменты, оставаясь при этом гармоничным.

Похожую цветовую палитру можно увидеть в действии на werkpress.com

Цвета сочетаются между собой, при этом элементы сайта прекрасно различимы и интуитивно понятно их расположение. Сразу видны призывы к действию и пункты меню.

Читайте также: Цветовые схемы и палитры. Их значение и применение в веб-дизайне

Насколько важно выбрать правильную цветовую палитру?

Институт исследований цвета (CCICOLOR) утверждает, что у большинства людей впечатление складывается за 90 секунд. Это происходит на подсознательном уровне и на 62-90% зависит от цвета.

Именно поэтому неверный выбор цвета или цветового сочетания может негативно повлиять на результат несмотря на остальные преимущества вашего проекта.

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

Но это сочетание хорошо подходит для Lamborghini: 

Мы не супермашины, мы Lamborghini

Цветовая палитра показывает, кто вы, какова ваша миссия и что можно от вас ожидать. Так, сайт Lamborghini несет сообщение о роскоши и силе.

Groupon использует другое цветовое решение. В нем много белого, а элементы бренда и конверсии выделены зеленым. 

Если вы не хотите, чтобы ваш сайт походил на фильм ужасов, стоит уделить палитре особое внимание. Она влияет на брендинг, UX и конверсию.

Ниже вы найдете 19 ресурсов, которые помогут выбрать цветовую палитру для вашего сайта.

Читайте также: Психология веб-дизайна. Как цвета, шрифты и разметка влияют на ваше настроение

Подготовка

Вам необходимо вдохновение?

1. BrandColors

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

Ищете готовую палитру?

2. ColourLovers

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

Палитра сопровождается говорящими названиями: Шторм в Уитсанди (тихоокеанский архипелаг в Коралловом море), Сумерки в Уитсанди, Остров Уитсанди

3. ColorSchemer Gallery

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

4. ColoRotate

В ColoRotate вы найдете библиотеку цветовых схем, которые можно просматривать, выбирать и изменять. Сделать собственную палитру на основе найденной поможет специальный 3D инструмент (3D color tool). Цветовую схему, созданную вами, можно сразу применить в PhotoShop или Fireworks, установив ColorRotate plugin или приложение для iPad.

Читайте также: Цвета и их значение при создании дизайна веб-сайта

В соответствии с требованиями бренда

Что, если у вас уже есть картинки, логотипы или требования бренда, которым нужно соответствовать?

1. Color Hunter

Этот сайт не так функционален, как некоторые в этом списке, но отлично решает задачу, для которой создан, — исследование конкретного цвета. Просто загрузите картинку и Color Hunter создаст на ее основе палитру. Это отличный способ достичь гармонии между изображениями и основными цветами сайта. Кроме того, здесь можно разложить цветовую схему сайта, который вам понравился.

2. Pictaculous

Pictaculous делает палитры по фото. Достаточно загрузить фотографию, чтобы получить цвета, которые с ней сочетаются. Также ресурс предложит готовые палитры, которые вам подойдут.

3. Adobe Color CC Color Wheel

Этот инструмент был известен как Adobe Kuler и предназначался для сравнения цветов. Сейчас это полноценная система по созданию палитр, позволяющая пробовать, сравнивать и сохранять цветовые комбинации. Вы можете выбрать тип палитры и создать пятицветные схемы автоматически или используя ручную настройку.

4. Paletton

Paletton ускоряет процесс создания палитры. Нужно выбрать тип схемы: моно, составные, триадные, тетрадные, родственные, родственно-контрастные. Как только вы поменяете один цвет, остальные автоматически подстроятся.

5. Color Spire

Color Spire также строит палитру на основе одного цвета. Вы выбираете исходный оттенок и получаете варианты сочетающихся с ним схем. Также можно посмотреть превью, как выбранная палитра смотрится на сайте.

6. MudCube Color Sphere

Этот плагин для Chrome помогает гармонизировать цвета, учитывать дальтонизм и идентифицировать HEX-коды. Цветовые палитры можно сразу экспортировать в Illustrator, PhotoShop и CoIRD.com.

7. Cohesive Colors

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

8. Hex Color Scheme Generator

Этот инструмент подбирает цвета, которые сочетаются с вашим. Он немного примитивнее, чем другие ресурсы в этом списке. Нужно вставить HEX-код цвета в строку или выбрать его на представленном в форме колеса спектре. Генератор выдает 3 цвета, которые подходят вашему, и сопровождает их HEX-кодами.

Читайте также: Какие 3 самых популярных цвета для оформления сайтов?

Создать свой цвет

На многих ресурсах в этом списке подразумевается, что у вас есть исходный цвет. Если нет необходимости соответствовать требованиям бренда и BrandColors не помог с выбором, можно начать с набросков.

1. The Color App

Это приложение для iOS помогает выбрать из нескольких цветов, которые размещаются рядом через небольшое расстояние, что намного удобнее градиентного представления, кругов и спектров. Большие цветовые сетки позволяют использовать весь экран (что особенно ценно для владельцев iPad Pro). В приложении можно создавать образцы цвета, находить RGB, HEX и HSLA значения и делать палитры из набросков.

3. Color

В Color от HailPixel не определиться с цветом нельзя. Вы точно поймете, что хотите и получите HEX-код оттенка.

Вы совершаете движение мышью или жестом и цвет каждый раз немного меняется. Похоже на цветовую сферу, постоянно сопровождающую цвета HEX-кодами. Если вы двигаетесь вправо и влево по экрану, будет меняться цвет, вверх и вниз — насыщенность.

Читайте также: Какие цвета лучше всего подойдут вашей посадочной странице?

Получить код цвета

Если вы увидели где-то цвет и хотите узнать его код и название, эти ресурсы для вас.

1. SpyColor

SpyColor предоставит информацию о любом цвете, включая Hex, RGB, CMYK и другие коды, и покажет целый диапазон схем для каждого оттенка, в том числе комплементарные, сплит-комплементарные, триадные, контрастные и аналоговые.

2. HTML Color Codes

HTML Color Codes находит HEX-код для цветов на изображении. Вы выбираете картинку, открываете ее для просмотра и получаете код цвета, наведя на него курсор.

Протестировать свою палитру

Создав цветовую схему, хочется удостовериться в ее эффективности.

Check my Colours

Check my Colours проверяет основные и фоновые цвета на соответствие требованиям контрастности для тех, чье цветовое восприятие имеет отклонения от нормы. Если вы хотите убедиться, что ваш сайт подходит для людей с дальтонизмом или получить работающие и интуитивно понятные цветовые сочетания с точки зрения UX, этот ресурс незаменим. Достаточно ввести адрес сайта, чтобы ознакомиться с отчетом по его внешнему виду.

Система просматривает сайт и оценивает все визуальные элементы с точки зрения зрительного представления.

Подбор изображений

Итак, цветовая палитра внедрена и отлично работает, осталось подобрать изображения, которые будут с ней сочетаться.

1. TinEye

TinEye известен как альтернатива поиску изображений Google. Он поможет найти нужную цветовую комбинацию, используя базу в более 10 000 000 изображений с Flickr. Если вы ищете картинку, соотвующую вашей палитре, это отличный легкий способ ее найти.

2. Designspiration

Здесь можно выбрать до 5 оттенков из огромной палитры и получить изображения, которые имеют похожую цветовую комбинацию и сопровождаются HEX-кодами. Картинки можно сохранить на сайте или скачать.

Заключение

Создание цветовой палитры для сайта — это ремесло на стыке искусства и науки. Эти ресурсы помогут ускорить и облегчить путь к визуальному образу, который прекрасно выглядит и эффективно работает.

Высоких вам конверсий!

По материалам: crazyegg.com.

01-06-2017

Выбор правильного сочетания для вашего сайта / Хабр

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

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

Итак, приступим к знакомству с магией цвета…

Цветовая теория: основные принципы. Умение сочетать цвета

Хорошо когда у Вас есть чувство вкуса, и Вы без проблем можете подобрать цветовую схему сайта. Не все люди могут сделать это легко. Для тех, кто не уверен, как правильно объединить цвета при создании web-сайта, я бы рекомендовал ознакомиться с основами теории цвета.

Рассмотрим цветовой круг.

Немного истории: цветовой круг изобрел Исаак Ньютон. Обосновав теорию света и цветов в 1666г. Именно она легла в основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Ньютон при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.

Цветовой круг является непременным атрибутом многих дизайнеров и художников по всему миру. Это идеальное доказательства теории, что гениальное всегда просто. Круг позволяет вам выбрать цвета, которые гармонировали бы вместе. Он состоит из 6 основных цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и дополнительных цветов.
Чтобы найти правильную цветовою схему, необходимо использовать любые два цвета друг напротив друга, любые три цвета на равном расстоянии при формировании треугольника или любой из четырех цветов, образующих прямоугольник (две пары цвета друг напротив друга). Цветовые схемы остаются правильными независимо от угла поворота.

Основные цвета
Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.

Составные цвета
Есть также три основных: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).

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

Дополнительные цвета
Дополнительные цвета расположены прямо напротив друг друга на цветовом круге: красный и зеленый, синий и оранжевый, фиолетовый и желтый. В сочетании друг с другом, они составляют разительный контраст. Такие сочетания, как правило, используются для выделения некоторых элементов на web-сайте.

Аналогичные цвета
Эти цвета расположены рядом друг с другом на цветовом круге. Они обычно смотрят очень хорошо вместе. Использование таких цветовых сочетаний вызывает чувство комфортa у посетителей Вашего сайта.

Цвета в разных культурах: символизм

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

  • Китай: цвет невесты, удачи, торжества
  • Индия: чистота
  • Южная Африка: траурные цвета
  • Восток: радость (в сочетании с белым)
  • Запад: возбуждение, любовь, страсть
  • США: рождество (с зеленым), день святого Валентина (с белым)
  • Иврит: жертва, грех
  • Япония: жизнь
  • Христианство: жертва, страсть, любовь
  • Фэн-шуй: Янь, огонь, удача, уважение, защита, живучесть, деньги, признание

Голубой

  • Европа: успокоение
  • Иран: траур, цвет неба и духовность
  • Китай: бессмертие
  • Индуизм: цвет Кришны
  • Иудаизм: святость
  • Христианство: цвет Христа
  • Католицизм: цвета одежды Марии
  • Ближний Восток: защита
  • В мире: цвет безопасности
  • Фэн-шуй: Инь, вода, спокойствие, любовь, исцеление, релаксация, доверие, приключения
  • Запад: печаль, депрессия

Желтый

  • Европа: счастье, надежда, радость, трусость в опасностях, слабость
  • Азия: цвет имперского
  • Египет: траур
  • Япония: мужество
  • Индия: торговцы
  • Буддизм: мудрость
  • Фэн-шуй: Янь, Земля, благоприятный, солнечные лучи, тепло, движение

Оранжевый

  • Европа: осень, урожай, творчество
  • Ирландия: протестанты (религиозные)
  • США: Хэллоуин (с черным), дешевые товары
  • Индуизм: шафран (персиковый оранжевый) священный цвет
  • Фэн-шуй: Янь, Земля, цели, усиливает концентрацию

Коричневый

  • Колумбия: препятствие продажам
  • Австралийские аборигены: цвета земли, торжественное охра
  • Фэн-шуй: Янь, Земля, промышленность

Зеленый

  • Япония: жизнь
  • Ислам: надежда, добродетель
  • Ирландия: символ всей страны
  • Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным)
  • США: деньги
  • Индия: Ислам
  • Фэн-шуй: Инь, дерево, исцеление, здоровье, успокаивающее

Фиолетовый

  • Таиланд: траур (вдовы)
  • Католицизм: смерть, траур, распятие
  • Фэн-шуй: Инь, цвет физического и психического исцеления

Белый

  • Европа: брак, ангелы, врачи, больница, мир
  • Япония: траур, белая гвоздика символизирует смерть
  • Китай: траур, смерть,
  • Индия: несчастья
  • Восток: похороны
  • Фэн-шуй: Янь, металл, смерть, призраки, траур, равновесие, уверенность

Черный

  • Европа: траур, похороны, смерть, бунт, спокойствие
  • Таиланд: несчастье, зло
  • Иудаизм: несчастье, зло
  • Австралийские аборигены: цвет людей
  • Фэн-шуй: Инь, вода, деньги, успех в карьере, доход, стабильность, эмоциональная защита, сила

Значение цветов

Давайте посмотрим, какие чувства может вызвать каждый цвет и посмотрим на некоторые готовые решения.
Красный

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

Терпение, мир, спокойствие, надежность, любовь, стабильность. Один из самых любимых цветов, особенно у мужчин. Это связано со стабильностью и глубиной, профессионализмом, доверием.
Желтый

Цвет, который чаще всего ассоциируется с живостью. Энергичный, дает ощущение счастья. Кроме того, он ассоциируется с любопытством, развлечением, радостью, интеллектом, осторожностью.
Оранжевый

Бодрость и творчество. Ассоциируется с дружелюбием, уверенностью, игривостью, мужеством, стойкостью.
Фиолетовый

Традиционно ассоциируется с властью, благородством и богатством. Мудрость, независимость, благородство, роскошь, честолюбие, достоинство, магия и тайны.
Зеленый

Цвет гармонии, природы, исцеления, жизни, питания и здоровья. Кроме того, часто связан с деньгами.
Коричневый

Цвет релаксации и уверенности. Коричневый означает приземленность, природу, долговечность, комфорт, надежность.
Серый

Вызывает чувство серьезности, консерватизма и традиционализма. Возбуждает ощущение чистоты и невинности.
Розовый

Выражает нежность, романтичность, женственность, пассивность, привязанность, воспитание, слабость.
Черный

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

Белый связан с чистотой, простотой, свежестью, добротой, невинностью.
Заключение

Существуют некоторые полезные советы, которые помогут Вам в выборе правильной цветовой схемы для вашего сайта. Эти маленькие советы широко используют профессиональные web-дизайнеры.
  1. Если вы хотите, чтобы текстовое содержимое, было легко читаемым, выбирайте контрастные цвета.
  2. Оптимальное количество цветов. Не делайте из Вашего сайта цирк.
  3. Используйте необходимое количество цветов. Минимальное количество цветов, может способствовать серости Вашего сайта.
  4. Если вам нужно привлечь посетителя, применяйте интенсивные цвета.
  5. Вы можете найти дополнительные цветовые схемы приобщаясь чаще к природе.

Полезные ссылки по теме:

Источник: Colors in Web Design: Choosing a right combination for your WebsiteПалитра

— Дизайнер цветовых схем

Влюблен в цвета, с 2002 года.
  1. Приложение Paletton
  2. Colorpedia
  3. О компании Paletton
  4. О компании Paletton

Paletton.com — это дизайнерский инструмент цвета, предназначенный для создания цветовых комбинаций, которые хорошо сочетаются друг с другом. Он использует классическую теорию цвета с древним художественным цветовым кругом RYB для создания цветовых палитр от одного до четырех оттенков, каждая из пяти разных оттенков.Можно выбрать различные стили предварительного просмотра, чтобы проверить и просмотреть цвета в комбинациях, доступно множество примеров, чтобы увидеть палитру, используемую в дизайне веб-сайта, дизайне пользовательского интерфейса или в произвольно нарисованном изображении. Предварительный просмотр ткани Tartan также доступен для тех, кто интересуется текстилем и дизайном интерьера.

Этот инструмент палитры использует различные цветовые модели для объединения смежных цветов и / или дополнительных цветов к основному оттенку. Выбирайте модели от монохромных до трехцветных или четырехцветных наборов цветов, с дополнением или без него (противоположный оттенок), наслаждайтесь даже режимом свободного стиля.Поиграйте с яркостью и насыщенностью палитры, выберите из предустановленных предустановок или создайте случайные палитры. Уникальный фильтр имитации зрения имитирует палитру, которую видят люди с различной слабостью зрения, дальтонизмом, различными вариантами дальтонизма (протанопия, дейтеранопия, тританопия, протаномалия, дейтераномалия, тританомалия, дисхроматопсия или ахроматопсия), а также несколько гамма-симуляций (симуляция слишком яркого дисплея или слишком темной печати), обесцвечивания, преобразования оттенков серого или веб-цветов (устаревшая палитра из 216 цветов).Палитру можно экспортировать во множество различных форматов (HTML, CSS, LESS, XML, текст, изображение PNG, палитра образцов Photoshop ACO или формат палитры GIMP GPL) для раскрашивания ваших работ. Проверьте цветовой контраст всех цветовых пар, используемых в палитре, и проверьте, соответствует ли цветовой контраст требованиям WCAG. Больше информации о цветах в Colorpedia.

Paletton является преемником предыдущего приложения Color Scheme Designer 3, которым с 2009 года пользовались почти 20 миллионов посетителей (в то время как первая версия была опубликована в 2002 году), как профессиональных дизайнеров, так и любителей, интересующихся дизайном, дизайном мобильных или настольных приложений или веб-дизайном. дизайн интерьера, мода или улучшение дома и переделки.Полная история Paletton в Colorpedia.

Javascript не обнаружен. Для этого приложения требуется Javascript.

.

Модных веб-цветовых палитр и цветовых схем и инструментов для Material Design

Несколько недель назад Matt DesLauriers @mattdesl, программист графики, работающий в Jam3, показал нам интересную разработку, выполненную на нашей платформе. Как вы уже знаете, с 2009 года Awwwards собирает информацию о наиболее примечательных веб-сайтах — что делает нас важным источником для анализа тенденций веб-дизайна.

Проект начинался как эксперимент, в то время я только изучал Node и решил посмотреть, смогу ли я очистить Awwwards для визуализации данных.

Мэтт разработал инструмент, который запрашивает каждую страницу галереи победителей Awwwards, а затем ищет в HTML все доступные метаданные, такие как название сайта, автор, дата, URL, миниатюра и т. Д. Пиксели RGB каждой миниатюры анализируются для получения приблизительного цвета палитра из 3-х основных цветов.

Color Palettes

В результате получилась блестящая визуализация данных, в которой каждый сайт представлен в виде круговой диаграммы, показывающей распределение его трех основных цветов. Визуализация была отрисована с помощью Canvas2D.Мэтт также использовал множество инструментов с открытым исходным кодом, включая Node.js, d3.js, Cheerio и Browserfy.

………

1. 20 сайтов дня с отличными цветовыми схемами

Во второй части этой статьи мы составили список цветовых палитр, которые использовались чаще всего за последние несколько месяцев. Указанный список должен включать самую последнюю SOTM.

Color Palettes

# c0dfd9 # e9ece5 # b3c2bf # 3b3a36

УРОВЕНЬ По Vide Infra Color Palettes

# edd9c0 # c9d8c5 # a8b6bf # 7d4627

Brdr.Krüger By Relax, мы хорошие ребята Color Palettes

# dddfd4 # fae596 # 3fb0ac # 173e43

QED Group Автор: madeo Color Palettes

#feffff # 98dafc # daad86 # 312c32

Teye By denkwerk Color Palettes

# 6534ff # 62bcfa # fccdd3 # bbc4ef

Crea Carte от Dataveyes Color Palettes

# 16174f # 963019 # f6f1ed # 667467

Bonhomme от Bonhomme Color Palettes

# 262216 # 49412c # 97743a # b0a18e

Хорошо рассказано Tool и Y&R NY Color Palettes

#bccbde # c2dde6 # e6e9f0 # 431c5d # e05915 # cdd422

Антон и Ирэн Автор Антон и Ирэн, Студия Олега Чулакова

,……..

2. Цвет в материальном дизайне: теория и инструменты

Как и ожидалось, в последнее время наблюдается распространение цветовых инструментов, основанных на философии материального дизайна, которую Google представила на I / O 2014. Это самая важная тенденция последнего времени, и поэтому мы составили список ресурсов. который поможет вам понять и реализовать цветовые подсказки, предоставленные нам Material Design.

Идеальная палитра: как материальный дизайн упрощает цвет

Material Design Color Guidelines: Цвет должен быть неожиданным и ярким.

Color Palettes

Цвета материалов

Color Palettes

Палитра материалов

Color Palettes

Материал UP: Цвета

Color Palettes

………

3. Полезные инструменты для создания и понимания цветовых палитр

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

Охлаждение

Coolors — это интуитивно понятное приложение, которое позволяет нам простым способом создавать цветовые комбинации, совместно использовать палитры и даже экспортировать их в различные форматы, такие как SVG, PDF или SCSS.

Color Palettes http://coolors.co

Стили меня

Stylify me предоставляет нам основы руководства по стилю сайта, включая цвета, шрифты, размеры и интервалы.

Color Palettes http://stylifyme.com

Adobe Цвет CC

Классический инструмент для создания цветовых схем с помощью цветового круга или просмотра тысяч цветовых комбинаций от сообщества Kuler.

Color Palettes https://color.adobe.com

Палетон

Инструмент дизайнера для создания цветовых комбинаций, которые хорошо сочетаются друг с другом.

Color Palettes http://paletton.com/

Цвет-Шестигранник

Color-hex — интересный инструмент, который помогает нам выбирать монохромные цвета, триадные цвета, аналогичные цвета или оттенки. Это позволяет нам визуализировать нашу палитру в различных цветовых моделях, таких как RGB, HSL, HSV и CMYK. Он также генерирует код CSS для выбранного цвета с предлагаемыми комбинациями для текстовых теней, фона и т. Д.http://www.color-hex.com/

Color Palettes http://www.color-hex.com ,

Простой выбор цвета

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

Есть способ получше!

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

Концепт

Есть ли у вашего сайта концепция? Наверное, должно. Вот несколько тщательно отобранных примеров сайтов с концепциями: Preserve, Legwork, Si Le Soleil. Посмотрите на каждый пример и попытайтесь понять, что это за концепция (подсказка: ответы внизу).

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

Ваши цвета должны соответствовать вашей концепции. Или, по крайней мере, не конфликт.

Бренд

Допустим, вы делаете сайт мемориала ветеранов Вьетнама в Вашингтоне. Это очень серьезная тема. Тон (или бренд) любого военного мемориала уважительный и серьезный, поэтому и ваш выбор цвета также должен быть таким.Яркие и веселые цвета будут казаться неуместными, точно так же, как продавец воздушных шаров рядом с мемориалом будет казаться безвкусным. Черный, белый, темные и приглушенные цвета лучше подошли бы для места военного мемориала, эти цвета были бы «фирменными».

Или, может быть, вы делаете сайт для большой компании. В этом случае у них будет четко обозначенный бренд, который упростит выбор цвета. Если вы создаете сайт для Target, вы, скорее всего, будете использовать комбинацию красного и белого, потому что красный — это большая часть их бренда.Или сайт для Ikea использовал бы их фирменные сине-желтые. Бывают случаи, когда создаваемый вами сайт настолько сильно отличается от бренда, что вы можете использовать другие несвязанные цвета. Но прежде чем делать это, убедитесь, что вы согласовали это со своим креативным директором или клиентом.

Делаете сайт для маленького клиента? В этом случае бренд не будет четко определен в руководстве по стилю. Для малого бизнеса гораздо важнее узнать, что нравится владельцам. Найдите примеры веб-сайтов, которыми они восхищаются, и спросите, что им в них нравится.

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

Твои вкусы

Это последний шаг. Если вы выбрали концепцию и знаете, что представляет собой бренд, теперь пора выяснить, что вам нравится, и сравнить это с вашей концепцией и брендом. Вы хотите, чтобы вещи, которые вам нравились, ТАКЖЕ работали с концепцией и брендом вашего сайта. Мне нравится черпать вдохновение на таких сайтах, как Mind Sparkle Mag.Или иногда я использую генератор случайных цветов. Скажем, ваша концепция «ручная работа», как в приведенном выше примере Preserve. Какие еще сайты воплощают ручную работу? Какие цвета они используют? Используются ли дополнительные цветовые схемы? Аналогичные? Я предполагаю, что многие из них будут использовать красную эстетику в теплых тонах, потому что понятие «ручная работа» — очень человечное понятие. ,