Сочетание цветов сайт: Цвета RAL – Таблица RAL CLASSIC — Все каталоги цветов RAL по CMYK и RGB с примерами — ColorScheme.Ru

15.06.2021 alexxlab

Содержание

Цвета RAL – Таблица RAL CLASSIC — Все каталоги цветов RAL по CMYK и RGB с примерами — ColorScheme.Ru

· Инструмент для подбора цветов и генерации цветовых схем ·

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

Цветовой стандарт RAL начинает свою историю с 1927 года, когда специалистами из «Управления по торговым стандартам» Германии была впервые разработана коллекция, состоящая на тот момент из 40 цветов. С тех пор палитра RAL постоянно расширяется. Компания выпускает каталоги цветов, веера, содержащие примеры красок по RAL, разрабатывает и добавляет новые образцы.

На нашем сайте имеются все три современные цветовые шкалы, таблицы RAL с раскладкой по CMYK и RGB.

Каталог RAL CLASSIC в настоящее время содержит 213 цветов, в том числе 15 перламутровых, 5 люминесцентных, и 2 железных.

Имя цвета в таблице RAL CLASSIC состоит из четырёхзначного числа в сочетании с префиксом «RAL» (например, RAL 1037). Первая цифра является кодом оттенка (1 – желтые, 2 – оранжевые, 3 – красные, 4 – фиолетовые, 5 – синие, 6 – зелёные, 7 – серые, 8 – коричневые, 9 – белые и чёрные). Остальные три цифры выбраны последовательно. Русскоязычное имя цвета (например, «солнечно-жёлтый» для RAL 1037) не является нормативным, для обозначения цвета достаточно запомнить лишь цифры.

Жёлтые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 1000 Зелёно-бежевый	10 10 50 10	0 3 40 10	#CCC58F	204 197 143
	RAL 1001 Бежевый	0 20 50 20	10 20 40 0	#D1BC8A	209 188 138
	RAL 1002 Песочно-жёлтый	0 20 60 10	3 23 60 7	#D2B773	210 183 115
	RAL 1003 Сигнальный жёлтый	5 20 90 0	0 20 100 0	#F7BA0B	247 186 11
	RAL 1004 Жёлто-золотой	5 30 100 0	0 20 100 10	#E2B007	226 176 7
	RAL 1005 Медово-жёлтый	10 30 100 0	10 20 90 0	#C89F04	200 159 4
	RAL 1006 Кукурузно-жёлтый	5 30 90 0	0 30 100 0	#E1A100	225 161 0
	RAL 1007 Нарциссово-жёлтый	0 40 100 0	0 30 100 0	#E79C00	231 156 0
	RAL 1011 Коричнево-бежевый	30 40 70 0	20 50 100 10	#AF8A54	175 138 84
	RAL 1012 Лимонно-жёлтый	10 10 90 0	10 10 100 0	#D9C022	217 192 34
	RAL 1013 Жемчужно-белый	0 5 20 10	10 10 20 0	#E9E5CE	233 229 206
	RAL 1014 Слоновая кость	0 10 40 10	10 10 30 0	#DED09F	222 208 159
	RAL 1015 Светлая слоновая кость	0 5 30 10	10 10 20 0	#EADEBD	234 222 189
	RAL 1016 Жёлтая сера	10 0 90 0	10 0 80 0	#EAF044	234 240 68
	RAL 1017 Шафраново-жёлтый	0 30 70 0	0 30 90 0	#F4B752	244 183 82
	RAL 1018 Цинково-жёлтый	0 0 80 0	0 0 90 0	#F3E03B	243 224 59
	RAL 1019 Серо-бежевый	5 20 40 40	10 20 30 0	#A4957D	164 149 125
	RAL 1020 Оливково-жёлтый	1 5 30 40	10 10 50 25	#9A9464	154 148 100
	RAL 1021 Рапсово-жёлтый	0 10 100 0	0 0 100 0	#EEC900	238 201 0
	RAL 1023 Транспортно-жёлтый	0 10 90 0	0 10 100 0	#F0CA00	240 202 0
	RAL 1024 Охра жёлтая	30 40 70 10	0 20 100 25	#B89C50	184 156 80
	RAL 1026 Флуоресцентный (Fluorescent) Люминесцентный жёлтый	0 0 100 0	0 0 100 0	#F5FF00	245 255 0
	RAL 1027 Карри жёлтый	10 20 90 40	30 30 100 0	#A38C15	163 140 21
	RAL 1028 Дынно-жёлтый	0 30 100 0	0 20 100 0	#FFAB00	255 171 0
	RAL 1032 Жёлтый ракитник	0 30 90 10	0 20 100 10	#DDB20F	221 178 15
	RAL 1033 Георгиново-жёлтый	0 30 90 0	0 30 100 0	#FAAB21	250 171 33
	RAL 1034 Пастельно-жёлтый	0 30 80 0	0 30 60 0	#EDAB56	237 171 86
	RAL 1035 Жемчужный Глянец (Pearl Gloss) Перламутрово-бежевый	16 19 33 26	20 20 33 12	#A29985	162 153 133
	RAL 1036 Жемчужный Глянец (Pearl Gloss) Перламутрово-золотой	33 46 80 18	9 36 97 28	#927549	146 117 73
	RAL 1037 Солнечно-жёлтый	0 40 100 0	0 35 90 0	#EEA205	238 162 5
Оранжевые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 2000 Жёлто-оранжевый	0 50 100 0	0 40 100 0	#DD7907	221 121 7
	RAL 2001 Красно-оранжевый	0 80 100 20	0 70 100 0	#BE4E24	190 78 36
	RAL 2002 Алый	0 90 100 10	0 80 100 0	#C63927	198 57 39
	RAL 2003 Пастельно-оранжевый	0 52 100 0	0 60 100 0	#FA842B	250 132 43
	RAL 2004 Оранжевый	0 70 100 0	0 70 100 0	#E75B12	231 91 18
	RAL 2005 Флуоресцентный (Fluorescent) Люминесцентный оранжевый	0 75 75 5	0 50 100 0	#FF2300	255 35 0
	RAL 2007 Флуоресцентный (Fluorescent) Люминесцентный ярко-оранжевый	0 50 100 0	0 20 90 0	#FFA421	255 164 33
	RAL 2008 Ярко-красно-оранжевый	0 60 100 0	0 50 100 0	#F3752C	243 117 44
	RAL 2009 Транспортный оранжевый	5 70 100 10	0 60 100 0	#E15501	225 85 1
	RAL 2010 Сигнальный оранжевый	0 70 100 10	0 60 100 0	#D4652F	212 101 47
	RAL 2011 Насыщенный оранжевый	0 55 100 0	0 40 100 0	#EC7C25	236 124 37
	RAL 2012 Лососёво-оранжевый	0 60 70 0	0 80 80 0	#DB6A50	219 106 80
	RAL 2013 Жемчужный Глянец (Pearl Gloss) Перламутрово-оранжевый	0 80 100 40	10 80 100 10	#954527	149 69 39
Красные тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 3000 Огненно-красный	0 100 100 20	0 100 90 0	#AB2524	171 37 36
	RAL 3001 Сигнальный красный	20 100 90 10	0 100 90 0	#A02128	160 33 40
	RAL 3002 Карминно-красный	10 100 90 20	0 100 90 0	#A1232B	161 35 43
	RAL 3003 Рубиново-красный	0 100 100 40	0 100 90 15	#8D1D2C	141 29 44
	RAL 3004 Пурпурно-красный	20 100 100 60	0 100 90 30	#701F29	112 31 41
	RAL 3005 Винно-красный	20 100 80 40	0 100 90 50	#5E2028	94 32 40
	RAL 3007 Чёрно-красный	60 100 70 80	50 100 90 40	#402225	64 34 37
	RAL 3009 Оксид красный	5 90 100 80	20 100 90 30	#703731	112 55 49
	RAL 3011 Коричнево-красный	20 100 100 40	0 100 90 30	#7E292C	126 41 44
	RAL 3012 Бежево-красный	5 50 50 10	20 60 50 0	#CB8D73	203 141 115
	RAL 3013 Томатно-красный	20 90 100 20	0 100 100 15	#9C322E	156 50 46
	RAL 3014 Розовый антик	0 70 30 10	10 70 40 0	#D47479	212 116 121
	RAL 3015 Светло-розовый	0 50 20 10	10 40 10 0	#E1A6AD	225 166 173
	RAL 3016 Кораллово-красный	0 90 90 20	0 90 90 10	#AC4034	172 64 52
	RAL 3017 Розовый	0 80 50 10	0 80 40 0	#D3545F	211 84 95
	RAL 3018 Клубнично-красный	5 90 70 5	0 90 100 0	#D14152	209 65 82
	RAL 3020 Транспортный красный	0 100 100 10	0 90 90 0	#C1121C	193 18 28
	RAL 3022 Лососёво-красный	0 60 70 0	0 70 60 0	#D56D56	213 109 86
	RAL 3024 Флуоресцентный (Fluorescent) Люминесцентный красный	0 80 90 0	0 70 100 0	#F70000	247 0 0
	RAL 3026 Флуоресцентный (Fluorescent) Люминесцентный ярко-красный	0 80 100 0	0 70 100 0	#FF0000	255 0 0
	RAL 3027 Малиново-красный	0 100 70 20	0 100 60 15	#B42041	180 32 65
	RAL 3028 Красный	5 100 100 0	5 100 100 0	#CB3334	203 51 52
	RAL 3031 Ориент красный	20 100 90 20	0 90 60 15	#AC323B	172 50 59
	RAL 3032 Жемчужный Глянец (Pearl Gloss) Перламутрово-рубиновый	10 100 90 50	10 100 100 30	#711521	113 21 33
	RAL 3033 Жемчужный Глянец (Pearl Gloss) Перламутрово-розовый	8 84 72 13	0 93 93 7	#B24C43	178 76 67
Фиолетовые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 4001 Красно-сиреневый	60 70 5 10	50 97 20 0	#8A5A83	138 90 131
	RAL 4002 Красно-фиолетовый	40 100 90 5	0 100 40 30	#933D50	147 61 80
	RAL 4003 Вересково-фиолетовый	10 70 10 0	7 90 0 0	#D15B8F	209 91 143
	RAL 4004 Бордово-фиолетовый	60 100 50 20	10 100 0 50	#691639	105 22 57
	RAL 4005 Сине-сиреневый	60 100 5 10	50 60 0 0	#83639D	131 99 157
	RAL 4006 Транспортный пурпурный	50 100 0 10	30 100 0 0	#992572	153 37 114
	RAL 4007 Пурпурно-фиолетовый	70 100 20 60	90 0 10 25	#4A203B	74 32 59
	RAL 4008 Сигнальный фиолетовый	60 90 0 10	30 100 0 0	#904684	144 70 132
	RAL 4009 Пастельно-фиолетовый	40 40 30 0	17 40 10 15	#A38995	163 137 149
	RAL 4010 Телемагента	10 90 30 0	0 100 0 0	#C63678	198 54 120
	RAL 4011 Жемчужный Глянец (Pearl Gloss) Перламутрово-фиолетовый	47 57 3 7	47 64 0 0	#8773A1	135 115 161
	RAL 4012 Жемчужный Глянец (Pearl Gloss) Перламутрово-ежевичный	50 50 20 23	54 57 3 26	#6B6880	107 104 128
Синие тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 5000 Фиолетово-синий	100 40 5 40	100 70 10 25	#384C70	56 76 112
	RAL 5001 Зелёно-синий	90 20 0 80	100 50 10 20	#1F4764	31 71 100
	RAL 5002 Ультрамариново-синий	100 70 0 40	100 90 0 0	#2B2C7C	43 44 124
	RAL 5003 Сапфирово-синий	100 50 0 80	90 0 10 25	#2A3756	42 55 86
	RAL 5004 Чёрно-синий	100 100 70 40	84 53 47 56	#1D1F2A	29 31 42
	RAL 5005 Сигнальный синий	100 40 0 40	90 60 0 0	#154889	21 72 137
	RAL 5007 Бриллиантово-синий	80 20 0 40	100 40 0 20	#41678D	65 103 141
	RAL 5008 Серо-синий	60 0 0 90	100 50 10 60	#313C48	49 60 72
	RAL 5009 Лазурно-синий	90 30 10 40	100 40 10 20	#2E5978	46 89 120
	RAL 5010 Горечавково-синий	100 40 5 40	100 70 0 0	#13447C	19 68 124
	RAL 5011 Стально-синий	100 60 10 80	96 46 10 40	#232C3F	35 44 63
	RAL 5012 Голубой	90 30 10 10	97 26 0 0	#3481B8	52 129 184
	RAL 5013 Кобальтово-синий	100 60 0 60	90 0 10 25	#232D53	35 45 83
	RAL 5014 Голубино-синий	50 20 0 40	64 41 11 12	#6C7C98	108 124 152
	RAL 5015 Небесно-синий	100 30 0 10	100 20 0 0	#2874B2	40 116 178
	RAL 5017 Транспортный синий	100 20 5 40	90 50 0 0	#0E518D	14 81 141
	RAL 5018 Бирюзово-синий	90 10 40 10	93 7 33 3	#21888F	33 136 143
	RAL 5019 Капри синий	100 50 20 10	100 30 0 20	#1A5784	26 87 132
	RAL 5020 Океанская синь	100 0 40 80	100 30 50 40	#0B4151	11 65 81
	RAL 5021 Водная синь	100 20 50 10	100 0 30 15	#07737A	7 115 122
	RAL 5022 Ночной синий	100 100 40 40	90 0 10 25	#2F2A5A	47 42 90
	RAL 5023 Отдалённо-синий	80 40 10 20	100 60 10 0	#4D668E	77 102 142
	RAL 5024 Пастельно-синий	70 20 10 20	63 17 7 8	#6A93B0	106 147 176
	RAL 5025 Жемчужный Глянец (Pearl Gloss) Перламутровый горечавково-синий	97 48 31 15	100 30 20 20	#296478	41 100 120
	RAL 5026 Жемчужный Глянец (Pearl Gloss) Перламутровый ночной синий	100 80 0 50	90 0 10 25	#102C54	16 44 84
Зелёные тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 6000 Патиново-зелёный	80 20 60 20	98 8 68 17	#327662	50 118 98
	RAL 6001 Изумрудно-зелёный	90 30 90 10	100 0 100 15	#28713E	40 113 62
	RAL 6002 Лиственно-зелёный	90 40 90 10	90 0 100 25	#276235	39 98 53
	RAL 6003 Оливково-зелёный	80 50 80 20	50 40 100 40	#4B573E	75 87 62
	RAL 6004 Сине-зелёный	100 50 60 40	100 30 50 40	#0E4243	14 66 67
	RAL 6005 Зелёный мох	100 60 90 20	100 20 90 30	#0F4336	15 67 54
	RAL 6006 Серо-оливковый	90 80 90 20	80 70 100 60	#40433B	64 67 59
	RAL 6007 Бутылочно-зелёный	80 50 80 60	80 60 100 60	#283424	40 52 36
	RAL 6008 Коричнево-зелёный	70 50 70 80	100 100 100 75	#35382E	53 56 46
	RAL 6009 Пихтовый зелёный	90 50 90 60	100 60 80 60	#26392F	38 57 47
	RAL 6010 Травяной зелёный	70 10 80 40	70 0 100 25	#3E753B	62 117 59
	RAL 6011 Резедово-зелёный	70 30 70 5	50 13 70 20	#66825B	102 130 91
	RAL 6012 Чёрно-зелёный	100 80 100 20	100 50 80 60	#31403D	49 64 61
	RAL 6013 Тростниково-зелёный	40 20 60 40	40 40 70 10	#797C5A	121 124 90
	RAL 6014 Жёлто-оливковый	80 50 90 60	50 70 100 50	#444337	68 67 55
	RAL 6015 Чёрно-оливковый	80 60 70 40	100 100 100 75	#3D403A	61 64 58
	RAL 6016 Бирюзово-зелёный	100 30 80 0	100 0 70 15	#026A52	2 106 82
	RAL 6017 Майский зелёный	80 20 100 10	77 0 97 0	#468641	70 134 65
	RAL 6018 Желто-зелёный	70 0 90 0	60 0 100 0	#48A43F	72 164 63
	RAL 6019 Бело-зелёный	35 0 40 0	30 0 30 0	#B7D9B1	183 217 177
	RAL 6020 Хромовый зелёный	90 60 80 20	80 40 100 50	#354733	53 71 51
	RAL 6021 Бледно-зелёный	50 10 50 10	43 13 50 7	#86A47C	134 164 124
	RAL 6022 Коричнево-оливковый	90 80 100 20	70 100 90 75	#3E3C32	62 60 50
	RAL 6024 Транспортный зелёный	90 10 80 10	90 100 70 0	#008754	0 135 84
	RAL 6025 Папоротниково-зелёный	80 30 90 10	50 10 100 25	#53753C	83 117 60
	RAL 6026 Опаловый зелёный	100 30 70 40	100 0 70 15	#005D52	0 93 82
	RAL 6027 Светло-зелёный	60 0 30 0	50 0 20 0	#81C0BB	129 192 187
	RAL 6028 Сосновый зелёный	100 60 100 0	100 30 100 40	#2D5546	45 85 70
	RAL 6029 Мятно-зелёный	100 20 100 5	100 0 100 0	#007243	0 114 67
	RAL 6032 Сигнальный зелёный	90 10 80 0	90 0 70 0	#0F8558	15 133 88
	RAL 6033 Мятно-бирюзовый	80 20 50 0	90 0 40 17	#478A84	71 138 132
	RAL 6034 Пастельно-бирюзовый	60 10 40 0	50 0 20 10	#7FB0B2	127 176 178
	RAL 6035 Жемчужный Глянец (Pearl Gloss) Перламутрово-зелёный	90 0 100 75	90 10 100 30	#1B542C	27 84 44
	RAL 6036 Жемчужный Глянец (Pearl Gloss) Перламутровый опаловый зелёный	100 10 60 50	100 10 60 30	#005D4C	0 93 76
	RAL 6037 Зелёный	90 0 100 0	90 0 100 0	#008F39	0 143 57
	RAL 6038 Флуоресцентный (Fluorescent) Люминесцентный зелёный	100 0 100 0	100 0 100 0	#00BB2E	0 187 46
Серые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 7000 Серая белка	40 10 10 40	33 6 6 36	#7E8B92	126 139 146
	RAL 7001 Серебристо-серый	10 0 0 40	20 7 7 30	#8F999F	143 153 159
	RAL 7002 Оливково-серый	30 30 50 40	37 37 57 15	#817F68	129 127 104
	RAL 7003 Серый мох	30 20 40 40	27 20 40 40	#7A7B6D	122 123 109
	RAL 7004 Сигнальный серый	0 0 0 45	7 4 4 33	#9EA0A1	158 160 161
	RAL 7005 Мышино-серый	30 10 20 60	48 42 39 20	#6B716F	107 113 111
	RAL 7006 Бежево-серый	0 10 30 60	29 43 56 35	#756F61	117 111 97
	RAL 7008 Серое хаки	30 40 70 40	10 30 90 40	#746643	116 102 67
	RAL 7009 Зелёно-серый	20 50 40 80	60 50 70 32	#5B6259	91 98 89
	RAL 7010 Брезентово-серый	20 5 30 80	60 47 50 43	#575D57	87 93 87
	RAL 7011 Железно-серый	40 10 20 80	60 40 30 30	#555D61	85 93 97
	RAL 7012 Базальтово-серый	20 0 10 80	50 20 20 40	#596163	89 97 99
	RAL 7013 Коричнево-серый	10 10 40 80	50 60 100 50	#555548	85 85 72
	RAL 7015 Сланцево-серый	40 10 10 80	80 65 33 45	#51565C	81 86 92
	RAL 7016 Антрацитово-серый	60 30 30 80	100 50 30 60	#373F43	55 63 67
	RAL 7021 Чёрно-серый	50 10 5 95	100 90 70 50	#2E3234	46 50 52
	RAL 7022 Серая умбра	30 20 40 80	80 80 100 75	#4B4D46	75 77 70
	RAL 7023 Серый бетон	40 20 40 40	50 40 40 0	#818479	129 132 121
	RAL 7024 Графитовый серый	80 60 50 40	90 60 30 60	#474A50	71 74 80
	RAL 7026 Гранитовый серый	60 20 30 80	100 40 50 60	#374447	55 68 71
	RAL 7030 Каменно-серый	20 10 20 40	0 0 10 40	#939388	147 147 136
	RAL 7031 Сине-серый	60 30 30 40	68 52 41 18	#5D6970	93 105 112
	RAL 7032 Галечный серый	0 0 20 40	0 0 10 25	#B9B9A8	185 185 168
	RAL 7033 Цементно-серый	30 10 30 40	37 13 37 30	#818979	129 137 121
	RAL 7034 Жёлто-серый	5 5 40 40	0 0 30 40	#939176	147 145 118
	RAL 7035 Светло-серый	5 0 5 20	20 14 14 0	#CBD0CC	203 208 204
	RAL 7036 Платиново-серый	10 10 10 40	30 30 20 10	#9A9697	154 150 151
	RAL 7037 Пыльно-серый	30 20 20 40	11 8 8 46	#7C7F7E	124 127 126
	RAL 7038 Агатовый серый	30 10 20 20	30 22 22 0	#B4B8B0	180 184 176
	RAL 7039 Кварцевый серый	50 40 50 40	60 60 60 0	#6B695F	107 105 95
	RAL 7040 Серое окно	20 5 10 40	30 20 10 10	#9DA3A6	157 163 166
	RAL 7042 Транспортный серый A	30 10 20 40	17 9 9 33	#8F9695	143 150 149
	RAL 7043 Транспортный серый B	30 10 20 80	87 81 74 29	#4E5451	78 84 81
	RAL 7044 Серый шёлк	0 0 15 30	10 10 10 10	#BDBDB2	189 189 178
	RAL 7045 Телегрей 1	20 10 10 40	10 0 0 40	#91969A	145 150 154
	RAL 7046 Телегрей 2	30 10 10 40	31 18 14 25	#82898E	130 137 142
	RAL 7047 Телегрей 4	0 0 5 20	0 0 0 12	#CFD0CF	207 208 207
	RAL 7048 Жемчужный Глянец (Pearl Gloss) Перламутровый мышино-серый	32 32 39 27	18 18 31 34	#888175	136 129 117
Коричневые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 8000 Зелёно-коричневый	50 50 80 10	20 40 90 25	#887142	136 113 66
	RAL 8001 Охра коричневая	40 60 90 10	10 50 100 10	#9C6B30	156 107 48
	RAL 8002 Сигнальный коричневый	60 80 80 10	20 80 100 30	#7B5141	123 81 65
	RAL 8003 Глиняный коричневый	50 70 80 10	0 60 100 40	#80542F	128 84 47
	RAL 8004 Медно-коричневый	40 80 80 10	0 70 100 25	#8F4E35	143 78 53
	RAL 8007 Олень коричневый	60 70 80 20	0 70 100 40	#6F4A2F	111 74 47
	RAL 8008 Оливково-коричневый	50 60 70 20	30 60 100 10	#6F4F28	111 79 40
	RAL 8011 Орехово-коричневый	10 60 100 80	10 90 100 50	#5A3A29	90 58 41
	RAL 8012 Красно-коричневый	5 100 100 80	0 100 100 50	#673831	103 56 49
	RAL 8014 Сепия коричневый	30 60 100 80	40 70 100 50	#49392D	73 57 45
	RAL 8015 Каштаново-коричневый	0 90 100 80	10 100 100 50	#633A34	99 58 52
	RAL 8016 Махагон коричневый	40 80 80 80	30 90 90 50	#4C2F26	76 47 38
	RAL 8017 Шоколадно-коричневый	60 80 80 80	50 100 90 60	#44322D	68 50 45
	RAL 8019 Серо-коричневый	90 90 80 80	70 100 90 75	#3F3A3A	63 58 58
	RAL 8022 Чёрно-коричневый	100 100 80 95	70 100 90 75	#211F20	33 31 32
	RAL 8023 Оранжево-коричневый	20 70 100 20	0 70 100 10	#A65E2F	166 94 47
	RAL 8024 Бежево-коричневый	30 60 70 40	0 60 100 40	#79553C	121 85 60
	RAL 8025 Бледно-коричневый	40 50 60 40	7 60 93 43	#755C49	117 92 73
	RAL 8028 Терракотовый	20 50 70 80	40 80 100 50	#4E3B2B	78 59 43
	RAL 8029 Перламутровый медный	23 80 93 43	0 80 100 40	#773C27	119 60 39
Чёрные и белые тона	Цвет RAL	CMYK (C)	CMYK (U)	HTML	RGB
	RAL 9001 Кремово-белый	0 0 10 5	0 0 10 0	#EFEBDC	239 235 220
	RAL 9002 Светло-серый	5 0 10 10	3 3 10 7	#DDDED4	221 222 212
	RAL 9003 Сигнальный белый	0 0 0 0	0 0 0 0	#F4F8F4	244 248 244
	RAL 9004 Сигнальный чёрный	100 90 100 80	100 100 100 75	#2E3032	46 48 50
	RAL 9005 Чёрный янтарь	100 100 100 95	87 65 66 58	#0A0A0D	10 10 13
	RAL 9006 Железный блеск (Iron Glimmer) Бело-алюминиевый	0 0 0 40	0 0 0 20	#A5A8A6	165 168 166
	RAL 9007 Железный блеск (Iron Glimmer) Тёмно-алюминиевый	0 0 0 60	17 14 17 29	#8F8F8C	143 143 140
	RAL 9010 Белый	0 0 5 0	0 0 7 0	#F7F9EF	247 249 239
	RAL 9011 Графитно-чёрный	100 100 100 80	90 100 97 75	#292C2F	41 44 47
	RAL 9016 Транспортный белый	3 0 0 0	0 0 0 0	#F7FBF5	247 251 245
	RAL 9017 Транспортный чёрный	100 90 100 95	87 66 66 58	#2A2D2F	42 45 47
	RAL 9018 Папирусно-белый	10 0 10 20	7 4 10 6	#CFD3CD	207 211 205
	RAL 9022 Жемчужный Глянец (Pearl Gloss) Перламутровый светло-серый	21 14 14 31	10 7 7 28	#9C9C9C	156 156 156
	RAL 9023 Жемчужный Глянец (Pearl Gloss) Перламутровый тёмно-серый	8 6 6 57	20 10 10 40	#7E8182	126 129 130

Цвет и сочетание цвета

Модные цвета Нового Года 2021 – в чем встречать? 12 тонов для успеха

Новый год 2021 имеет китайский символ металлического быка, а значит основным модным цветом будет Белоснежно-белый, а также серый, голубой, серо-зеленые оттенки.

Модные цвета осень-зима 2020-2021

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

Болотный цвет и его сочетание

Болотный – сложный оттенок. В нем переплетаются коричневые, оливковые, серые и зеленые подтоны, что так же сказывается на его значении. Как зеленый – это цвет жизни, процветания, приумножения.

Модные цвета лето 2020 и сочетания с ними

Модные цвета лета 2020 для индустрии моды от Pantone Color Institute, который специализирующейся на прогнозирование трендов и цветовых тенденций в мире

Сочетание цвета в палитрах

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

Как получить серый цвет, смешивая краски

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

Бежевый и розовый сочетание цветов

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

Модный цвет 2020 года — Классический Синий

PANTONE 19-4052 Классический Синий — это вечный и прочный тон, элегантный в своей простоте.

Бронзовый цвет и его сочетание

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

Модный цвет Нового года 2020

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

Красный и серый – сочетание цветов

Красный и серый – сочетание умеренно строгое, умеренно яркое. Со светлыми оттенками серого красный смотрится позитивно, празднично; темные же – усиливают строгость.

Модные цвета осень-зима 2019—2020 и их сочетания

Сочетание фиолетового цвета в таблице.

Фото

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

Оливковый цвет: оттенки, таблицы сочетания, подбор одежды фото

Оливковый цвет — оттенок зеленого. Некоторые его варианты можно отнести к хаки. Он создает сочные, осенние сочетания в одежде.

Теплый и холодный бежевый цвет

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

Белый и желтый сочетание

Белый и желтый сочетание легкое, солнечное. Оно может быть мягким или звонким, в зависимости от оттенка желтого.

Контраст внешности

Говоря о контрасте внешности, мы имеем ввиду выгодный контраст, и игнорируем не выгодные варианты.

Цвет лайм и его сочетание

Цвет лайма – это желто-зеленый оттенок, который соответствует мякоти цитрусового фрукта с идентичным названием.

Сочетание оранжевого цвета в таблице. Фото

Сочетание оранжевого цвета сочные, нарядные. Они в основном построены на цветовом и тепловом контрасте, так как основной тон является насыщенным, горячим цветом.

Белый и розовый — сочетание

Белый и розовый – сочетание мягкое, сладкое, как девичьи мечты или вымышленные миры.

Как подобрать гармоничную комбинацию цветов для Web-сайта

Теория цвета:

Как подобрать гармоничную комбинацию цветов для Web-сайта

Learning to Use Color on Your Web Site

автор: 2000, Element K Content LLC и Ron Wilder

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

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

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

Это синий

Во-первых, давайте разберемся в терминологии, чтобы убедиться, что вы не потеряете нить рассуждений в процессе чтения статьи. Все мы знаем, что первичными (primary) цветами являются красный, желтый и синий. Для того чтобы получить вторичные (secondary) цвета, мы смешиваем один цвет с другим. Желтый и красный дают нам оранжевый, красный и синий — пурпурный/лиловый, а синий и желтый — зеленый. А что такое третичные (tetriary) цвета? Просто берется первичный цвет и к нему добавляется соседний вторичный. Это означает, что существует шесть третичных цветов (по два цвета от каждого первичного цвета). Рис. А демонстрирует все описанные цвета во всей их красоте.

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

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

Рис. В.: собрав воедино первичные, вторичные и третичные цвета, мы получаем цветовой круг.

Подбор цветов с помощью цветового круга

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

Рис. С: на цветовом круге существует четыре возможных триады цветов

Но триадами не стоит ограничиваться. Можно выбрать и комплиментарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга — например, красный и зеленый. Они называются комплиментарными/дополняющими потому, что, будучи помещенными рядом, они делают друг друга ярче и живее, см. рис. D.

Рис. D.: цвета, противоположные друг другу на круге, называются комплиментарными/дополняющими

Различные варианты

На этом этапе мы уже можем приступить к более сложным комбинациям. Например, можно взять две пары комплиментарных цветов, что называется «двойной комплемент» (double complement). Скажем, желтый и пурпурный/лиловый, синий и оранжевый. Другой схемой является альтернативный комплемент (alternate complement), когда комбинируется триада цветов с цветом, комплиментарным одному из цветов триады. Зеленый, красно-пурпурный, красный и оранжевый — пример такой комбинации. Также существует «расщепленный комплемент» (split complement), когда берется цвет, его комплиментарный цвет и два прилегающих к нему цвета.

И наконец, вы наверное слышали о тетраде: когда берутся четыре цвета, которые расположены прямо напротив друг друга. Т.е. выбираются 1 первичный, 1 вторичный и два третичных цвета. На рис. Е. Показаны примеры вышеперечисленных схем.

Рис. Е.: эти схемы вдохнут жизнь в любой Web-сайт

Все семейство

Итак, мы перебрали все возможные комбинации контрастирующих цветов. Теперь обратимся к двум типам схем, где используются родственные цвета — монохроматической (monochromatic) и сходственной (analogous). Монохроматичный набор цветов, как свидетельствует его название, использует один цвет и все его оттенки и вариации. При правильном использовании эта схема может придать Web-сайту аккуратный, чистый вид. Сходственная схема цветов, с другой стороны использует цвета, которые расположены по соседству друг с другом на цветовом круге. Как можно судить по рисунку F. сходственная схема весьма похожа на монохроматическую.

Рис. F.: сходственная схема очень напоминает монохроматическую

Итак, все вместе

Теперь, когда мы вывалили вам на голову столько комбинаций цветов, считаем своим долгом дать несколько предостережений. Первое и самое главное: цветовые схемы, упомянутые здесь, сами по себе могут и не сработать. Вам по-прежнему придется кое-что поменять в цветах (насыщенность или яркость), чтобы они «ужились». Приведенные здесь схемы — лишь отправная точка, а не вершина мастерства. Ведь, в конечном счете, решающим фактором будет читаемость текста на Web-сайте и его внешний вид (look and feel). Чтобы увидеть, как цвета уживаются друг с другом, дизайнеры советуют воспользоваться любой графической программой, где есть функция «слои», и сравнить различные варианты схем, переключаясь между ними. Например, на рис. G, одни комбинации работают нормально, в то время как другие требуют дополнительной обработки.

Рис. G.: не всякая комбинация годится в дело

Заключение

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

Подробнее!

Теории цвета можно посвятить множество выпусков, но мы опасаемся жалоб со стороны тех, кто ее уже знает. Если вы хотите научиться большему, посетите Web-сайт Color Matters (www.colormatters.com) *. Этот сайт охватывает такие темы, как цвет и Web, цвет и изобразительное искусство, цвет и наука, и даже цвет и еда (непременно почитайте статью о синих спагетти!)

Источник: www.webmascon.com

* Статьи ресурса Color Matters (www.colormatters.com) доступны на нашем сайте в английском разделе Articles.

Facebook

Twitter

Вконтакте

Подбор гармоничных цветов | Институт непрерывного и открытого образования

Метки:

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

Цветовой круг

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

Рис. 1. Цветовой круг. А — оттенок; Б — насыщенность; В — яркость; Г — оттенок

Более удобней описать особенности цветового круга с помощью окружности, поделенной на шесть равных сегментов (рис. 2).

Рис. 2. Цветовой круг, применяемый в дизайне

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

С цветовым кругом, представленным на рис. 2, связаны следующие особенности:

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

Цветовая модель HSB

Основанная на представлении цвета человеком, модель HSB описывает цвет тремя основными характеристиками (рис. 1).

Оттенок (Hue). Оттенком называют лучи света, отраженные от объекта или прошедшим сквозь него. На цветовом круге выражается в градусах от 0° до 360°.

Насыщенность (Saturation). Обозначает видимую яркость, или интенсивность цвета. Насыщенность определяет количество серого цвета в оттенке, измеряется в процентах от 0% (серый) до 100% (полная насыщенность). На цветовом круге насыщенность показана параметром Б (рис. 1), увеличиваясь от центра круга к краям.

Яркость (Brightness). Зависит в основном от количества световых лучей, отраженных поверхностью данного цвета, что равно его яркости по отношению к другим цветам при данном освещении. Обычно измеряется в процентах от 0% (черный) до 100% (белый).

С помощью Photoshop можно изменять цвет, варьируя значениями этих параметров.

Контрастные цвета

Контрастные цвета находятся на противоположных сторонах цветового круга или отстоят друг от друга на 180° и образуют белый цвет при их смешении.

Необходимый дополнительный цвет можно построить в модели RGB или HSB. Сначала рассмотрим использование модели RGB для подбора контрастного цвета.

Использование модели RGB

1. Выбираем любой нужный цвет, к которому подберем контрастный, например, оранжевый #FFCC33 (255, 204, 51 в RGB).

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

3. В результате математических операций получаем следующие параметры: 0 (255-255), 51 (255-204) и 204 (255-51). После перевода из десятичной системы в шестнадцатеричную имеем цвет #0033CC.

Использование модели RGB неудобно и приведено лишь для примера. Более простой способ подбора контрастных цветом связан с моделью HSB.

Использование модели HSB

1. Выбираем любой нужный цвет (рис. 3), например, все тот же оранжевый #FFCC33 (45, 80, 100 в HSB).

Рис. 3. Параметры цвета в модели HSB

2. Первый параметр, обозначенный буквой H, является оттенком цвета или углом на цветовом круге. Поскольку контрастные цвета расположены на цветовом круге в 180° друг от друга, легко получить нужный цвет прибавив (или отняв) к значению оттенка число 180 (рис. 4).

Рис. 4. Изменением одного лишь параметра Hue можно получить контрастный цвет

3. Вводим значение 225 в поле оттенка (45+180) и получаем новый цвет (225, 100, 80 в HSB). Заметьте, что изменяется лишь один параметр, все остальные остаются прежними.

Замечание

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

Нюансовые сочетания

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

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

1. Выбираем любой нужный цвет (рис. 5), например, темно-синий #000080 (240, 100, 50 в HSB).

Рис. 5. Оттенки одного цвета можно получать изменяя параметры насыщенности (S) и яркости (B)

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

3. Получится следующее (рис. 6).

Рис. 6. Получение нового нюансового цвета

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

Для темного фона текст надо делать светлее, чтобы увеличить контраст для повышения его читабельности.

Еще один способ подбора нюансовых сочетаний предоставляют готовые цвета Pantone, для их выбора существует кнопка Custom, показанная на рис. 7.

Рис. 7. Кнопка для открытия цветов Pantone

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

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

Учтите, что Pantone предназначен для вывода в CMYK, поэтому некоторые цвета для вывода на монитор в нем просто отсутствуют. Цветовой охват RGB все же шире, нежели у CMYK, это следует учитывать при использовании Pantone.

Подбор трех цветов

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

Рис. 10. Гармоничные цвета расположены на цветовом круге на одинаковом расстоянии друг от друга

Рассмотрим на примере.

1. Первый цвет выбираем самостоятельно, пусть это будет темно-синий #000080 (240, 100, 50 в HSB).

2. Оттенок следующего цвета должен отстоять от первого на 120 градусов. Последнее число получилось путем деления 360° на три, поскольку оттенки, которые, как мы помним, измеряются в градусах, должны отстоять друг от друга на одинаковый угол.

3. Отнимаем от значения Hue нашего синего цвета число 120. Остальные параметры оставляем неизменными. Получаем новый цвет со значениями 120, 100, 50.

4. Еще раз отнимаем 120 у значения Hue, но уже у нового цвета. Получится 0, 100, 50.

5. В итоге имеем следующие цвета.


#000080	#008000	#800000
H: 240 S: 100 B: 50	H: 120 S: 100 B: 50	H: 0 S: 100 B: 50

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

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

Резюме

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

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

Метки:

Автор: Джон Хеджкоу

Мы привыкли думать, что у каждого цвета есть «природная» яркость и что желтый цвет — самый яркий, а пурпурный или, может быть, синий — самый темный. Всякий цвет можно осветлять, сохраняя его чистым, до известного предела. Так, тон краски сочного красного цвета — умеренно темный. Ее можно сделать светлее: разбавить белой краской и получить розовую, а можно затемнить: смешать с черной краской и получить бурую. Но в каждом случае чистота ее, или краснота, уменьшается. Желтый цвет, напротив, может быть одновременно и очень светлым, и ярким. Затемненный желтый — цвет бронзы — всегда кажется мрачным и сероватым по сравнению с глубоким синим цветом, хотя синий менее ярок. Подобные взаимоотношения хорошо видны на цветовом дереве Манселла.

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

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

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

Цвета беспрерывно меняются в цветовом круге. Кроме того, каждый цвет меняет оттенки, сливаясь в центре круга с белым цветом (рис. 1).

Рис. 1. Цветовой круг

Различные оттенки в пределах узкого цветового диапазона, взятые, допустим, из одного сектора цветового круга, хорошо сочетаются друг с другом (рис. 2). Однако необходимо сделать оговорку: небольшие участки слабых, более серых цветов выглядят неуклюже окруженные яркими цветами, например, маленькие бледно-зеленые участки в окружении изумрудно-зеленого. Сходные цвета, взятые из небольшого сектора цветового круга, гармонируют, и степень их гармоничности возрастает по мере того, как оттенки приближаются к белому цвету.

Рис. 2. Сходные цвета

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

Рис. 3. Контрастные цвета

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

Красные тона имеют также свойство «приближаться» к наблюдателю, а синие, кажется, удаляются от него. Не исключено, что это впечатление связано с той «силой», которую все народы приписывают красному цвету. А может быть, причина кроется в простом физиологическом явлении: красные лучи труднее сфокусировать, чем синие, то есть глаз вынужден в большей степени изменять кривизну хрусталика, чтобы сфокусировать красные лучи. То же самое приходится делать глазу, чтобы перевести фокус с дальних объектов на ближние, и, возможно, поэтому при одинаковом расстоянии от наблюдателя всегда кажется, что красные объекты расположены ближе, чем синие. С другой стороны, ощущение «удаленности» синих тонов возникает у нас, возможно, под влиянием того, что, когда мы смотрим на горизонт и отдаленные горы, они часто предстают перед нами в синеватой дымке — результат рассеяния синих лучей молекулами в атмосфере (рис. 4).

Рис. 4. Вечерний пейзаж

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

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

Рис. 5. Сочетание цветов между собой

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

По материалам книги: Джон Хеджкоу. Искусство цветной фотографии. Издательство «Планета», 1988

Метки:

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

Основные понятия

Всем известно, что спектр состоит из семи цветов, названия которых глубоко запали в голову еще со школы благодаря мнемоническому заклинанию «Каждый Охотник Желает Знать, Где Сидит Фазан». На рис. 1 показана полоса, полученная путем разложения луча белого света на составляющие цвета с помощью стеклянной призмы.

Рис. 1. Спектральные цвета

Цветовой круг получается, если полосу спектра приведенную на рис. 1, вообразить в виде гибкой пластины и согнуть ее в окружность (рис. 2). Хотя у круга по определению нет начала, традиционно красный цвет ориентируют на север, от него и ведут отсчет.

Рис. 2. Спектральный цветовой круг

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

Рис. 3. Упрощенный цветовой круг

Красный, зеленый и синий цвета называются основными, поскольку именно они отвечают за формирование требуемого цвета на экране монитора. На цветовом круге эти цвета максимально равноудалены друг от друга и угол между ними составляет 120 градусов (рис. 4).

Рис. 4. Основные цвета

Основные цвета входят в аддитивную цветовую модель (от add — складывать), при которой сложение всех трех цветов образует белый цвет. К такой модели относится RGB.

Замечание

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

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

Рис. 5. Комплиментарные или дополнительные цвета

Эти цвета очень важны для субстрактивной цветовой модели (от subtract — вычитать), при которой цвет формируется за счет частичного поглощения и отражения лучей света от объекта. К такой модели относится CMYK.

Основной характеристикой цветового круга является угол, он определяет нужный цвет. Отсчет угла ведется от красного цвета по часовой стрелке, диапазон значений может быть от 0 до 360 градусов или от -180 до 180 градусов (рис. 6).

Рис. 6. Угол для задания цвета

Значениям 0 и 360 градусов соответствует красный цвет, он начинает и замыкает точку отсчета. Основные и дополнительные цвета отстоят друг от друга на 60 градусов, так, для зеленого цвета угол будет равен 120 градусов, а для голубого цвета — 180.

Принципы цветового круга

С цветовым кругом связаны следующие особенности.

Цвета расположенные напротив друг друга, т.е. отстоящие на 180 градусов, являются контрастными. При их смешении в аддитивной модели получается белый цвет. К контрастным парам относят цвета желтый с синим и красный с голубым.
Контрастные цвета взаимно исключают друг друга. Если в изображении повысить уровень красного цвета, это автоматически уменьшит уровень голубого. И наоборот, если понизить уровень красного цвета, то это приведет к повышению уровня голубого.
Любой цвет получается смешиванием близлежащих к нему цветов. Так, желтый цвет образуется сложением красного и зеленого.
Поскольку каждый цвет в некотором роде является смесью других цветов, то усиление значения одного цвета в изображении автоматически приводит и к повышению уровня его составляющих, и наоборот. Например, зеленый цвет получается смешением желтого и голубого цвета. Если повысить значение зеленого цвета в изображении, то одновременно произойдет усиление и желтого с голубым. Верно и обратное, изменение желтой и голубой компоненты влияет на уровень зеленого цвета.
Каждому цвету можно противопоставить не один контрастный цвет, а пару, которая его образует. Чтобы понизить значение красного цвета, можно усилить значение голубого цвета или одновременно усилить уровень зеленого и синего, что приведет к тому же результату.

Использование цветового круга

Рассмотрим теперь, каким образом можно использовать приведенные выше принципы на практике, в частности, в графическом редакторе Photoshop. Для примера возьмем черно-белую фотографию, на ней хорошо будут заметны любые манипуляции с цветом (рис. 7).

Рис. 7. Исходная фотография

Инструмент Color Balance (Баланс цвета)

Принципы цветового круга наглядно используются при работе с инструментом Color Balance(Image > Adjustments > Color Balance…), который легко можно активизировать с помощью комбинации <Ctrl>+<B>. На рис. 8 представлен вид панели.

Рис. 8. Панель инструмента Color Balance

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

Любое изображение характеризуется такими показателями яркости, как: тени (Shadows), средние тона (Midtones) и света (Highlights). Для каждого из них можно менять свои настройки цвета в ту или иную сторону. После выставления значений цвета, приведенных на рис. 8, исходная фотография приобретает оранжевый оттенок (рис. 9).

Рис. 9. Изменение цвета в фотографии

Приведенный эффект тонирования изображения называется сепией. Оттенок оранжевого цвета получается за счет повышения в изображении красного (Red) и желтого (Yellow) цветов. При их смешении и образуется оранжевый цвет, увеличение значения компонентов дает более насыщенный цвет, чем показан на фотографии.

Инструмент Curves (Кривые)

Следующий инструмент, Curves (Image > Adjustments > Curves…, активация клавишами<Ctrl>+<M>), который активно применяется для цветокоррекции изображений, также основан на работе цветового круга, хотя и не так явно, как предыдущий инструмент.

Рис. 10. Панель инструмента Curves

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

Рис. 11. Кривая для уменьшения значения компоненты цвета

Повышение значения выходной яркости (рис. 12) приводит к усилению выбранной компоненты цвета. Таким образом, подъем или опускание кривых в разных каналах позволяет установить любой цвет в изображении.

Рис. 12. Кривая для повышения значения компоненты цвета

Резюме

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

Правила сочетания цветов

В данной статье мы собрали несколько основных схем и правил сочетания цветов.

Схема № 1. Комплиментарное сочетание

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

Схема № 2. Триада — сочетание 3 цветов

Сочетание 3 цветов, лежащих на одинаковом расстоянии друг от друга.

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

Схема № 3. Аналогичное сочетание
Сочетание от 2 до 5 цветов, расположенных рядом друг с другом на цветовом круге (в идеале — 2–3 цвета). Впечатление: спокойное, располагающее. Пример сочетания аналогичных приглушенных цветов: желто-оранжевый, желтый, желто-зеленый, зеленый, сине-зеленый.

Схема № 4. Раздельно-комплиментарное сочетание
Вариант комплиментарного сочетания цветов, только вместо противоположного цвета используются соседние для него цвета. Сочетание основного цвета и двух дополнительных. Выглядит эта схема почти настолько же контрастно, но не настолько напряженно. Если вы не уверены, что сможете правильно использовать комплиментарные сочетания, — используйте раздельно-комплиментарные.

Схема № 5. Тетрада — сочетание 4 цветов

Цветовая схема, где один цвет — основной, два — дополняющие, а еще один выделяет акценты. Пример: сине-зеленый, сине-фиолетовый, красно-оранжевый, желто-оранжевый.

Схема № 6. Квадрат

Сочетание 4 цветов, равноудаленных друг от друга. Цвета здесь несхожи по тону, но также комплиментарны. За счет этого образ будет динамичным, игривым и ярким. Пример: фиолетовый, красно-оранжевый, желтый, сине-зеленый.

Сочетания отдельных цветов

Белый: сочетается со всем. Наилучшее сочетание с синим, красным и черным.

Бежевый: с голубым, коричневым, изумрудным, черным, красным, белым.

Серый: с цветом фуксии, красным, фиолетовым, розовым, синим.

Розовый: с коричневым, белым, цветом зеленой мяты, оливковым, серым, бирюзовым, нежно-голубым.

Фуксия (темно-розовый): с серым, желто-коричневым, цветом лайма, зеленой мяты, коричневым.

Красный: с желтым, белым, бурым, зеленым, синим и черным.

Томатно-красный: голубой, цвет зеленой мяты, песчаный, сливочно-белый, серый.

Вишнево-красный: лазурный, серый, светло-оранжевый, песчаный, бледно-желтый, бежевый.

Малиново-красный: белый, черный, цвет дамасской розы.

Коричневый: ярко-голубой, кремовый, розовый, палевый, зеленый, бежевый.

Светло-коричневый: бледно-желтый, кремово-белый, синий, зеленый, пурпурный, красный.

Темно-коричневый: лимонно-желтый, голубой, цвет зеленой мяты, пурпурно-розовый, цветом лайма.

Рыжевато-коричневый: розовый, темно-коричневый, синий, зеленый, пурпурный.

Оранжевый: голубой, синий, лиловый, фиолетовый, белый, черный.

Светло-оранжевый: серый, коричневый, оливковый.

Темно-оранжевый: бледно-желтый, оливковый, коричневый, вишневый.

Желтый: синий, лиловый, светло-голубой, фиолетовый, серый, черный.

Лимонно-желтый: вишнево-красный, коричневый, синий, серый.

Бледно-желтый: цвет фуксии, серый, коричневый, оттенки красного, желтовато-коричневый, синий, пурпурный.

Золотисто-желтый: серый, коричневый, лазурный, красный, черный.

Оливковый: апельсиновый, светло-коричневый, коричневый.

Зеленый: золотисто-коричневый, оранжевый, салатный, желтый, коричневый, серый, кремовый, черный, сливочно-белый.

Салатный цвет: коричневый, желтовато-коричневый, палевый, серый, темно-синий, красный, серый.

Бирюзовый: цвет фуксии, вишнево-красный, желтый, коричневый, кремовый, темно-фиолетовый.

Голубой: красный, серый, коричневый, оранжевый, розовый, белый, желтый.

Темно-синий: светло-лиловый, голубой, желтовато-зеленый, коричневый, серый, бледно-желтый, оранжевый, зеленый, красный, белый.

Лиловый: оранжевый, розовый, темно-фиолетовый, оливковый, серый, желтый, белый.

Темно-фиолетовый: золотисто-коричневый, бледно-желтый, серый, бирюзовый, цвет зеленой мяты, светло-оранжевый.

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

А вот тут еще лет 10 назад Adobe сделал сайт для подбора цветов, ВОТ ПОПРОБУЙТЕ :

Ссылка на источник

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

Сочетание цветов в букете: варианты комбинаций во флористике

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

Понятие цветового круга

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

Понятие цветового круга появилось в середине прошлого столетия. Швейцарский художник Иоганнес Иттен отнёс три основных цвета – голубой, красный и оранжевый к двухцветной гармонии. Также он разработал трёхцветную гармонию оттенков в углах равностороннего треугольника, гармонию из 4 цветов квадрата и т. д. Его схема до сих пор пользуется популярностью для определения гармоничного сочетания тонов. Цветовой круг разделён на две части: холодную и тёплую.

К холодным оттенкам относят:

синий;
голубой;
зелёный;
все переходящие (сине-зелёный, сине-фиолетовый).

К тёплым оттенкам относят:

красный;
оранжевый;
жёлтый;
переходящие цвета.

Методы сочетания цветов во флористике

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

Контрастная палитра

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

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

Монохромная цветовая гамма

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

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

Аналогичная палитра

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

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

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

Радужная (полихроматическая) палитра

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

Разнообразна может быть не только цветовая гамма, но и размер цветков, их форма: большие и маленькие; с круглыми, овальными бутонами и т. д.

Мужские и женские цвета: в какой гамме составлять букет

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

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

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

Женщинам в возрасте лучше подобрать букет в тёмных тонах: бордовый, фиолетовый, лиловый с крупными полураскрытыми бутонами как символ мудрости и зрелости.

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

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

ТОП-40 Программ для Подбора Цвета — Plerdy

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

Содержание

WEB-ориентированные Color Picker
1. Cohesive Colors
2. Сolourco
3. Colorblender
4. Colorsontheweb
5. Webcolourdata
6. Paletton
7. Adobe Color CC
8. Colourlovers
9. Copaso
10. Colorexplorer
11. Colrd
12. Colorhexa
13. Gradients
14. Htmlcolorcodes
15. Color picker
16. Chrome Dev Tools
17. Eye Dropper
18. ColorPick Eyedropper
Десктопные color picker
19. Instant Eyedropper
20. Just Color Picker
21. Colormania
22. ColorPic
23. Pixie
24. GPick
25. Pick
26. Gcolor2
27. ColorSnapper 2
Мобильные color picker
28. iDropper: the color sampling tool
29. Pixel Picker — Image Color Picker
30. ColorAssist Lite
31. Color Mate — Convert and Analyze Colors
32. Pixolor — Live Color Picker
33. Color Grab
34. RAL простой каталог цветов
35. Color Lab
JS color picker
36. Tiny Colorpicker
37. Spectrum
38. Pick-a-Color
39. Eyecon Colorpicker
40. Farbtastic
Вывод

WEB-ориентированные Color Picker

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

1. Cohesive Colors

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

2. Сolourco

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

3. Colorblender

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

4. Colorsontheweb

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

5. Webcolourdata

Оригинальный сервис, который позволяет получить все цвета интересующего вас веб-сайта. Для примера, на главной странице указаны результаты анализа различных известных ресурсов: Facebook, Instagram, Microsoft. Для того чтобы получить анализ того сайта который нам интересен, нужно вставить его URL в соответствующее поле и, после обработки, получить результат. Кроме перечня цветов и их процентного соотношения, пользователь увидит специализированные диаграммы.

6. Paletton

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

7. Adobe Color CC

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

8. Colourlovers

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

9. Copaso

С помощью этого color picker можно создать и сохранить собственную цветовую палитру, выбрать цвет из уже существующих или воспользоваться функционалом для подбора цвета.

10. Colorexplorer

11. Colrd

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

12. Colorhexa

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

13. Gradients

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

14. Htmlcolorcodes

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

15. Color picker

Этот пункт нашего ТОПа, пожалуй, наиболее уникален. Для того чтобы получить простенький колор пикер, нужно, всего лишь, ввести в гугл ключевой запрос «color picker», после этого вам отобразится эта палитра.

16. Chrome Dev Tools

Chrome Dev Tools — это инструменты разработчика для браузера Google Chrome. Однако и в нем можно найти средство для подбора цветов. Для начала нужно вызвать инструменты разработчика. Нажмите комбинацию клавиш Ctrl + Shift + T или кликните правой кнопкой мыши по веб-сайту и в контекстном меню выберите пункт «Просмотреть код». После этого выберите элемент который вас интересует, в окне style вы сможете увидеть цвет этого элемента. Если один раз кликнуть по цвету, можно будет перейти к встроенному color picker.

17. Eye Dropper

Этот Color Picker является ничем иным как расширением для браузера Google Chrome. С его помощью можно как легко подобрать цвет из палитры, так и использовав «пипетку» узнать цвет любого элемента веб-страницы.

18. ColorPick Eyedropper

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

Десктопные color picker

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

19. Instant Eyedropper

Instant Eyedropper — это первый в нашем списке color picker разработан для настольных компьютеров под OS Windows. С его помощью можно быстро извлечь любой цвет, просмотреть его в различных форматах записи и скопировать код.

20. Just Color Picker

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

21. Colormania

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

22. ColorPic

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

23. Pixie

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

24. GPick

Первый в нашем списке color picker под операционную систему Linux. Обладает всем необходимым функционалом для подбора оттенков и цветов. Благодаря удобному графическому интерфейсу пользуется высоким спросом.

25. Pick

Этот color picker славится своим минимализмом. С работодателем Pick можно извлечь цвета с позиции курсора и сравнивать их. А также запоминать изображение с которого получаем оттенок.

26. Gcolor2

ColorSnapper 2 — это единственная программа в нашем списке под OS X. Имеет удобный интерфейс и набор горячих клавиш для максимально быстрой работы. Также с ее помощью можно подобрать цвет благодаря многофункциональной пипетке.

27. ColorSnapper 2

Мобильные color picker

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

28. iDropper: the color sampling tool

Этот color picker разработан специально под мобильную операционную систему iOS. В дополнение встроенная функция «пипетки». Также цветовой палитры, которая позволяет подобрать необходимый цвет и оттенок.

29. Pixel Picker — Image Color Picker

Данное приложение подбирает цвета на любом экране iPhone или iPad. Благодаря удобной пипетке это можно сделать максимально просто и быстро.

30. ColorAssist Lite

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

31. Color Mate — Convert and Analyze Colors

С помощью Color Mate можно как «вытянуть» цвет с помощью пипетки, так и дальнейшем модифицировать его под тот оттенок который нужен пользователю. Также можно сравнивать и искать цвета по гаммах.

32. Pixolor — Live Color Picker

Простенький color picker с помощью которого можно получить цвет из любого «экрана» вашего устройства. Имеет минималистичный интерфейс и удобную пипетку.

33. Color Grab

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

34. RAL простий каталог кольорів

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

35. Color Lab

Color Lab — это приложение для Android который имеет в себе пипетку, палитры и другие инструменты для подбора цвета. Дополнительными преимуществами продукта является возможность сохранять цвета и широкий функционал.

JS color picker

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

36. Tiny Colorpicker

Этот color picker является ничем иным как JQuery библиотекой которую можно просто встроить на свой сайт. С ее помощью можно как подобрать цвет так, и выбрать вариант с уже готовой палитры.

37. Spectrum

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

38. Pick-a-Color

С помощью этого программного продукта можно легко выбрать любой цвет. Особенностью Pick-a-Color является возможность подбора цветов не только с помощью стандартной манипуляции синим, красным и зеленым, а и другие комбинации.

39. Eyecon Colorpicker

Этот JQuery плагин помогает в подборе цветов и сравнении оттенков. Этот Color Picker похож на инструменте в Photoshop. Основным преимуществом является легкость интеграции на свой сайт.

40. Farbtastic

Последний в нашем списке JQuery плагин для подбора цвета. Работает в виде цветового круга которое разделено на секторы по оттенкам. После того как выбран нужный сектор, код цвета отображается внизу страницы.

Вывод

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

Как выбрать цветовую схему веб-сайта [2021]

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

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

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

Итак, создаете ли вы свой сайт с помощью конструктора, такого как Wix, или создаете его с помощью WordPress и такой темы, как Divi, цветовая гамма «v yeet» (как сказали бы дети) очень важна (как сказали бы взрослые) .

Какого черта вы подходите к выбору цветовой схемы своего сайта?

Ну, все начинается с вот этого поста…

Что такое цветовая схема?

Сначала краткое определение от наших друзей из Википедии (ну, они нам нравятся; они, вероятно, не знают, что мы существуем, tbh):

«В теории цвета цветовая схема — это выбор цветов, используемых в дизайне для различных материалов».

Менее формально, в стиле вики: цветовая схема (или цветовая палитра) — это набор цветов, которые вы используете на своем сайте, чтобы создать свой собственный уникальный стиль и привлечь внимание посетителей.

Типы цветовых решений

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

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

Аналог

В аналогичных цветовых схемах используются цвета, расположенные рядом друг с другом на цветовом круге (об этом мы все узнали в 1-м классе рисования — спасибо Ms.Зелвигер, надеюсь, ты наконец нашел мужа!).

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

Как ты это делаешь?

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

Монохроматический

Если вы достаточно активны в Insta или действительно увлекаетесь грамматикой / латынью, вы, вероятно, знаете, что «монохромный» означает «один цвет» — обычно черный и белый.

НО монохромные цветовые схемы технически могут быть основаны на любом одном оттенке (красный / синий / желтый и т. Д.) В сочетании с 2 или более оттенками, тонами и оттенками.

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

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

И у вас могут возникнуть проблемы с наложением элементов, таких как текст, кнопки и т. Д., Вместе.

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

триадический

В цветовых схемах веб-сайта

Triadic используются 3 цвета (которые вы знаете, знатоки грамматики, потому что латинский префикс «tri-» означает «три»), которые равномерно распределены по цветовому кругу.

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

Дополнительный

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

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

Если вы сойдете с ума от них, ваш сайт может быстро стать очень напряженным (например, не используйте зеленый текст на красном фоне; никто не любит Рождество так сильно).

Соединение

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

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

Почему важны цветовые схемы веб-сайта?

Заметили ли вы это, просматривая Insta, выполняя поиск на Amazon или бесконечно щелкая следующее видео в разделе рекомендаций Youtube, цвета имеют большое влияние на то, как мы себя чувствуем — в Интернете и в реальном мире.

Пример: наука показала, что красный и желтый увеличивают частоту сердечных сокращений.

Таким образом, выбор идеальной цветовой палитры для цветовой схемы вашего веб-сайта — это больше, чем просто «мне нравится синий» или «выглядит достаточно хорошо для меня».

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

# 1: Цвет помогает повысить узнаваемость бренда (и это важно)

Если бы вы представили себе Starbucks, что бы вы увидели?

Может быть, это те Trenta Triple Caramel Macchiato, которые вы «иногда» пьете слишком поздно вечером.

Но более вероятно, что вы видели культовый зеленый круг с причудливой рыбой внутри.

Источник: Pixabay

Трудно представить Starbucks без «Starbucks Green», и в этом-то и дело!

Этот цвет служит двум целям кофейного гиганта:

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

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

Согласно исследованию мастера интернет-маркетинга Нила Пателя:

85% покупателей считают, что цвет является основной причиной их покупки.
Цвет увеличивает узнаваемость бренда на 80% (и люди с большей вероятностью будут доверять и посещать сайты брендов, которым они доверяют).

Источник: Neil Patel

И согласно исследованию университетов Нортумбрии и Шеффилда (они находятся в старой Великобритании, поэтому они должны быть надежными … всегда доверяйте британскому акценту / исследованиям, как мы всегда говорим!), Первое впечатление от веб-сайта 94% связаны с дизайном.

И цвет, очевидно, является огромной частью веб-дизайна (вот почему мы об этом говорим!).

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

Это ключевая причина, по которой numero uno так важно иметь потрясающую цветовую схему веб-сайта.

# 2: Цвет влияет на то, как люди думают о вашем сайте

Исследование Университета Виннипега (который находится в Канаде для тех, кто следит за нашим кругосветным путешествием) выявило две важные вещи, связанные с цветовыми схемами веб-сайтов:

Люди делают свои первоначальные суждения о веб-сайте / компании / продукте в течение первых 90 секунд после первого взаимодействия.
62-90% первоначального суждения основано на цвете.

Что имеет смысл: цвет — одна из самых простых частей информации для «понимания».”

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

Итак, как использовать цвет в своих интересах, чтобы люди с большей вероятностью возвращались на ваш сайт снова и снова?

Используя силу (эхо голоса) «Психологии цвета».

Что означают цвета?

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

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

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

Но, черт возьми, как вы это делаете?

Что ж, это начинается с знания, какие чувства вызывает каждый цвет у щупалец (на этом мы остановимся, обещаем).

Вот краткое описание:

Черный

Источник: Bornfight

Чтобы не мешать тем из вас, кто помнит первый класс рисования: да, черный — это цвет; нет, черный — это не цвет.

Однако для наших целей он сосредоточен в разделе «цвет» инструментов дизайна веб-сайтов, и для нас этого достаточно.

Черный — самый сильный нейтральный цвет (включая серый, белый и коричневый), олицетворяющий силу, изысканность, роскошь и формальность.

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

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

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

Серый

Источник: Frames

Серый — еще один нейтральный цвет, который придает сайтам, использующим серый цвет, ощущение серьезности, точности, контроля и отсутствия эмоций…

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

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

Белый

Источник: Мириам Петерс.

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

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

коричневый

Источник: Хранители реки

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

Из-за этого он обычно ассоциируется с надежностью, приземленностью и надежностью.

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

Синий

Источник: Plink

Blue — это очень гибкий цвет — то, насколько светлый или темный синий вы используете, может сильно изменить его значение.

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

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

зеленый

Источник: Эслам сказал, что

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

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

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

желтый

Источник: Spread Systems Inc.

Желтый — это цвет солнечного света и счастья, и надеемся, что будущее будет светлым!

Ярко-желтый цвет особенно радует и подходит для сайтов, предназначенных для детей (или родителей).

Светло-желтые оттенки немного спокойнее самых ярких желтых, а темные / золотисто-желтые оттенки создают античный, «старинный» вид.

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

оранжевый

Источник: Emotive Feels

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

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

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

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

Красный

Источник: MOHAB

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

Эти противоположные ассоциации создают сильное эмоциональное напряжение (см. «Красный цвет может повысить частоту сердечных сокращений» выше).

Более яркие красные цвета придают цветовой гамме веб-сайта ощущение энергии, а более темные — более мощные и элегантные.

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

фиолетовый

Источник: Purple Bunny

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

Таким образом, только богатые, королевские люди могли позволить себе вещи фиолетового цвета (а теперь это цвет группы покемонов и телепузиков, лол).

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

Как люди реагируют на цвет в зависимости от пола и возраста?

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

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

Давайте посмотрим на основные моменты:

Любимые и наименее любимые цвета по полу

Источник: Нил Патель

Несколько ключевых выводов из этого:

Все любят синий, поэтому, если этот цвет передает информацию / чувства, к которым стремится ваш сайт, не бойтесь. Зеленый, красный и черный.
Все ненавидят оранжевый и коричневый, которые также ассоциируются с дешевизной, поэтому используйте их более экономно (в целом; если вы действительно любите оранжевый, сделайте это; если вы действительно любите коричневый, мы предлагаем вам переосмыслить свою жизнь).
Женщинам нравится фиолетовый, а мужчинам не очень (это 23% любимого цвета женщин, хотя ни один мужчина не сказал, что это их цвет).

И мы можем добавить к этому несколько слоев с помощью другой части той же инфографики:

Источник: Neil Patel

Что показывает нам:

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

А как насчет возраста?

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

Любимые и наименее любимые цвета по возрасту

Источник: Джо Хэллок Источник: Джо Хэллок

Выводы:

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

# 3: Хорошая цветовая палитра делает ваш сайт организованным

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

Это происходит двумя способами:

Создание визуальной иерархии

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

Это можно сделать несколькими способами (у 99Designs есть отличный пост, посвященный этим), и, как мы знаем, умные куки, как вы догадались, цвет является одним из них.

Как это работает?

Ну, все возвращается к эмоциям и нашим старым добрым глазам.

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

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

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

Использование эффекта изоляции также было показано в нескольких цветовых исследованиях (это из Университета Беркли и это из журнала Consumer Psychology), что на самом деле является тем, что люди предпочитают в цветовых схемах.

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

Создание чувства согласованности

Хорошая цветовая схема веб-сайта также создает порядок за счет согласованности.

Например, если вы используете красный цвет пожарной машины для кнопки «свяжитесь с нами» на одной странице, вы должны использовать этот же цвет для всех кнопок «свяжитесь с нами» на вашем сайте.

Или, если вы используете синий фон сетки за всеми вашими заголовками h3 (как этот пост здесь!), Вы должны использовать тот же цвет фона для всех заголовков h3 на вашем сайте.

Чувство порядка / согласованности также является фактором цветовых гармоний / типов цветовых схем, о которых мы говорили выше.

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

# 4: Выбор цветовой схемы веб-сайта упрощает проектирование

Последний в этом списке, но первый в наших сердцах, это он!

Независимо от того, создаете ли вы один веб-сайт и развиваете его с течением времени, или хотите создать несколько сайтов для себя или других людей (которые платят вам деньги!), Чем меньше времени вы тратите на основные задачи, тем лучше.

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

Особенно, если вы превратите его в причудливый документ, как это сделал Mailchimp:

Источник: Mailchimp

Теперь у них есть масса цветов в палитре, потому что у них очень сложный веб-сайт / приложение.

Однако для большинства сайтов, которые вы создадите, мы рекомендуем придерживаться всего 3-5:

1 основной цвет, используемый для наиболее важных элементов вашего сайта.
1-2 второстепенных / акцентных цвета, которые занимают немного меньше места на вашем сайте и / или используются только в нескольких элементах.
1-2 цвета фона, которые делают ваши основные и второстепенные цвета действительно яркими.

Таким образом, у вас всегда будет несколько вариантов, когда вам нужно добавить страницу или элемент на свой сайт.

Но как выбрать те 3-5 лучших?

Рад, что вы спросили!

Как выбрать цветовую схему вашего сайта

Хорошая цветовая схема веб-сайта — это та, которая находит идеальный баланс между двумя вещами:

Ценности и цель бренда / бизнеса.
Что хотят и хотят ваши посетители.

Достаточно легко сказать, как, черт возьми, это сделано?

Используете ли вы Wix или тему WordPress, такую как Divi, ответ один: 4. Легко. Шаги.

1. Знайте цель и аудиторию своего веб-сайта

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

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

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

Как определить назначение своего сайта?

У нас есть много информации об этом в нашем руководстве «Как создать веб-сайт».

Здесь ваши цели:

Определите, к какой отрасли относится ваш сайт.
Определите ценности или «личность», которые вы хотите передать на своем сайте.

Эта первая часть должна быть относительно простой, если немного подумать:

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

и т. Д.

Для второй части давайте проведем небольшое исследование, чтобы помочь вам выбрать 1-2 «личности», о которых вы хотите общаться через свой сайт.

Профессор психологии Стэнфордского университета Дженнифер Аакер — наш помощник в этом.

Она обнаружила, что индивидуальность бренда попадает в одно из пяти основных измерений:

Источник: Pinterest

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

Хотите продавать часы на сайте электронной коммерции? Выбирайте «изысканность».

Хотите поделиться советами по походам, походам, охоте и т. Д.? «Прочность» это есть!

Может быть, вы делитесь своим хобби, например, игрой на гитаре.«Искренность» может быть вам подходящей (также может быть «ВООБРАЖЕНИЕ»).

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

Как определить свою целевую аудиторию?

Что ж, если вы действительно прилежны, вам нужно провести небольшое исследование рынка!

Несколько хороших ресурсов по этому поводу:

Чтобы не тратить кучу времени на изучение того, как проводить маркетинговые исследования (и фактически делать это), вы также можете просто задать себе несколько вопросов, чтобы начать работу:

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

Какие цвета обычно лучше всего подходят для вашей отрасли?

Хороший ярлык / отправная точка для выбора цветов в палитре вашего веб-сайта — это посмотреть, что обычно используют другие веб-сайты с аналогичными целями (также известные как «в вашей отрасли»).

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

Множество визуальных эффектов из замечательных исследований, проведенных здесь другими людьми!

Во-первых, инфографика из исследования, проведенного Towergate Insurance по самым популярным цветам бренда в каждой отрасли:

Источник: Towergate Insurance

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

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

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

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

Чтобы помочь вам, у нас есть еще одна похожая инфографика от компании по маркетингу программного обеспечения Marketo:

Источник: Marketo

Там полно полезной информации, так что найдите время, чтобы ее переварить!

Наконец, вот еще один полезный отрывок из инфографики Нила Пателя о том, как цвета влияют на определенные типы покупателей:

Источник: Neil Patel

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

Вместо этого вот что он нам говорит:

Если вы планируете продавать относительно дешево, легко сказать «да» товарам на вашем сайте, более темные цвета, красные, оранжевые, синие и черные цвета — хороший выбор.
Если вы хотите привлечь внимание покупателей с ограниченным бюджетом, подойдут синие и зеленые цвета.
Если вы хотите получить продажи от «традиционных» (так называемых «пожилых») людей, вам подойдут более светлые оттенки, такие как розовый и небесно-голубой.

Теперь вы, вероятно, задаетесь вопросом: «Если я использую те же цвета, что и другие компании / веб-сайты, такие как мой, не будет ли невозможно выделиться?»

Ну, вот тут-то и нужно выбрать определенные цвета (например, зеленый морской пены в «зеленом» семействе) и составить уникальную цветовую палитру.

Что приводит нас к…

2. Выберите основной / доминирующий цвет

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

Думайте о «красном» и «Кока-кола», «зеленом» и «Старбакс», «желтом» и «Макдональдс».

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

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

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

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

Если вы не согласны с результатами викторины, извините, мы потратили ваши 2 минуты lol.

Вариант 1. Вдохновение

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

Просто посетите указанные ниже сайты, чтобы найти понравившиеся вам примеры цветовых схем:

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

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

Вариант 2. Используйте фотографию

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

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

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

Или вы можете просто использовать полный набор в качестве цветовой схемы всего вашего сайта!

Как использовать основной цвет на вашем сайте

После того, как вы выбрали основной цвет, куда, черт возьми, вы его поместите?

Определенно не по всему вашему сайту; это сделает ваш дизайн ошеломляющим.

Как правило, вы хотите использовать свой доминирующий цвет в ключевых местах, на которые хотите привлечь внимание (например, кнопки «Связаться с нами», основная информация и ваш логотип):

Источник: наш демо-сайт Wix

3. Выберите второстепенные / акцентные цвета

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

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

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

Для остальных из нас достаточно одного основного цвета плюс 1-2 второстепенных.

Как, черт возьми, вы их вычислили?

Используя упомянутые выше правила гармонии теории цвета!

Нет необходимости вытаскивать собственное цветовое колесо и транспортир (чтобы вычислить правильные углы), Adobe Color снова за нами.

Как выбрать второстепенные цвета с помощью Adobe Color

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

По умолчанию Adobe покажет вам другие цвета, используя метод «аналогичной» гармонии.

Тем не менее, для целей дизайна нашего веб-сайта мы рекомендуем вам выбрать на боковой панели триаду, Дополнительную или Составную, так как они дадут вам набор цветов, которые легче всего использовать на веб-сайте (также как «это труднее * поработайте над своим веб-дизайном, когда вы еще новичок »).

Примечание. Когда вы выбираете новое правило гармонии цветов, вам придется повторно ввести шестнадцатеричный код основного цвета.

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

То же самое можно сделать с ползунками под каждым цветом.

И вы можете щелкать по цветным полям, чтобы изменить ваш «базовый» или «основной» цвет.

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

Если вам нравится новый цвет, выберите его вместо оригинального!

По мере того, как вы играете, вам будут предоставлены 4 возможных дополнительных цвета (в дополнение к вашему основному / основному).

Вы можете использовать их все, если хотите, но если вы собираетесь придерживаться нашего правила «будь простым с 1-2 акцентными цветами», вам нужно сделать следующее: убедитесь, что ваш основной цвет находится в крайнее левое поле (вы можете перетащить его туда, если это не так), затем используйте его, средний / третий цвет и последний / пятый цвет.

2-й и 4-й цвета обычно используются для более сложных дизайнов.

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

Кстати…

Как использовать второстепенные цвета на вашем сайте

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

Он же «вещи, которые нужно выделять, но не слишком сильно».

Вот как используются акцентные цвета в примере цветовой палитры нашего веб-сайта:

Источник: наш демо-сайт Wix

4. Выберите цвет фона

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

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

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

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

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

Электронная торговля или сайт с большим количеством контента? Палка с нейтралами

Сайты, которые продают много товаров (также известные как Amazon) или в основном посвящены обмену информацией и идеями (например, блоги, подобные this ‘un‘ ere), хотят как можно больше сосредоточить внимание на этих товарах / словах.

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

Источник: Carbon

Веб-сайт, ориентированный на бизнес? Вы можете использовать оттенки вашего основного цвета

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

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

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

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

Источник: Critical Software

Собираетесь стать супер-стильным? Вы также можете использовать графику / изображения

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

Только будьте уверены в двух вещах:

Что ваш текст все еще читается.
Чтобы ваш дизайн не выглядел так, как будто из-за всех деталей вашего фона.

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

Но вы также можете использовать гармонию «Оттенки» в цвете Adobe, чтобы найти либо нейтральные цветовые оттенки, либо оттенки вашего основного цвета, чтобы наложить их на ваши изображения и сделать их более приглушенными (вы можете добавлять наложения к самим изображениям в Photoshop или в конструктор вашего сайта / WordPress).

Источник: Maman Corp.

Примеры цветовой схемы веб-сайта

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

Вот где появляется немного вдохновения из великолепных дизайнов!

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

Многие из этих сайтов специально созданы командами профессиональных веб-дизайнеров, но если вы найдете то, что вам нравится в одном, и захотите воспроизвести их на своем собственном сайте, лучше всего будет использовать конструктор сайтов, такой как Wix, или, если вы собираемся использовать WordPress, используя конструктор тем WP с перетаскиванием, такой как Divi.

Любой из них позволит вам чертовски близко подойти ко всему, что вы видите ниже — без необходимости изучать код!

1. Веселая и игривая

Источник: Flatiron Collective

# b200f8 # ff4247 # ffdb6c # 00545a # 002835

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

2. Прочный и гладкий

Источник: Martell

# 8a211b # b3925f # f0cd95 # 001446 # eaeae2

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

3. Корпоративный и творческий

Источник: NetNation

# e9467d # 113b77 # 2565c7 # 4bb3f0 # e9e9f3

NetNation представляет дизайн веб-сайта в корпоративном стиле с использованием нескольких оттенков синего — цвета, который вызывает доверие и профессионализм у зрителей.Пурпурный цвет, который вы видите в иконках, добавляет игривости самому корпоративному дизайну.

И другие графические элементы создают контраст, который разбивает в основном синюю палитру.

4. Естественный и очаровательный

Источник: New York Times

# fdc3b7 # f3d982 # a7dac9 # 5178b1 # e7f4fd

Пастельные, землистые цвета создают игривый, естественный и несколько очаровательный вид, который напрямую соответствует основной миссии компании.Эта целевая страница на веб-сайте New York Times, эта компания довольно творчески использует цвета своего бренда на всей странице.

5. Яркий и энергичный

Источник: Open

#eeeeee # cc5245 # 58a9a5 # f3d33b # 231f20

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

6. Мощный и сбалансированный

Источник: Slack

# 4A174B # 5BB77E # 56C6F0 # E1405A # ECB230

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

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

Благодаря ярким цветовым акцентам Slack отлично привлекает зрителя с помощью теории цвета.

7. Смелый и счастливый

Источник: Счастливый герой

#FFFFFF # 000000 # E93F33 # FEE533 # 4F5CD6

Обладая сильным дизайном в стиле комиксов 1950-х годов, Happy Hero выбрала для своего веб-сайта смелые цвета, в том числе желтый подсолнух, красный пожарный и синий тихоокеанский. Их цель — распространять счастье, и их дизайн хорошо отражает эту миссию.

8. Успокаивающий и земной

Источник: Титя Рави

#BEBDAA # F6EEE2 # D4D8CE # B29578 # 000000

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

Земляные тона, которые она использует, напоминают натуральные материалы, которые она использует в своих украшениях.

9. Чистота и пузырьки

Источник: УМАН

# E94734 # 334F6E #FFFFFF # F8F8F8 # F9DFDB

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

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

10. Яркая и игривая

Источник: Whoa Mama

# 7a00f8 # ff003e # f39190 # f3e513 # 00bfd2

Whoa, Mama — подходящее название для цветовой палитры, представленной на этом сайте. Яркий и игривый, наполненный тоннами цифрового искусства 90-х, Whoa Mama является ярким примером правильного брендинга.

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

11. Приглашение и доверие

Источник: NU

# 56909a # b3d2d7 # aeaf71 # 717b44 # df8956

NU — уникальный проект с уникальной целью, на своем веб-сайте он использует не менее уникальную цветовую палитру. Многие целевые проекты используют более мягкую цветовую палитру, чтобы казаться привлекательными и ориентированными на миссию, и NU не исключение.

Эта составная цветовая палитра состоит из темно-синего, летнего небесно-голубого, оливково-зеленого, нежно-зеленого и загорелого оранжевого.

12. Творческий и профессиональный

Источник: #raiseyourwebsite

# 455799 # 5f7add # af6ac6 # f09686 # f7be3e

Raise Your Website — это инструмент для онлайн-тестирования веб-сайтов, и на его веб-сайте представлена креативная цветовая палитра, в которой используется уникальная комбинация двух дополняющих друг друга синего, а также пурпурного, персиково-оранжевого и желтого заката.

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

13. Профессиональный и привлекательный

Источник: Access IS

# 155799 # 1d76d1 # 0f7ce0 # 53c3f6 # e9f2fe

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

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

14. Энергичный и игривый

Источник: Spotify

# e85db6 # ea5467 # f2af37 # cdf564 # 6fd862

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

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

15. Мудрый и просветляющий

Источник: Общество Ронинов

# ead6b7 # cba978 # 9ea3a9 # 14222d # e34234

Как финансовая консультационная служба, The Ronin Society выделяется среди других игроков отрасли уникальными концепциями веб-дизайна в стиле сепии, используемыми для создания доверительного и профессионального внешнего вида бренда.

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

16. Привычный и футуристический

Источник: Psych X86

# 050c3f # 6474b9 # 4a2c96 # 9b75c5 # 70edf0

«Psych» — компания, занимающаяся цифровыми решениями, поэтому их футуристическая цветовая палитра — хороший выбор, с глубокими синими и фиолетовыми оттенками, представленными на всем сайте. Яркий бирюзовый акцентный цвет разбивает в основном темные тона, создавая футуристическую атмосферу, которая отчасти знакома.

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

17. Земляной и дополнительный

Источник: Care

# 333333 # a5502f # e36f30 # f2bf20 # 4b7803

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

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

18. Спокойствие и собранность

Источник: Slumber

# deba93 # 081521 # 001f33 # 23628b # 53b5c1

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

19. Острый и винтажный

Источник: Mountain Man # e3d279 # 9faf8b # efb48d # c96346 # 414042

Инди-поп-группа Mountain Man не теряет времени даром, показывая миру, кто они такие.

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

20. Тепло и утешительно

Источник: Cowboy

#fffafd # fcf3f7 # f8dbe3 # e94363 # 131414

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

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

21. Простой, напористый, исторический

Источник: 100 лет

# b63232 # fbf3e4 # 397e77 # cf633d # f7c156

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

22. Богатый, изысканный, художественный

Источник: Abele Interiors

# f9f5ef # c19a5b # 1f1f1f

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

23. Профессиональный, мощный, надежный

Источник: Awink

# 48aee3 # 3181b2 # 212221 #ffffff

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

24. Острый, фанковый, живой

Источник: Beans Agency

# fdeaa4 # f9ca46 # f8eff1 # f9dcd9 # d78576 # dee8fa # 1c2042 # badbe5

Брендовое агентство, известное как Beans, создает привлекательную и соблазнительную эстетику для всех, кто посещает их сайт.Смелый и богатый спектр цветов, таких как медово-желтый плащ, золото Курникова, рассвет и розовая азалия, розовое золото и три оттенка прибрежного синего, делают его зрелищем для больных глаз (получить его? Сайт / взгляд). В любом случае, эта цветовая схема была тщательно продумана и позаимствована у настоящего творческого гения, поэтому она была обязательной для нашего списка!

25. Веселые, кокетливые и полные жизни

Источник: Damn Good Beauty

#cfdaeb # b9a3c8 # f9daf0 # f7e79c # c2c2c0

Damn Good Beauty использует цветовую схему, которая привлекает посетителей и демонстрирует свою продукцию с некоторой игривостью, смешанной с небольшой искрой.С цветовой схемой, состоящей в основном из пастелей, вы можете сказать, что Damn Good Beauty работает немного иначе, чем другие косметические компании и компании по уходу за кожей на рынке. Пастели светлые и воздушные, что означает, что их косметика такая же. Это отличный пример того, как цвета могут быть использованы для усиления бренда и точного объяснения покупателям, что это за продукт.

26. Богатый, современный, изысканный

Источник: Earls

# 619481 # 85714d # 0f344a # 3f4751

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

27. Виртуозный, Креативный, Продвинутый

Источник: Etiya

# 242441 # dd782f # f4f4f4 # 816359 # a25a2b

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

28. Цифровой, необычный и инновационный

Источник: Fiddle

# a872ee # f6b841 # 080b13 # ee9572 # d0d8e8 # eb6678

Fiddle Digital использует яркий и нетрадиционный фиолетовый цвет в качестве основного цвета для дизайна этого веб-сайта.Фиолетовый — смелый вариант, который выбирают немногие, но он отлично подходит для передачи воображения и может быть творчески использован при добавлении уникальной цветовой палитры. Сочетание ярких цветов, таких как аметист и шафран, в отличие от множества розовых и синих оттенков, создает причудливую, но инновационную смесь, которая так хорошо работает. Вот почему он должен был быть в нашем списке лучших цветовых схем для веб-сайтов — сочетание цветов настолько безумно, что просто работает!

29. Монохроматический, Преднамеренный

Источник: Get Golden

# fff7e2 # fedd87 # f9bf54

Бренд — это цветовая схема, а цветовая схема — это бренд.Это может звучать так, как если бы безвкусное маркетинговое агентство предложило бизнесу разработать свою цветовую схему, но в данном случае это правда (и это работает!). Эта компания использует три оттенка золотисто-оранжевого, чтобы создать монохромный фирменный стиль, который кричит: «ЭТО НАШ БРЕНД»!

30. Футуристический, мечтательный, изобретательный

Источник: Nesh

# c9d0fd # 804ef6 # f3b3a0 # 140d41

Nesh — это AI-помощник для поиска и аналитики, разработанный, чтобы находить ответы на ваши бизнес-вопросы в 10 раз быстрее за счет мощи обработки естественного языка.Инструмент Nesh, несомненно, был необычной идеей, и созданная ими цветовая схема говорит об их впечатляющих творческих способностях. глубокие и мечтательные пурпурные, такие как фиалка и синяя лента, идеально сочетаются с мягким барвинком и розовым мэнди, чтобы создать космический и революционный веб-сайт, который кричит: «Я — будущее»!

31. Смелый, яркий, первозданный

Источник: iSi Global

# e54360 # f6b733 # 0d2e40 # 4da9af

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

32. Легкий, экологичный

Источник: Itemerie

# fff196 # e7f9f0 #eaffad #ffcdff # 171447 # f4f5f8

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

33. Необычное, связное

. Источник: Katch Me

# 4bb2e9 # 052355 # e2d1cb # a793aa # 6adf91

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

34. Расслабленный, гостеприимный, землистый

Источник: Lick

# 354147 # a4493e # 444a57 # d6a76b # 606c62

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

35. Большой, жирный, красивый

Источник: Markus

# c8ff00 # e0e0e0 # 5301ff # 000000

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

36. Жирный, ретро, резкий

Источник: Mindkiss

# 3060f6 #

a # e8622a # f7c444 # 131516 # 000000

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

37. Мирный, Землистый, Органический

Источник: Музей мира и тишины

# 1f2c16 # 757e6d # fDfBf4

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

38. Веселый, свежий

Источник: Mutek

# 4d8b2c # c2d553 # 2d1051 # 282828

Фестиваль и форум из Канады. Цветовая гамма Mutek совсем не традиционна. Использование двух разных оттенков зеленого — оливково-зеленого и зеленого яблока Гренни Смит — немного рискованно, но комбинация вызывает потрясающее изумление, когда рядом с темно-фиолетовым и темно-серым цветами, используемыми в их цветовой схеме.

39. Утонченный, упрощенный, освежающий

Источник: Muteza

# fdf5f0 # f2a271 # f6cace # 1b262c

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

40. Игривый, модный, органический

Источник: Nutritional Freedom

# e9d4c5 # 336b59 # d69e92 # deb99c # fdfaf6

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

41. Игривый, преобладающий

Источник: Pets by Spotify

# a0c3d2 # e94236 # 61c174 # 000000

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

42. Образное, минималистичное

Источник: Programmai

# 7e5dfc # 64d5d6 # 4f5cfc # 3faafb

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

43. Элегантный, классический, современный

Источник: Shoma Bazaar

# fad565 # ed7768 # 292b37 # ab7c68

«Классика» и «Модерн» обычно не сочетаются друг с другом, но Shoma Bazaar определенно знает, как создать элегантную цветовую схему, которая просто приятна.Темный цвет шарадного угля создает фон для цветов золотарника и жженой сиены, которые хорошо контрастируют и волнуют душу. На кулинарном рынке темные фоны представляют собой идеальный холст для демонстрации их фотографий на всем сайте, который объединяет элегантный, классический, но современный вид бренда.

44. Задумчивый, Причудливый

Источник: Studio Simpatica

# 1b2337 # ee724b # f5da7d # 9Caaf2

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

45. Сильный, вдохновенный, радостный

Источник: Детское общество

# 000000 # ffeb32 # f1be31 # ef8533 # e5e5e5

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

46. Землистый, органический, надежный

Источник: The Living Lad of the National Cancer Institute

# d9b395 # eee5df # f4b25c # 3a7e6c # 000000

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

47. Шипучий, эффектный и элегантный

Источник: Чудесная миссис Майзел

# 132d3b # ec7e9a # e24897 # e56731 # eee8e4 # ebc22f

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

48. Комфортный, свежий, изысканный

Источник: Veneziano Coffee

# 425664 # f6f4f2 # c7af92

Когда вы думаете о кофе, редко можно подумать о том, чтобы быстро выпить большую чашку горячего горячего джо с собой на бегу.Когда любители кофе представляют себе первую чашку кофе утром, идея состоит в том, чтобы сесть и выдохнуть все заботы, которые принесет этот день; быть в этот момент и свободно наслаждаться роскошью насыщенного горячего кофе, согревающего каждый сантиметр вашей души. Это именно та атмосфера, которую излучает веб-сайт Veneziano Coffee своей удобной, чистой и изысканной цветовой гаммой. Глубокий и успокаивающий синий, мягкий и тонкий серый, а также хиты насыщенного золотисто-серо-коричневого цвета напоминают любителям кофе во всем, что такое кофе на самом деле, и побуждают их расслабиться, отдохнуть и насладиться java.

49. Натуральный, Органический, Землистый

Источник: Wokas

# 000000 # 3b3b3b # 6ad7a6 # 6ed563 # f6c187 # db512f

В своей цветовой гамме

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

50. Величественный, мечтательный

Источник: Страна чудес

# ecd4c2 # ad35ee # 2d130c # ce8f31 # 151315

Wonderland — это агентство по пользовательскому опыту, которое использует на своем веб-сайте довольно необычную цветовую схему, хотя в итоге она работала очень хорошо. Как и следовало ожидать от агентства по дизайну пользовательского опыта, на веб-сайте Wonderland темно-коричневый и серый цвета сочетаются с контрастными цветами, такими как Electric Violet и Brandy Punch Orange, которые, возможно, звучат не так, как будто они хорошо сочетаются друг с другом, но это действительно так! Пять основных цветов, используемых на веб-сайте Wonderland, идеально сочетаются с профессиональной, но игривой атмосферой бренда агентства.

Дополнительные ресурсы для создания веб-сайтов

И это, ребята, у нас есть для вас сегодня.

Полный текст, полный текст, весь набор цветовых схем веб-сайта.

Хотите узнать обо всем этом дизайне веб-сайтов?

У нас есть друзья!

Вот еще несколько супер-сладких постов, которые мы создали о веб-дизайне.

И у нас есть еще много чего на нашем канале Youtube, если вы все еще хотите получить после этого, но почти закончили с чтением на день.

Увидимся там, ребята!

Успех! Теперь проверьте свою электронную почту, чтобы подтвердить подписку и получить доступ к первому дню электронного курса!

Привет, меня зовут Дейл! С помощью этого сайта и нашего канала YouTube я помог десяткам тысяч людей создавать красивые веб-сайты по всему миру!

Полное руководство, которое вам нужно

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

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

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

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

Что нужно учитывать при выборе цветовых схем веб-сайта

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

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

Цвета определяют, будет ли покупатель покупать продукт в 85% случаев
В 90% случаев именно цвета помогают привлечь новых клиентов
Цвета влияют на подсознательные суждения на 60-90%
Цвет усиливается узнаваемость бренда на 80%
Цвет может привлекать и удерживать внимание покупателя в 3 раза дольше, чем черно-белый

Вот несколько советов, которые помогут сделать цветовые схемы веб-сайта привлекательными:

Выберите цвета, которые гармонируют друг с другом.
Люди не могут обработать слишком много информации одновременно, поэтому используйте цвет для организации вашего веб-сайта.
Используйте контрастные цвета, чтобы текст был читабельным.
Простая формула — использовать один светлый цвет , один темный цвет и один акцентный цвет
Еще одно правило — использовать один цвет для 60% веб-сайта, другой — для 30% и третий — для 10%

Перейти к разделам статьи

Синие цветовые схемы для веб-сайтов
Красные цветовые схемы для веб-сайтов
Желтые цветовые схемы для веб-сайтов
Зеленые цветовые схемы для веб-сайтов
Черно-белые цветовые схемы для веб-сайтов
Пастельные цветовые схемы для веб-сайтов
Цветовые комбинации для веб-сайтов
Генераторы цветовых палитр

Синие цветовые схемы веб-сайта

Крошечный

Этот сайт покупает интернет-бизнес.Он имеет синий фон с контрастным белым текстом. Цвет акцента — темно-синий.

iFly 50

Целевая страница iFly 50 встречает посетителей ярким изображением голубого неба и голубой воды. Этот веб-сайт — хороший пример сайта фотографа-натуралиста.

рупий

Ankr — это веб-сайт, который соединяет потребителей с Web 3.0. Он использует синий цвет, чтобы выделить анимацию и призыв к действию.

Ahrefs

Ahrefs использует синий цвет на 60% веб-сайта.Белый цвет используется в 30% случаев и контрастирует с синим. А на оранжевый цвет акцента приходится 10%.

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

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

Наслаждайтесь образованием

Enjoy Education — это лондонская компания по обучению на дому.На фотографиях и по всему сайту появляются разные оттенки синего. Оранжевые элементы создают приятный контраст.

Уайттейл Джин

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

NHS

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

Темно-синий

Dark Blue — студия цифрового производства, базирующаяся в Лондоне.Дополняя свое название, веб-сайт использует темно-синий цвет в качестве фона. Анимации и фотографии также содержат синий цвет.

Ткацкий станок

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

Выемка

Recess продает газированную воду. Мягкие оттенки создают ощущение спокойствия. Светло-синий служит цветом фона с более темными синими буквами.

Любовь к Исландии

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

Grand Matter

Grand Matter — хороший пример двухцветной цветовой схемы веб-сайта. Цветовая палитра включает темно-синий и светло-розовый.

Андрис Гауракс

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

BlueReceipt

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

Точечное легкое

На этом веб-сайте представлена простая цветовая палитра. Он использует синий как фоновый цвет и красный как вторичный цвет. Красный цвет подчеркивает простую графику. Белые буквы выделяют текст.

Готово

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

Тим Гровер

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

Бенедиктас Гилис

Бенедиктас Гилис выбрал лаконичную цветовую схему. Темно-синий является основным цветом, а красновато-коричневый — второстепенным.

Креативные монетные дворы

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

Красный Цветовые схемы веб-сайта

NUGGS

NUGGS — яркий и простой сайт с базовой цветовой схемой. Он содержит ярко-красный фон в некоторых разделах и красный текст в других разделах.

Sourisseaux Partners

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

Kloaq

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

Помощь бренду

Brand Aid использует на своем веб-сайте ярко-красный цвет. Красный — это цвет фона при первом входе на сайт. Он также используется для кнопок анимации и призыва к действию.

вверх

Up — цифровой банк.Он использует коралловый цвет фона и ярко-желтый цвет акцента для текста и CTA.

Полевое руководство по веб-дизайну

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

Эмме

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

Эй, лапша

Hey Noodles использует смелые цвета. Красный и желтый цвета логотипа отображаются по всему сайту.

Партнеры по передаче данных

Data Partners предоставляет маркетинговые решения компаниям из списка Fortune 1000. Ярко-оранжевый подчеркивает важные аспекты и призывы к действию веб-сайта.

Разряд

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

Пицца Пицца

Pizza Pizza использует красный цвет на всем сайте. Черные буквы выделяют текст.

MKJ Creative

MKJ Creative — сайт для графической студии. В простом макете красный цвет используется в качестве акцента для выделения слов. Минимальное использование красного цвета и типографика делают этот веб-сайт профессиональным.

Сплайн

На целевой странице Spline на ярко-красном фоне отображаются черные буквы.По мере прокрутки вниз красный цвет превращается в черный фон с белыми буквами.

Портал CVI Холодильники

Красный цвет на этом сайте яркий. Он выделяет призывы к действию и добавляет яркости.

Прогресс Парад

Progress Parade предоставляет специализированных наставников. Красный оживляет анимацию этого сайта. Он также используется для CTA и текстовых заголовков. Использование цвета на этом веб-сайте создает организованный и привлекательный вид.

Дизайн Trionn

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

KitKat

Все узнают KitKat по красной упаковке. Соответственно, этот сайт весь красный.

Завуалированная судьба

Veiled Fate представляет собой стратегическую игру. Целевая страница имеет розово-красный цвет. При прокрутке вниз основными цветами становятся серый и светло-коричневый.

Зеленый лук

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

Кафе Руж

Cafe Rouge — это сайт французского бистро. Темно-красный привлекает внимание к CTA. Темно-красный также используется в каждой секции в качестве акцентного цвета.

Work & Co

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

Желтые цветовые схемы веб-сайта

Разъёмная комплектация 2020

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

Синдикат ICO

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

Сделайте лимонад

Дополняя свое название, этот веб-сайт выполнен в желтой цветовой гамме. В анимации этого веб-сайта появляются разные оттенки желтого. А фон — сплошной желтый.

думаю медведь

На этом веб-сайте представлено портфолио цифрового дизайнера Йенса Нильсена. Цвет фона — мягкий желтый, который подчеркивает цвета его избранного изображения.

Алдай

Alday — это бренд брюк, созданный для удобства. Цвета веб-сайта яркие, предпочтительны ярко-желтый и синий. В сочетании с параллаксной прокруткой это создает игривый и привлекательный веб-сайт.

Путевая точка

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

youbringfire

Youbringfire — это веб-сайт независимого дизайнера Скотта Бирсака.Целевая страница включает ярко-желтый фон и черные буквы.

Шелби Кей

Шелби Кей — внештатный разработчик интерфейса. Несколько цветов образуют цветовую схему сайта. Комбинация привлекательная и организованная.

Lordz

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

Выставка Луны

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

Адам Хартвиг

На этом веб-сайте представлено портфолио дизайнера Адама Хартвига. Он имеет желтый фон и белые буквы с эффектами параллакса.

Проект «Крутой»

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

Ритуал

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

Малый Cos.

Small Cos. Перечисляет вакансии в небольших компаниях. Конструкция проста. Бледно-желтый цвет привлекает внимание к анимации.При прокрутке вниз список вакансий выделяется светло-розовым цветом. Внизу страницы снова отображается бледно-желтая анимация.

Croscon

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

MateCaps

MateCaps продает йерба мате вместо кофе. Желтый, бирюзовый и коралловый цвета создают ощущение энергии. Цвет фона целевой страницы — желтый.Желтый продолжает появляться на сайте. Бирюзовый и коралловый цвета создают приятный контраст на фоне желтого.

Creative Spark

Creative Spark использует желтый как доминирующий цвет на своем веб-сайте. Желтый используется в качестве цвета фона для призывов к действию и появляется на изображениях.

Pebble Naturals

Pebble Naturals использует несколько цветов. Желтые, голубые и розовые полосы на страницах сайта.

Дизайн Identix

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

Лимонный пирог

Lemonpie, ранее известное как Be My Guest, — агентство по производству подкастов. В соответствии со своим названием и логотипом Lemonpie использует желтый цвет на всем своем веб-сайте. Желтым цветом выделены важные фразы. Баланс желтого, черного и белого обеспечивает приятную эстетику.

eeerik

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

Mooze Design

Mooze Design — веб-сайт портфолио агентства. Огромный логотип по центру целевой страницы приветствует посетителей. Ярко-желтый цвет заполняет фон всего веб-сайта.

WØRKS

Этот веб-сайт открывается на ярко-желтом фоне с черными буквами. При прокрутке вниз периодически появляется желтый цвет.

Зеленый цвет веб-сайта

Отходы Нет

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

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

На этом веб-сайте представлен проект BBC, в котором говорится, что наблюдение за природой делает людей счастливыми. На целевой странице представлено яркое изображение зеленой природы. Белые читаемые буквы контрастируют.

Обучаемый

На этом веб-сайте хорошо используются различные оттенки зеленого. На всем сайте используются светлые и темные оттенки бирюзового и зеленого.

Гекокард

Geckoboard позволяет пользователям четко отображать ключевые показатели эффективности и показатели. На сайте появляются зеленые кнопки с призывом к действию и анимация. Зеленому контрастирует темно-синий фон.

Гели

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

Hopewell Brewing

Hopewell Brewing — это крафтовая пивоварня.На сайте преобладает темно-зеленый цвет. Светло-розовый акцентный цвет создает приятное сочетание цветов.

Смиренно здоровый

Scumbly Healthy — это веб-сайт, посвященный кухне на основе растений. В нем используются три основных цвета. Темно-зеленый — преобладающий цвет. Темно-синий и светло-персиковый цвета дополняют зеленый и используются для текста и призывов к действию.

Фактор

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

Ferrumpipe

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

Взлетно-посадочная полоса, ML

RunwayML имеет в основном черный фон, но зеленые вкрапления оживляют этот веб-сайт.

Веб-разработка | Диего Диас

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

Практика

Этот веб-сайт открывается зеленым глазом, который следует за вашим указателем. Фон зеленый с белым текстом. Зеленый цвет появляется на всем сайте.

Бязь

Calico исследует старение. Сайт открывается на зеленом фоне с графикой нейронов.Зеленый цвет появляется на всем веб-сайте как акцентный цвет и помогает в организации.

RipePlanet

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

Кодибокс

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

WUNDER

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

Маркус

Маркус — рекламное агентство. Целевая страница открывается на желтовато-зеленом фоне с черными буквами.

Отделение тростникового искусства

У Reed Art Department простой веб-сайт. У него сероватый фон с зеленой окантовкой по всему периметру.При наведении курсора пункты меню выделяются зеленым.

Цветовые схемы черно-белого веб-сайта

Хорошая мера

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

Студия Bjork

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

Зыбучие пески

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

Duft & Co.

Duft & Co. продает домашнюю выпечку, обеды и кофе.Белый фон с черным текстом привлекает внимание к изображениям блюд. Следуя обычной практике цветовой схемы веб-сайтов, конец веб-сайта меняется на черный фон и белый текст.

Статус

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

Обычный

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

Натуральный

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

Креативное агентство G2K

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

Хохбург. Дизайн Force

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

Стекло

Этот сайт представляет собой сообщество фотографов-любителей и профессиональных фотографов. Черный фон и белый текст придают этому сайту элегантный стиль.

Maddad

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

ТВОРЧЕСКИЙ ПАРК

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

Vorrel Prendergast Jr

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

Routalempi

Routalempi открывает черно-белое изображение группы. Остальная часть веб-страницы использует белый фон с креативным черным шрифтом.

Boynton Yards

При входе на веб-сайт Boynton Yards белый текст отображается на черном фоне. Прокрутка вниз цвета меняется на противоположную. Черно-белая цветовая схема поддерживает простой и чистый дизайн этого веб-сайта.

Пастельные цветовые схемы для веб-сайтов

Northstar

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

HETIME

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

Mailchimp представляет

Фон этого сайта — нежно-бледно-лиловый. Каждая книга имеет свой цвет, чтобы придать этому сайту особый оттенок.

Rideshur

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

Гаджинский

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

Ефрем Иосиф

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

Точечная точка

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

Очки Lunet

Фон очков Lunet Eyewear белый, но изображения очков имеют пастельно-розовый фон. Информация отображается в пастельных синих прямоугольниках.

Ла Пьер Куи Турн

У этого сайта простой и приятный дизайн.Использование пастельно-зеленого, розового и желтого цветов делает этот сайт ярким.

Перелив

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

Студия создания двух

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

Эль Райо Текила

El Rayo Tequila использует множество пастельных тонов, чтобы сосредоточить внимание на текиле.

Происхождение

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

РуэдаФильм

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

Кроссовки Freaker

Sneaker Freaker содержит много информации. Цвета помогают посетителю отличить одну кроссовку от другой.Цвета включают пастельно-зеленый, синий и розовый, а также ярко-фиолетовый.

Санне Вейбенга

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

Сочетание цветов для веб-сайта Цветовые схемы

Керамика Helbak

На этом сайте продается керамика от Malene Helbak. Цвета фона подчеркивают и дополняют цвета продаваемой керамики.

Факультет

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

Промышленный город

На веб-сайте

Industry City преобладает ярко-персиковый цвет. Также используются пастельно-голубой и розовый.

Аяка Б. Ито

На сайте

Ayaka используется несколько цветов. Цвета разделяют информацию в организованные коробки, чтобы продемонстрировать работу Аяки.

уровень

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

Bizzon

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

Вина Моллидукер

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

Ресторан на набережной

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

Базиевые ароматы

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

Wnder

W * nder — это игристый напиток, насыщенный витаминами и CBD.Бутылки горят оранжевым, желтым, бирюзовым и синим цветом в зависимости от времени суток, в которое вы должны его пить. Те же цвета появляются на всем веб-сайте, создавая организованный и привлекательный макет.

Солнцезащитные очки Tens

Этот веб-сайт является хорошим примером сочетания цветов для создания привлекательной эстетики. Каждый раздел домашней страницы имеет свой фон и дополнительный цвет.

Анимация

Animade — анимационная студия. Видео с их анимацией воспроизводится после входа на сайт.Каждая анимация полна цветовых комбинаций и развлекает посетителей.

Пабло Фламинго

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

Финн

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

Bonhomme

Bonhomme по большей части использует черный и белый цвета. Но бирюзовый цвет придает этому сайту нужный оттенок.

Rainbo

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

Шейпфест

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

Генераторы цветовой палитры

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

Adobe Color CC

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

Охладители

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

Colormind

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

Палетон

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

Color Hunt

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

ColorDrop.io

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

ColorSpace

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

Завершение мыслей об этих цветовых схемах веб-сайта

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

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

Если вам понравилась эта статья о цветовых схемах веб-сайта, вам также следует прочитать эту статью:

Цветовых схем веб-сайта, которые выглядят потрясающе: 30 цветовых палитр

Почему цветовые схемы веб-сайтов так важны?

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

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

Для Амелия мы выбрали спокойную нейтральную синюю цветовую гамму с яркими акцентами. Позже вы узнаете почему.

Важность использования правильной цветовой схемы сайта

Лучшая цветовая палитра сайта — та, которая вам поможет:

Привлечь внимание пользователя;
Привлечь вашу целевую аудиторию;
Превратите посетителей в клиентов;
Распространение сарафанного радио;
Заинтересуйте посетителей своим брендом

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

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

Советы по цветовым схемам веб-сайта

Определите продукт / услугу, которую вы продаете

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

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

Знай свою целевую аудиторию

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

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

Выбор цвета фона

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

Сделайте текст черным

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

Что говорит нам каждый цвет?

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

Красный — это цвет, вызывающий сильные эмоции. Это мощный цвет, который часто используется с элементами призыва к действию, такими как «Купите сейчас», «Зарезервируйте сейчас» и т. Д.Он легко заметен, но его следует использовать осторожно, потому что он может быть немного подавляющим, если у вас полностью красные веб-сайты.
Orange часто используется на веб-сайтах, которые продвигают или продают продукты питания. Это теплая цветовая палитра, которая способствует развитию творческих способностей и позитивного мышления, и она особенно популярна среди молодого поколения.
Желтый часто является частью современных цветовых схем, и, хотя его можно включить практически на любой веб-сайт, он особенно интересен детям.Однако имейте в виду, что это не должен быть доминирующий цвет, так как он может утомлять глаза. Вместо этого его следует использовать в качестве акцентного цвета, чтобы выделить определенные элементы и добавить индивидуальности дизайну веб-сайта.
Зеленый часто ассоциируется с природой, туризмом, экологическими «зелеными» продуктами и т. Д. Но история зеленого цвета выходит за рамки этого. Зеленый часто является частью лучших цветовых схем, потому что он приятен для человеческого глаза, символизирует богатство и процветание и является одним из самых модных цветов.
Синий — консервативный цвет, который расслабляет нервную систему и вызывает доверие. Его можно легко разместить практически на любом веб-сайте. Однако следует иметь в виду, что его не следует использовать для текста, поскольку это не стандартный цвет для чтения человеческим глазом.
Черный — один из самых полезных цветов в дизайне веб-сайтов, особенно когда речь идет о тексте. Это также связано с искусством и фотографией. Он отлично работает, особенно когда у вас есть яркий акцентный цвет.
Purple используется в религиозных и туристических местах.

Сохраните ощущение с помощью правильных цветовых схем веб-сайта

Цветовые палитры веб-сайтов, волнующие аудиторию

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

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

Цветовая схема веб-сайта, повышающая настроение бренда

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

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

Цветовые схемы веб-сайтов, повышающие доверие

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

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

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

Цветовые схемы веб-сайтов, повышающие доверие

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

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

Подумайте о своей отрасли

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

Зеленый для экологически чистых брендов

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

Синий для воды

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

Синий для финансов

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

Красный для розницы

Использование красного цвета в цветовой схеме бренда и веб-сайта очень популярно среди розничных продавцов; 59% розничных торговцев имеют красный цвет в своем логотипе . Причина в том, что этот цвет легко вызывает волнение и вызывает у покупателей желание совершить покупку.

Отличные цветовые схемы для веб-сайтов

BAUNFIRE

BAUNFIRE — ведущее агентство цифрового веб-дизайна в Сан-Хосе, Калифорния.Их творческая команда веб-дизайнеров, интерактивных разработчиков и маркетологов предоставляет услуги брендинга, графического дизайна и корпоративных веб-сайтов для ведущих технологических компаний, брендов и стартапов. У них довольно яркая цветовая схема сайта, которую легко воспроизвести.

Дело

Matter — это платформа обратной связи для профессионалов, которые хотят реализовать свои карьерные устремления.

Кайтен

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

Zendesk

Представляем Zendesk Sunshine, открытую гибкую платформу CRM. Sunshine построен на AWS и позволяет легко подключать и понимать все данные своих клиентов, где бы они ни находились.

Сумасшедшая

Crazybaby Air 1S — настоящие беспроводные наушники, предназначенные для занятий спортом, предлагающие бескомпромиссное качество звука Hi-Fi, которое поможет вам расслабиться, пока вы не потеете.

TakeShape

Беззаботная CMS, GraphQL API и генератор статических сайтов с отличной цветовой схемой, которые помогут вам в реализации ваших проектов.

Пара

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

Школа моушн-дизайна

Никакой ерунды по анимации и моушн-дизайну в After Effects. Цветовая гамма его веб-сайта насыщена яркими красками.

ковчег

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

Люстон

Из любви к минималистичным формам и стильным деталям бренд lūstone был создан с миссией по созданию стильных кожаных сумок и аксессуаров для австралийского рынка.

Сеттер

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

Агены

Это 45 дизайнеров, разработчиков и креативщиков.Они превращают идеи в продукты и впечатления, которые нравятся людям.

пять / четыре

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

Мистретта

Распознавание той неповторимой и индивидуальной искры, которая освещает красоту каждой женщины. Это ключ к нашему творчеству в Mistretta Coiffure, изысканной и эксклюзивной «лаборатории тенденций», где формы и цвета сочетаются, чтобы создать уникальный и личный эстетический опыт.

Получите WeTransfer

Collect by WeTransfer — лучший способ систематизировать ваши идеи. Сохраняйте контент из своих приложений и собирайте его для своих друзей, своей команды или только для себя.

Синдикат ICO

Попасть в хорошие ICO становится все труднее. Нет больше, вступайте в Синдикат ICO.

Тоник Мантра

TONIK + наполняет мощные декларации * Я ЕСМЬ * (мантры) успокаивающей атмосферой.Каждая мантра доставляется в виде небольшой повторяющейся дозы (микродозирование).

Ипификация

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

фиксатор

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

Рыболовный палец

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

BarkBox

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

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

Северный рубин

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

Лимонная стойка

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

К сожалению, LemonStand был закрыт 5 июня 2019 г., перейдя по этой ссылке, вы сможете узнать больше об альтернативах LemonStand, которые могут вам подойти.

Монетный двор

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

Одопод

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

Fiverr

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

Ahrefs

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

Millo.co

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

Ткацкий станок

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

Онлайн-генераторы цветовой палитры

Охладители

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

Быстро и просто — достаточно нажать клавишу пробела, чтобы создать красивые цветовые схемы, которые идеально сочетаются друг с другом
Экспорт и совместное использование — Экспортируйте свои схемы в несколько удобных форматов, таких как PNG, PDF, SCSS, SVG, или скопируйте постоянные URL-адреса
Изображение в цвета — выберите начальные цвета из изображений и автоматически получите идеальное сочетание
Коллекция палитр — Создайте свой профиль и сохраните все свои цветовые схемы в порядке с именами и тегами
Регулировка и уточнение — точная настройка цветов путем регулировки температуры, оттенка, насыщенности, яркости и т. Д.
Цвета в облаке — войдите в свою учетную запись и получайте доступ к своим творениям везде

Цветная сфера Mudcube

Mudcube — это генератор палитры, который переводит цветовое колесо в 3D, где вы можете вращать сферу, чтобы получить идеальные цвета. Он поставляется с 10 предустановками гармонии, 9 предустановками видения и 3 предустановками квантования. В нем также есть выбор тем из раскрывающегося меню, если вы не хотите создавать их с нуля.Вы можете загрузить свои палитры в файлах .AI или .ACO

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

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

Вы можете экспериментировать с различными гармониями, такими как полная информация HEX, HSL и RGB. Эти значения CMYK, RGB и т. Д.поможет вам найти конкретный цвет по образцу и при щелчке по образцу. он будет добавлен в вашу палитру.

SpyColor.com

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

Вы можете ввести название цвета, например, Amaranth Purple, и вы получите прекрасный выбор пурпурных цветовых схем на выбор.

ColorZilla

ColorZilla — замечательный продвинутый инструмент для создания великолепной цветовой палитры CSS. Расширенные функции включают:

Пипетка — получить цвет любого пикселя на странице
Расширенная палитра цветов (аналогична Photoshop)
Окончательный генератор градиентов CSS
Webpage Color Analyzer — получите цветовую палитру для любого сайта
Palette Viewer с 7 предустановленными палитрами
Цвет История недавно выбранных цветов

Colormind

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

ЦветHexa

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

Поддон

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

Цвета холста

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

Colordot

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

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

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

COLOURlovers

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

Pictaculous

Pictaculous — это генератор цветовой палитры, предоставленный MailChimp, который позволяет создавать цветовую палитру из изображений или фотографий PNG, JPG или GIF.По сути, все, что нужно, — это загрузить изображение по вашему выбору, а приложение сделает все остальное. Затем приложение создает для вас файл образцов Adobe, который поможет вам быстро и легко загрузить цветовую палитру.

Colorexplorer

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

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

Цвета в Интернете

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

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

Цветовые комбинации

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

КОПАСО

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

Цветной блендер

Работа с Color Blender включает несколько простых шагов:

Выберите формат значения цвета, введите два допустимых значения цвета CSS в выбранном вами формате и укажите количество средних точек, которые вы хотите видеть. Палитра покажет введенные вами цвета, а также запрошенное количество цветов средней точки и значения этих цветов.
При щелчке по квадрату на экране «водопад» будет введено соответствующее значение для любого выделенного входа.
Переключение между форматами значений преобразует все имеющиеся значения.
«Очистить» удаляет все значения и цвета, но не изменяет формат текущего значения.
URL-адрес страницы обновляется при каждом изменении, поэтому вы можете поделиться или добавить в закладки цвета, этапы наложения и формат значений, отображаемых в данный момент.
Если вы хотите использовать Color Blender для автономного использования, просто просмотрите исходный код и сохраните его на свой жесткий диск.

Генератор цветовой палитры Colllor

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

Проверь мои цвета

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

Colr.org

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

COLRD

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

Генератор палитр DeGraeve

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

ФОТОКОПА

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

Colorion

Colorion — это инструмент с 3 основными параметрами: основные цвета, кнопки градиента и изображение для палитры материалов.Это поможет вам создать прекрасные цветовые палитры для профессиональных веб-сайтов всего за несколько простых шагов.

Завершение мыслей о цветовых схемах сайта

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

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

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

Мы также писали о нескольких связанных темах, таких как синие веб-сайты и примеры желтой цветовой палитры.

15 цветовых схем веб-сайтов для стартапов и консультантов

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

Цвета — отличный способ побудить обычные браузеры прокрутить ваш сайт вниз или щелкнуть некоторые важные ссылки, так как же вы можете использовать их, чтобы поддерживать интерес пользователей?

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

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

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

Мы также добавили для вас цветные HEX-коды, чтобы вы могли вставлять их прямо в свои шаблоны в Piktochart. Просто щелкните вкладку «Цветовая схема» в меню слева, нажмите кнопку «Создать новую цветовую схему» и вставьте HEX-коды.

Давайте нырнем!

1.Marqeta

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

2. Янтарь Сюй

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

3. Хэнк Герман

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

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

4. SnapChart

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

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

5. Хлеб бездельник

Loafer Bread — это качественные и экологически чистые ингредиенты.Цветовая схема их веб-сайта отражает эти ценности. Серый и средне-голубой оттенок создают элегантность, а различные оттенки коричневого и серого добавляют естественный землистый оттенок.

6. Химчистка Hartford Сайт

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

7. Taxumo

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

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

8. Westbrook Brewing

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

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

9. Синяя бутылка

Blue Bottle — одно из самых известных имен в кофе третьей волны. Цветовая схема их веб-сайта отражает две самые важные вещи, которые вам нужно знать о компании: они подают кофе, а их фирменный цвет — синий. Все остальные оттенки служат для создания контекста и тонкого фона.

10. Джессика Коллинз

Среди прочего, Джессика Коллинз — специалист по спортивному питанию, писатель о фитнесе и «спортивная девушка с кровью хиппи и большим мамаше-медвежьим сердцем».

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

11. Алекс Найт

Внештатный дизайнер UX / UI Алекс Найт использует синий, зеленый и розовый, чтобы представить свою домашнюю страницу и обрамить свое портфолио.Каждый цвет перетекает в другой, дополняя оттенки отображаемого дизайна веб-сайта.

12. Хубуд

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

13. Nexudus

Nexudus — компания, предоставляющая программное обеспечение для управления коворкинг-пространствами.В нем используются дополнительные цвета для контраста, благодаря чему иллюстрации и кнопки CTA выделяются на странице.

Яркие фиолетовые и желтые цвета их веб-сайтов отражают энергию и азарт индустрии, которая меняет образ жизни молодежи во всем мире.

14. Мария Зарич

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

15. Tokopedia

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

Как выбрать цвета веб-сайта

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

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

Эмоциональный аспект нам хорошо известен — использование синего цвета для внушения доверия. Финансовые учреждения, такие как Citi, Deutsche Bank и Standard Chartered, и даже финтех-компании, такие как PayPal, Ethereum и Coinbase, используют синий цвет для своего корпоративного брендинга.

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

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

См. Цветовое колесо ниже:

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

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

цветов, которые сочетаются с зеленым на веб-сайтах

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

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

Лучше подходит для одних ниш и совсем непопулярно для других
Популярны в сфере энергетики, технологий, финансов, домашнего хозяйства и продуктов питания
Непопулярно для автомобилей, самолетов и одежды
Сомнительно для здравоохранения
От 62% до 90% оценки продукта основывается только на цвете
Цветной оттиск является причиной 60% принятия или отклонения продукта.

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

Источник

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

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

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

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

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

Зеленая, фиолетовая и оранжевая цветовая гамма

В то время как зеленый и оранжевый сочетаются друг с другом на основе их противостояния в цветовом круге, фиолетовый — довольно необычный цвет.Фиолетовый привлекает внимание к теме веб-сайта, повышает осведомленность и акцентирует внимание на каждой детали на страницах сайта. Зеленый, превратившийся в фиолетовый, действительно означает чрезвычайную ситуацию. Это связано со всей идентичностью сайта и активностью команды, направленной на будущее без выбросов углерода. Если фиолетовый является акцентным цветом, оранжевый смягчает сообщение: он используется для стимулирования взаимодействия и призыва к действиям, которые побуждают пользователей проявить инициативу. Само по себе действие обязательно смягчит обстановку чрезвычайной ситуации.Зеленый должен оставаться основным цветом, как и веб-сайт через цветовую схему и его сообщение.

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

Цвета, которые сочетаются с зеленым: коричневый и белый

На этом веб-сайте сочетание цветов является естественным: фотография объединяет зеленый и коричневый (+ некоторые оттенки туманного серого), текст которых отображается белым.Учитывая, что фон имеет более темные цвета, белый цвет пригодится для создания контраста. Это также соответствует естественности изображения, при этом акцентируя внимание на заголовке и призыве к действию. Весь текст страницы отображается белым цветом, включая логотип, заголовок и подзаголовок, а также текст кнопки CTA. Замечательно, как благодаря использованию цветов текст и изображение поддерживают друг друга: зеленый, коричневый и некоторые оттенки серого продвигают текст вперед, а белый обеспечивает гармонию с естественностью изображения.

Такое же цветовое сочетание используется на таких веб-сайтах, как:

Первый пример зеленого и белого:

Второй пример 2 зеленый и белый:

Третий пример 3 светло-зеленый и белый:

Четвертый пример 4 темно-зеленый и белый:

Цвета, сочетающиеся с разными оттенками зеленого: красный, белый

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

По аналогичной схеме сочетания цветов:

Пример зеленый, красный и белый

Другие цвета, которые сочетаются с зеленым: желтый, белый

Еще одна удачная комбинация — преобладающий зеленый, желтый как акцентный цвет и немного белого для фона, текста и некоторых значков.Он обладает силой передавать яркое ощущение и последовательное сообщение (мы с гордостью финансируем канадских художников более 30 лет!). Темно-зеленый идеально контрастирует с желтым, и в обоих случаях на первый план выходит фотография с белым фоном. В целях согласованности цвет текста чередуется между белым и желтым, поэтому текст и изображение лучше пересекаются по своему значению и символике. Кнопки с призывом к действию имеют желтый фон, поэтому они достаточно заметны и побуждают к действию. Макет и разброс цветов создают чистый дизайн, который легко и приятно просматривать.

Зеленый, синий и черный

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

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

4 шага для поиска идеальной цветовой схемы веб-сайта

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

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

Sirin Labs

Домашняя страница Sirin Labs

Сразу бросается в глаза гладкий дизайн и черно-белый . Выглядит довольно изысканно, не правда ли?

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

Прокрутка вниз главной страницы Sirin Labs

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

Ло-Фло Рекордс

Домашняя страница Lo-Flo Records

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

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

Прокрутка вниз домашней страницы Lo-Flo Records

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

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

Лулу и Джорджия

Вот что-то более сдержанное и минималистское. На этом веб-сайте мебели все просто, давайте посмотрим, что вас встречает, когда вы открываете их веб-сайт:

Цвета

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

Все они о мягких цветах, землистых оттенках и простоте, что и нужно их покупателям.Прокрутим немного вниз:

Прокрутка вниз по домашней странице Лулу и Джорджии

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

История икон

Это, наверное, один из самых крутых веб-сайтов, которые я когда-либо видел. Давайте посмотрим:

Один из самых крутых веб-сайтов

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

Отличные цвета на веб-сайте

Когда вы начнете прокручивать вниз, вам будет представлена история значков. 80-е — бирюзовые, 90-е — фуксия, 2000-е — прохладный оттенок зеленого, а 2010-е — темно-синий. Несмотря на такое обилие цветов, ни одна часть этого сайта не выглядит чрезмерной и раздражающей. Это показывает вам, что все еще существуют уникальные цветовые схемы веб-сайтов, которые не перестарались до смерти.

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

Как подобрать цветовую схему для собственного сайта?

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

Вот 4 шага для поиска цветовых схем веб-сайта:

Найдите свой основной цвет
Найдите дополнительный и нейтральный цвет
Цвет фона
Полезные сайты для поиска цветовых схем веб-сайтов

1. Найдите свой основной цвет

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

Этот цвет будет не фоном, а цветом важных кнопок (таких как кнопки загрузки и CTA), специального текста (текста, рекламирующего что-то), важных ссылок (ссылок меню) и т. Д., Вы понимаете, супер важные вещи, которые вы хотите, чтобы пользователь заметил.

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

Цветовой круг | Source

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

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

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

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

После того, как вы выберете основной цвет, самое время выбрать свой вторичный цвет и нейтральный цвет.

2.Найдите свой второстепенный и нейтральный цвет

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

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

Дизайн страницы пакета Sirin Labs Дизайн страницы безопасности Sirin Labs

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

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

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

3. Цвет фона

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

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

А как насчет видео для фона сайта?

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

Страница акцентного кресла на сайте Lulu and Georgia

Учитывайте пол

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

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

В опросе 2017 года, на который ушло более 5700 человек, потребовалось более 6 лет, результаты показали, что любимым цветом мужчин и женщин был синий, а за ним — зеленый. Красный был на третьем месте был красным для мужчин, а фиолетовый для женщин, а на четвертом месте все было наоборот.

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

Цветовые предпочтения по полу | Источник: hotdesign.com

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

Ваша продукция предназначена для людей определенного возраста?

Как и пол, у определенных возрастов есть свои любимые и не любимые цвета.В возрасте от 1 до 18 больше всего нравятся синий и зеленый, почти одинаково. Люди 19-24 лет еще больше любят синий, а зеленый, фиолетовый и красный — меньше и почти столько же.

Blue неизменно является фаворитом по всем направлениям. Его Интересно, что чем старше становятся люди, тем меньше они любят зеленый и начинают любящий фиолетовый больше.

Таблица любимых цветов по возрастным группам | Источник

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

Представьте себе отрасль, в которой вы работаете.

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

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

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

4. Полезные сайты для поиска цветовых схем сайта

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

Сайт Canva.com предлагает такую услугу, смотрите:

Генератор цветовой палитры Canva.com

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

На их веб-сайте также есть раздел цветовых палитр:

Цветовая палитра Canva.com, страница

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

Страница цветового круга Canva.com

Еще один полезный сайт, когда дело доходит до поиска цветовых схем веб-сайтов, — это coolors.co, который генерирует цветовую схему одним нажатием кнопки:

Coolors.co palette

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

Сайт colorhunt.co отсортирован по популярным

Заключение

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

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

Удачи в создании вашего веб-сайта и спасибо за чтение!

20 отличных инструментов для выбора цветовой схемы веб-сайта — Top Digital Agency

Понравились эти советы по дизайну веб-сайтов? Вам больше понравятся наши веб-разработчики.

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

Интернет-инструменты

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

Кулер

Kuler — один из лучших бесплатных онлайн-инструментов для создания цветовых схем и мой личный фаворит. Вы можете просматривать множество готовых цветовых схем или создавать свои собственные, используя продвинутый, но простой в использовании интерфейс. Моя любимая особенность Kuler заключается в том, что доступ встроен прямо в Adobe Illustrator, поэтому он всегда под рукой. Также доступны приложение AIR и виджет Dashboard для еще большего количества возможностей доступа.

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

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

Любители цвета

Интернет-сообщество, где ценители цвета могут создавать, публиковать и просматривать цветовые схемы.

Color Spire

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

Мгновенные цветовые схемы

Хотя в интерфейсе немного не хватает этого инструмента, на самом деле он очень полезен. Просто введите слово или фразу (например, «Пожарная машина»), и вы получите 24 самых ярких цвета, которые появляются в результате поиска первых пяти изображений в поиске изображений Yahoo.

Цветной проводник

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

Поворот цвета

Color Rotate очень похож на 3D-версию Kuler. Интерфейс не совсем интуитивно понятен, но с ним приятно играть!

Color Grab

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

Настольные приложения и виджеты

Веб-приложения

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

Color Schemer (Mac или ПК)

Color Schemer — это полнофункциональное приложение для создания цветовой палитры. Получите все функции некоторых из самых популярных веб-приложений и многое другое с удобством всегда присутствующего настольного приложения.Безусловно, лучшее настольное решение, которое я нашел.
Цена: $ 49.99

Swatch (Mac)

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

ColourMod (Mac или ПК)

ColourMod — это стильный виджет, который позволяет быстро и легко получить шестнадцатеричное значение любого цвета.
Цена: бесплатно

Приложения для iPhone

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

Color Expert

«Color Expert — это интерактивное цветовое колесо и библиотека образцов, которая помогает художникам и дизайнерам определять, переводить, фиксировать и демонстрировать цвет».
Цена: 9,99 долларов США

Цвета CliqCliq

«Цвета» — это простая в использовании палитра цветов для поиска, преобразования и управления цветами и палитрами.”
Цена: 2,99 доллара США

Мой Pantone

Если вы когда-либо были дизайнером полиграфии, вы, вероятно, любите цветные книги, полные образцов Pantone, которые превращаются в радугу из легко просматриваемых цветов. MyPantone предлагает эту функцию в удобстве приложения для iPhone.
Цена: 9,99 долларов США

Цветной поток

«Прекрасный инструмент для работы с цветом для iPhone, Color Stream, позволяет создавать и сохранять цветовые палитры, которые создаются с нуля, сгенерированы из фотографии или даже автоматически сгенерированы с помощью нашего встроенного средства цветовой схемы (который поддерживает аналогичные, монохромные, триада и многое другое!).”
Цена: 2,99 доллара США

Лупа

«Простая и продуманная, лупа позволяет создавать образцы цветов из библиотеки фотографий или с помощью камеры сохранять цвета по мере их нахождения».
Цена: $ 0.99

Think Ink: высвобожденный цвет

«Think Ink — бесплатное приложение для iPhone, которое позволяет вам исследовать цветовые комбинации из системы цветов Дьюи, создавать собственные цветовые палитры и заказывать образцы бумаги в Neenah Paper».
Цена: бесплатно

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

«Vibrant — это полнофункциональное средство выбора цвета / выбора цвета, которое предоставляет все инструменты, необходимые дизайнеру для определения цветов и цветовых тем и управления ими на ходу.Сделайте снимок цели с помощью встроенной камеры, сожмите и перетащите перекрестие, чтобы выбрать цвет, вращайте цветовое колесо и перемещайте ползунки, чтобы настроить цвет, и коснитесь звездочки, чтобы сохранить новый цвет в палитре ».