Палитра web: Таблица «безопасных» цветов

Палитра веб цветов | 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 цвета?

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

Как известно, для создания всего многообразия цветов достаточно всего три цвета. При этом используются различные модели цветообразования. Мы рассмотрим модель 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 окно настройки цвета, можно увидеть поля, в которых отображаются десятичные коды красной, зеленой и синей составляющей, а также поле с шестнадцатеричным кодом цвета.

---

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Холод-тепло

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

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

Температура

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвета Material UI

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

Оттенок (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-х основных цветов.

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

………

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

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

# c0dfd9 # e9ece5 # b3c2bf # 3b3a36

УРОВЕНЬ По Vide Infra

# edd9c0 # c9d8c5 # a8b6bf # 7d4627

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

# dddfd4 # fae596 # 3fb0ac # 173e43

QED Group Автор: madeo

#feffff # 98dafc # daad86 # 312c32

Teye By denkwerk

# 6534ff # 62bcfa # fccdd3 # bbc4ef

Crea Carte от Dataveyes

# 16174f # 963019 # f6f1ed # 667467

Bonhomme от Bonhomme

# 262216 # 49412c # 97743a # b0a18e

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

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

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

,……..

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

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

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

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

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

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

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

………

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

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

Охлаждение

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

http://coolors.co

Стили меня

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

http://stylifyme.com

Adobe Цвет CC

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

https://color.adobe.com

Палетон

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

http://paletton.com/

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

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

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

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

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

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

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

Концепт

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

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

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

Бренд

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

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

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

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

Твои вкусы

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

No related posts.