Цвета web онлайн: Подбор цветов и генерация цветовых схем

Содержание

Подбор цветов и генерация цветовых схем

Монохроматическая модель. Эта цветовая схема основана на одном оттенке цвета, и использует вариации, сделанные только лишь изменением насыщенности и яркости.

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

Также монохроматические вариации сделаны для каждого цвета в других схемах.

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

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

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

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

Модель цветовой тетрады (двойной контраст). Эта цветовая схема образована парой цветов и их контрастов. Она основана на Тетраде — четверке цветов, равномерно распределенных по цветовому кругу (90°). Тетрада — очень агрессивная цветовая схема, требующая хорошего планирования и деликатный подход к отношениям этих цветов.

Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.

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

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

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

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

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

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

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

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

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

Значение оттенка основного цвета. Кликните для ввода числового значения.

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

Значение RGB основного цвета. Кликните для ввода числового значения.

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

Значения RGB основного цвета.

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

Яркость и Насыщенность. Перетаскивайте ползунок по квадрату для регулировки яркости (вверх = светлее, вниз = темнее) и насыщенности (вправо = насыщенное, влево = разбавленное).

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

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

Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.

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

Схема палитры. Представлены четыре основных цвета, для легкого составления впечатления о схеме.

URL адрес цветовой схемы. Для каждой схемы существует уникальный ID. Вы можете сохранить эту ссылку в закладки, и вернуться к редактированию своей цветовой схемы в любой момент времени.

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

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

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

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

Рандомизация. Служит для создания случайной палитры согласно настройкам рандомизации.

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

Цвета 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

Цвета Pantone — Онлайн каталог Pantone.

Таблица Пантонов по CMYK и RGB — ColorScheme.Ru

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

Цветовая модель Пантон, система Pantone Matching System — это широко используемая стандартизованная система идентификации и подбора цвета, общепризнанный международный стандарт в издательском деле и офсетном производстве.

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

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

Таблица цветов Pantone

В таблице представлен Pantone Color Bridge Coated Process. Данный каталог цветов содержит лишь ближайшие CMYK и RGB аналоги к смесевым цветам. Далеко не каждый цвет из палитры Pantone возможно передать триадными красками, — цветовой диапазон смесевых цветов Pantone гораздо шире, чем у триадных красок CMYK.

Цвет Pantone	C	M	Y	K	HTML	R	G	B
PANTONE 100	0	0	56	0	#FCEA76	252	234	118
PANTONE 101	0	0	68	0	#FCE85F	252	232	95
PANTONE 102	0	0	95	0	#FEE500	254	229	0
PANTONE 103	5	5	100	16	#D0BC00	208	188	0
PANTONE 104	7	13	100	28	#BBA30D	187	163	13
PANTONE 105	13	18	88	45	#998730	153	135	48
PANTONE 106	0	0	75	0	#FCE85D	252	232	93
PANTONE 107	0	0	92	0	#FDE724	253	231	36
PANTONE 108	0	5	98	0	#F9DA00	249	218	0
PANTONE 109	0	9	100	0	#F8D500	248	213	0
PANTONE 110	2	22	100	8	#DBB216	219	178	22
PANTONE 111	8	21	100	28	#B69920	182	153	32
PANTONE 112	10	20	100	40	#A48C1A	164	140	26
PANTONE 113	0	2	83	0	#FAE34E	250	227	78
PANTONE 114	0	4	87	0	#F9DE45	249	222	69
PANTONE 115	0	6	87	0	#F8DB46	248	219	70
PANTONE 116	0	14	100	0	#F5CB08	245	203	8
PANTONE 117	6	27	100	12	#CDA31F	205	163	31
PANTONE 118	7	28	100	30	#B48F1F	180	143	31
PANTONE 119	17	22	100	47	#937F20	147	127	32
PANTONE 120	0	5	64	0	#F7DD76	247	221	118
PANTONE 121	0	8	70	0	#F6D86F	246	216	111
PANTONE 122	0	11	80	0	#F5D258	245	210	88
PANTONE 123	0	19	89	0	#F2C541	242	197	65
PANTONE 124	0	30	100	0	#EDB220	237	178	32
PANTONE 125	6	32	100	24	#BB9121	187	145	33
PANTONE 126	11	31	100	36	#A7861D	167	134	29
PANTONE 127	0	4	62	0	#FAE17B	250	225	123
PANTONE 128	0	7	75	0	#F8D962	248	217	98
PANTONE 129	0	11	78	0	#F6D15A	246	209	90
PANTONE 130	0	32	100	0	#EDAC1A	237	172	26
PANTONE 131	2	39	100	10	#D0941F	208	148	31
PANTONE 132	9	38	100	32	#AB7F20	171	127	32
PANTONE 133	19	37	100	59	#775F1F	119	95	31
PANTONE 134	0	12	60	0	#F5D27A	245	210	122
PANTONE 135	0	21	76	0	#F1C15C	241	193	92
PANTONE 136	0	28	87	0	#EFB646	239	182	70
PANTONE 137	0	41	100	0	#EAA124	234	161	36
PANTONE 138	0	52	100	0	#E68C28	230	140	40
PANTONE 139	7	49	100	25	#B27827	178	120	39
PANTONE 140	19	49	100	54	#7D5A25	125	90	37
PANTONE 141	0	16	65	0	#F5CD66	245	205	102
PANTONE 142	0	24	78	0	#F2BF4C	242	191	76
PANTONE 143	0	32	87	0	#F0B336	240	179	54
PANTONE 144	0	51	100	0	#EA961C	234	150	28
PANTONE 145	4	53	100	8	#D08921	208	137	33
PANTONE 146	7	50	100	34	#A97620	169	118	32
PANTONE 147	19	38	90	58	#786428	120	100	40
PANTONE 148	0	17	43	0	#F4D199	244	209	153
PANTONE 149	0	24	51	0	#F2C688	242	198	136
PANTONE 150	0	41	78	0	#EDAA50	237	170	80
PANTONE 151	0	60	100	0	#E88D21	232	141	33
PANTONE 152	0	66	100	0	#E68523	230	133	35
PANTONE 153	5	64	100	17	#C17723	193	119	35
PANTONE 154	8	66	100	41	#9D6120	157	97	32
PANTONE 155	0	12	34	0	#F5D7A5	245	215	165
PANTONE 156	0	23	49	0	#F1C382	241	195	130
PANTONE 157	0	42	74	0	#EBA344	235	163	68
PANTONE 158	0	62	95	0	#E47E1A	228	126	26
PANTONE 159	1	72	100	7	#D0651E	208	101	30
PANTONE 160	6	71	100	31	#AB5A20	171	90	32
PANTONE 161	16	67	100	71	#66401D	102	64	29
PANTONE 162	0	25	35	0	#F0C4A0	240	196	160
PANTONE 163	0	44	52	0	#EBA677	235	166	119
PANTONE 164	0	59	80	0	#E68A48	230	138	72
PANTONE 165	0	70	100	0	#E37828	227	120	40
PANTONE 166	0	76	100	0	#E06C2A	224	108	42
PANTONE 167	5	77	100	15	#BB5D29	187	93	41
PANTONE 168	12	80	100	60	#6F3B20	111	59	32
PANTONE 169	0	30	26	0	#EEBCA8	238	188	168
PANTONE 170	0	48	50	0	#E89C77	232	156	119
PANTONE 171	0	61	72	0	#E4834E	228	131	78
PANTONE 172	0	73	87	0	#E06E37	224	110	55
PANTONE 173	0	82	94	2	#D7572B	215	87	43
PANTONE 174	8	86	100	36	#9C4124	156	65	36
PANTONE 175	18	79	78	56	#77402E	119	64	46
PANTONE 176	0	35	18	0	#EDB9B4	237	185	180
PANTONE 177	0	54	38	0	#E7948A	231	148	138
PANTONE 178	0	70	58	0	#E27865	226	120	101
PANTONE 179	0	87	85	0	#DD5143	221	81	67
PANTONE 180	3	91	86	12	#C1433C	193	67	60
PANTONE 181	21	93	88	50	#80352F	128	53	47
PANTONE 182	0	31	8	0	#ECBEC5	236	190	197
PANTONE 183	0	49	17	0	#E79CA6	231	156	166
PANTONE 184	0	73	32	0	#DF6B7C	223	107	124
PANTONE 185	0	93	79	0	#D93740	217	55	64
PANTONE 186	2	100	85	6	#C92A39	201	42	57
PANTONE 187	7	100	82	26	#AC2B37	172	43	55
PANTONE 188	16	100	65	58	#7D2935	125	41	53
PANTONE 189	0	39	10	0	#EBB3BC	235	179	188
PANTONE 190	0	56	18	0	#E58F9E	229	143	158
PANTONE 191	0	79	36	0	#DE6276	222	98	118
PANTONE 192	0	94	64	0	#DB3B50	219	59	80
PANTONE 193	2	99	62	11	#C32E4C	195	46	76
PANTONE 194	8	100	55	37	#9D2945	157	41	69
PANTONE 195	19	90	50	55	#7E3545	126	53	69
PANTONE 196	0	23	6	0	#EFCAD0	239	202	208
PANTONE 197	0	46	12	0	#E8A1B0	232	161	176
PANTONE 198	0	82	37	0	#DC5672	220	86	114
PANTONE 199	0	100	72	0	#D82949	216	41	73

Палитра цветов с названиями — IMG online

Палитра из 137 цветов с названиями, RGB значениями и HEX (HTML) кодом.

Название цвета	RGB	HEX
Тёмно-бордовый	rgb(128,0,0)	#800000
Тёмно-красный	rgb(139,0,0)	#8B0000
Огнеупорный кирпич	rgb(178,34,34)	#B22222
Красный	rgb(255,0,0)	#FF0000
Лососевый	rgb(250,128,114)	#FA8072
Томатный	rgb(255,99,71)	#FF6347
Коралловый	rgb(255,127,80)	#FF7F50
Оранжево-красный	rgb(255,69,0)	#FF4500
Шоколадный	rgb(210,105,30)	#D2691E
Песочно-коричневый	rgb(244,164,96)	#F4A460
Тёмно-оранжевый	rgb(255,140,0)	#FF8C00
Оранжевый	rgb(255,165,0)	#FFA500
Тёмный золотарник	rgb(184,134,11)	#B8860B
Золотарниковый	rgb(218,165,32)	#DAA520
Золотой	rgb(255,215,0)	#FFD700
Оливковый	rgb(128,128,0)	#808000
Жёлтый	rgb(255,255,0)	#FFFF00
Жёлто-зелёный	rgb(154,205,50)	#9ACD32
Зелёно-жёлтый	rgb(173,255,47)	#ADFF2F
Шартрёз (ликёр)	rgb(127,255,0)	#7FFF00
Зелёный газон	rgb(124,252,0)	#7CFC00
Зелёный	rgb(0,128,0)	#008000
Лаймовый	rgb(0,255,0)	#00FF00
Зелёный лайм	rgb(50,205,50)	#32CD32
Весенне зелёный	rgb(0,255,127)	#00FF7F
Весенне-зелёный нейтральный	rgb(0,250,154)	#00FA9A
Бирюзовый	rgb(64,224,208)	#40E0D0
Светло-зелёное море	rgb(32,178,70)	#20B2AA
Бирюзовый нейтральный	rgb(72,209,204)	#48D1CC
Тёмный циан	rgb(0,139,139)	#008B8B
Морская волна	rgb(0,255,255)	#00FFFF
Тёмно-бирюзовый	rgb(0,206,209)	#00CED1
Небесно-голубой тёмный	rgb(0,191,255)	#00BFFF
Обманчивый синий	rgb(30,144,255)	#1E90FF
Королевский синий	rgb(65,105,225)	#4169E1
Военно-морского флота	rgb(0,0,128)	#000080
Тёмно-синий	rgb(0,0,139)	#00008B
Cиний нейтральный	rgb(0,0,205)	#0000CD
Синий	rgb(0,0,255)	#0000FF
Сине-фиолетовый	rgb(138,43,226)	#8A2BE2
Тёмная орхидея	rgb(153,50,204)	#9932CC
Тёмно-фиолетовый	rgb(148,0,211)	#9400D3
Фиолетовый	rgb(128,0,128)	#800080
Тёмный маджента	rgb(139,0,139)	#8B008B
Маджента	rgb(255,0,255)	#FF00FF
Фиолетово-красный нейтральный	rgb(199,21,133)	#C71585
Насыщенный розовый	rgb(255,20,147)	#FF1493
Ярко-розовый	rgb(255,105,80)	#FF69B4
Малиновый	rgb(220,20,60)	#DC143C
Коричневый	rgb(165,42,42)	#A52A2A
Красный индийский	rgb(205,92,92)	#CD5C5C
Розово-коричневый	rgb(188,143,143)	#BC8F8F
Светло-коралловый	rgb(240,128,128)	#F08080
Снег	rgb(255,250,250)	#FFFAFA
Туманная роза	rgb(255,228,225)	#FFE4E1
Тёмный лосось	rgb(233,150,122)	#E9967A
Светлый лосось	rgb(255,160,122)	#FFA07A
Охра	rgb(160,82,45)	#A0522D
Морская ракушка	rgb(255,245,238)	#FFF5EE
Седло Браун	rgb(139,69,19)	#8B4513
Персиковая пудра	rgb(255,218,185)	#FFDAB9
Перу	rgb(205,133,63)	#CD853F
Текстильный	rgb(250,240,230)	#FAF0E6
Бисквит	rgb(255,228,196)	#FFE4C4
Плотное дерево	rgb(222,184,135)	#DEB887
Загар	rgb(210,180,140)	#D2B48C
Античный белый	rgb(255,235,215)	#FAEBD7
Белый навахо	rgb(255,222,173)	#FFDEAD
Бланшированный миндаль	rgb(255,235,205)	#FFEBCD
Побег папайи	rgb(255,239,213)	#FFEFD5
Мокасиновый	rgb(255,228,181)	#FFE4B5
Пшеничный	rgb(245,222,179)	#F5DEB3
Старое кружево	rgb(253,245,230)	#FDF5E6
Цветочный белый	rgb(255,250,240)	#FFFAF0
Кукурузный волос	rgb(255,248,220)	#FFF8DC
Хаки	rgb(240,230,140)	#F0E68C
Лимонный шифон	rgb(255,250,205)	#FFFACD
Бледный золотарник	rgb(238,232,170)	#EEE8AA
Тёмный хаки	rgb(189,183,107)	#BDB76B
Бежевый	rgb(245,245,220)	#F5F5DC
Светло-жёлтый золотарник	rgb(250,250,210)	#FAFAD2
Светло-жёлтый	rgb(255,255,224)	#FFFFE0
Слоновая кость	rgb(255,255,240)	#FFFFF0
Тёмно-оливковый	rgb(107,142,35)	#6B8E23
Тёмно-оливковый зелёный	rgb(85,107,47)	#556B2F
Тёмно-зелёное море	rgb(143,188,143)	#8FBC8F
Тёмно-зелёный	rgb(0,100,0)	#006400
Зелёный лесной	rgb(34,139,34)	#228B22
Светло-зелёный	rgb(144,238,144)	#90EE90
Бледно-зелёный	rgb(152,251,152)	#98FB98
Медвяная роса	rgb(240,255,240)	#F0FFF0
Зелёное море	rgb(46,139,87)	#2E8B57
Зелёное море, нейтральный	rgb(60,179,113)	#3CB371
Мятный крем	rgb(245,255,250)	#F5FFFA
Аквамариновый нейтральный	rgb(102,205,170)	#66CDAA
Аквамариновый	rgb(127,255,212)	#7FFFD4
Тёмный грифельно-серый	rgb(47,79,79)	#2F4F4F
Бледно-бирюзовый	rgb(179,238,238)	#AFEEEE
Светло-голубой	rgb(224,255,255)	#E0FFFF
Лазурный	rgb(245,255,255)	#F0FFFF
Серо-синий	rgb(95,158,160)	#5F9EA0
Пыльный голубой	rgb(176,224,230)	#B0E0E6
Светло-синий	rgb(173,216,230)	#ADD8E6
Небесно-голубой	rgb(135,206,235)	#87CEEB
Небесно-голубой светлый	rgb(135,206,250)	#87CEFA
Синяя сталь	rgb(70,130,180)	#4682B4
Синяя Элис	rgb(240,248,255)	#F0F8FF
Серый шифер	rgb(112,128,144)	#708090
Светло-серый шифер	rgb(119,136,153)	#778899
Светло-стальной синий	rgb(176,196,222)	#B0C4DE
Васильковый голубой	rgb(100,149,237)	#6495ED
Лаванда	rgb(230,230,250)	#E6E6FA
Призрачно-белый	rgb(248,248,255)	#F8F8FF
Полуночный синий	rgb(25,25,112)	#191970
Аспидно-синий	rgb(106,90,205)	#6A5ACD
Тёмный аспидно-синий	rgb(72,61,139)	#483D8B
Нейтральный аспидно-синий	rgb(123,104,238)	#7B68EE
Фиолетовый нейтральный	rgb(147,112,219)	#9370DB
Индиго	rgb(75,0,130)	#4B0082
Нейтральный цвет орхидеи	rgb(186,85,211)	#BA55D3
Слива светлая	rgb(221,160,221)	#DDA0DD
Розово-фиолетовый	rgb(238,130,238)	#EE82EE
Чертополох	rgb(216,191,216)	#D8BFD8
Орхидея	rgb(218,112,214)	#DA70D6
Розово-лавандовый	rgb(255,240,245)	#FFF0F5
Лиловый	rgb(219,112,147)	#DB7093
Розовый	rgb(255,192,203)	#FFC0CB
Светло-розовый	rgb(255,182,193)	#FFB6C1
Чёрный	rgb(0,0,0)	#000000
Тускло-серый	rgb(105,105,105)	#696969
Серый	rgb(128,128,128)	#808080
Тёмно-серый	rgb(169,169,169)	#A9A9A9
Серебряный	rgb(192,192,192)	#C0C0C0
Светло-серый	rgb(211,211,211)	#D3D3D3
Геинсборо	rgb(220,220,220)	#DCDCDC
Белый дым	rgb(245,245,245)	#F5F5F5
Белый	rgb(255,255,255)	#FFFFFF

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

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

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

Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь .

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

colorscheme.ru

С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.

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

color.adobe.com

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

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

paletton.com

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

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

Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic 🙂

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

Color Palette Generator

На этом сайте необходимо указать ссылку на изображение.

palettegenerator.com

На этот сайт нужно загрузить картинку со своего компьютера.

palettable.io

Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».

flatcolors.net

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

materialpalette.com

Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.

getuicolors.com

И напоследок снова user interface. Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.

Вот такие инструменты есть у меня в закладках.

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

Нужен сайт с правильными цветами? Пишите, сделаем 🙂

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

Подбор цветов для сайта онлайн

Приветствую вас, дорогие посетители!

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

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

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

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

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

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

1.Перейти в одну из 4 категорий цветовых схем:
2.Можно воспользоваться фильтром по цвету, который расположен в правой части шапки:
После выбора одного из цветов, для вас будут отфильтрованы цветовые схемы с содержанием этого цвета, или его оттенка.
3.Так же можно воспользоваться фильтрацией по двум цветам. Для этого нужно кликнуть по кнопочке «Два цвета» в шапке, возле иконки Instagram:
Под шапкой откроется дополнительная панель фильтра, где вы сможете выбрать два цвета для подбора схемы:
Выберете нужные цвета и нажмите на кнопку «Начать подбор». Для вас будут подобраны цветовые схемы, содержащие заданные цвета или их оттенки:

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

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

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

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

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

А на сегодня у меня все. Желаю вам успехов в создании ваших сайтов, и поиске цветовых решений для них!

До встречи в следующих статьях!

С уважением Юлия Гусарь

16 отличных цветовых решений сайтов

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

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

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

Содержание статьи

Почему цветовая схема так важна?
1. Tori’s Eye
2. Mea Cuppa
3. The Big Top
4. BarkBox
5. Cheese Survival Kit
6. Nordic Ruby
7. Lake Nona
8. Lemon Stand
9. Mint
10. Odopod
11. Fiverr
12. Digital Photography School
13. Ahrefs
14. Millo.co
15. Brian Gardner
16. Loom
Тестирование цветовых палитр
Заключение

Почему цветовая схема так важна?

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

Цвет повышает узнаваемость бренда на 80%.
На 90% формирует первое впечатление о сайте.
Гармоничная цветовая палитра создает ощущение баланса и порядка. Вы можете использовать ее для установления иерархии контента на своих страницах.
Позволяет выделить определенные элементы на странице («призывы к действию»).
Упрощает связанные с дизайном решения. Сокращает время, необходимое для создания новых страниц.

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

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

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

1. Tori’s Eye

Tori’s Eye — это инструмент для визуализации информации на Twitter. Этот сайт — отличный пример преимущественно однотонной цветовой схемы. В данном случае мы видим простую, но при этом мощную цветовую палитру, основанную на оттенках зеленого.

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

2. Mea Cuppa

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

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

3. The Big Top

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

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

4. BarkBox

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

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

Читайте также: Яркие цветовые решения для приложений и сайтов

5. Cheese Survival Kit

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

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

6. Nordic Ruby

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

7. Lake Nona

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

8. Lemon Stand

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

Читайте также: Принципы контраста и подобия как средства выразительности в веб-дизайне

9. Mint

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

10. Odopod

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

11. Fiverr

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

12. Digital Photography School

Как правило, мы ожидаем, что у сайта, связанного с изобразительным искусством, будет удачно подобранная цветовая палитра, и Digital Photography School не является здесь исключением. Яркие цвета помогают привлечь внимание зрителя. И, как и в случае с Fiverr, оранжевый цвет, используемый в дизайне CTA (и логотипа), больше нигде не появляется в палитре, поскольку он используется для точечного воздействия на пользователя.

13. Ahrefs

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

Читайте также: 8 ярких цветовых трендов 2019 года

14. Millo.co

Millo.co использует очень простую цветовую палитру, и это лучшее решение для него. Благодаря такому цветовому решению посетителю очень легко ориентироваться на сайте.

15. Brian Gardner

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

16. Loom

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

Тестирование цветовых палитр

Когда вы создаете лендинг, вы тестируете свои CTA-элементы, заголовки и другие элементы. Так почему же в случае с цветом все должно быть иначе?

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

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

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

Читайте также: Сколько времени нужно на сплит-тестирование?

Заключение

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

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

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

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

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

06-02-2019

цветов HTML

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

Кончилось воображение? Изучите нашу палитру цветов и выберите идеальный цвет для своего проекта. RGB, HEX, HSL, CMYK, мы вам поможем. Наш палитра цветов достаточно умен, чтобы понимать все цветовые коды.

Палитра цветов
Палитра цветов Google
Палитра цветов HTML

#ffebee

# ffcdd2

# ef9a9a

# e57373

# ef5350

# f44336

# e53935

# d32f2f

# c62828

# b71c1c

# fce4ec

# f8bbd0

# f48fb1

# f06292

# ec407a

# e91e63

# d81b60

# c2185b

# ad1457

# 880e4f

# f3e5f5

# e1bee7

# ce93d8

# ba68c8

# ab47bc

# 9c27b0

# 8e24aa

# 7b1fa2

# 6a1b9a

# 4a148c

# ede7f6

# d1c4e9

# b39ddb

# 9575cd

# 7e57c2

# 673ab7

# 5e35b1

# 512da8

# 4527a0

# 311b92

# e8eaf6

# c5cae9

# 9fa8da

# 7986cb

# 5c6bc0

# 3f51b5

# 3949ab

# 303f9f

# 283593

# 1a237e

# e3f2fd

#bbdefb

# 90caf9

# 64b5f6

# 42a5f5

# 2196f3

# 1e88e5

# 1976d2

# 1565c0

# 0d47a1

# e1f5fe

# b3e5fc

# 81d4fa

# 4fc3f7

# 29b6f6

# 03a9f4

# 039be5

# 0288d1

# 0277bd

# 01579b

# e0f7fa

# b2ebf2

# 80deea

# 4dd0e1

# 26c6da

# 00bcd4

# 00acc1

# 0097a7

# 00838f

# 006064

# e0f2f1

# b2dfdb

# 80cbc4

# 4db6ac

# 26a69a

# 009688

# 00897b

# 00796b

# 00695c

# 004d40

# e8f5e9

# c8e6c9

# a5d6a7

# 81c784

# 66bb6a

# 4caf50

# 43a047

# 388e3c

# 2e7d32

# 1b5e20

# f1f8e9

# dcedc8

# c5e1a5

# aed581

# 9ccc65

# 8bc34a

# 7cb342

# 689f38

# 558b2f

# 33691e

# f9fbe7

# f0f4c3

# e6ee9c

# dce775

# d4e157

# cddc39

# c0ca33

# afb42b

# 9e9d24

# 827717

# fffde7

# fff9c4

# fff59d

# fff176

# ffee58

# ffeb3b

# fdd835

# fbc02d

# f9a825

# f57f17

# fff8e1

# ffecb3

# ffe082

# ffd54f

# ffca28

# ffc107

# ffb300

# ffa000

# ff8f00

# ff6f00

# fff3e0

# ffe0b2

# ffcc80

# ffb74d

# ffa726

# ff9800

# fb8c00

# f57c00

# ef6c00

# e65100

# fbe9e7

#ffccbc

# ffab91

# ff8a65

# ff7043

# ff5722

# f4511e

# e64a19

# d84315

# bf360c

# efebe9

# d7ccc8

# bcaaa4

# a1887f

# 8d6e63

# 795548

# 6d4c41

# 5d4037

# 4e342e

# 3e2723

# f5f5f5

# e0e0e0

#bdbdbd

# 9e9e9e

# eceff1

# cfd8dc

# b0bec5

# 90a4ae

# 78909c

# 607d8b

HEX

{{шестнадцатеричный}}

RGB

{{rgbval}}

HSL

{{hsl}}

Таблица цветов

У нас есть сотни цветовых сочетаний! Загляните на нашу страницу с таблицей цветов, чтобы вдохновиться.Изучите цвета плоского дизайна, дизайн Google Material, плавные цвета, схему дизайна метро — все с цветовыми кодами HEX и RGB.

Таблица цветов
Плоские цвета
Цвета Материального Дизайна

Рекомендуемые цвета

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

Генератор цвета
Случайный цвет

Названия Цвета

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

Раздел названий цветов

Красивые градиенты каждый день

Gradient Hunt — это бесплатная и открытая коллекция модных градиентов ручной работы

Градиенты

Красивые цветовые палитры

Color Palettes — это тщательно отобранная коллекция красивых цветовых палитр, обновляемая ежедневно

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

Учебники по цвету HTML и CSS

Не знаете или не помните что-нибудь о кодировании цветов? Что ж, мы предлагаем вам лучшие уроки HTML и CSS Color Tutorials
причем большинство задают вопросы самым странным.Время учиться!

Научитесь кодировать

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

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

цветовых палитр
Создать палитры

Сделай свой градиент

Не знаете, как создавать градиенты? Нет проблем, с нашим градиентом и генератором градиентов вы
поймете, как легко и красиво создавать градиенты.Взглянуть!

Градиенты
Создать градиенты

Каковы 8 значений цвета HTML?

Теперь мы говорим о 8 цветовых значениях HTML (HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK).

Значение цвета HEX представлено в шестнадцатеричном формате, поэтому для каждого из них диапазон изменяется от 00 до FF. Код выражается следующим образом: #RRGGBB,
каждое из двухзначных значений представляет собой диапазон каждого из 3 цветов, с помощью которого мы выбираем окончательное значение, представляющее каждый цвет.

Значение цвета RGB, красный — зеленый — синий, основано на смешивании этих трех цветов для получения полного диапазона. Каждый из цветов принимает значение от 0 до 255, всего 256, при этом получается всего 256 x 256 x 256 = 16 777 216 различных цветов.
Смешивание этих трех цветов даст вам цветовой код rgb, представленный как этот RGB (23,34,255).

Значение цвета RGBA, красный — зеленый — синий — альфа, которое добавляет новый коэффициент, альфа-канал, то есть непрозрачность или прозрачность, которая следует той же процентной схеме: 0% представляет абсолютную прозрачность, а 100% представляет абсолютную непрозрачность, которая это то, как мы традиционно видим цвета.

Значение цвета HSL. Эта модель включает два дополнительных параметра к оттенку или цветности для получения цвета: насыщенность, яркость или тон. Отсюда его аббревиатура: HSL (H — оттенок или оттенок, S — насыщенность или насыщенность, L — яркость или яркость / тон).

Значение цвета HSLA (H — оттенок или оттенок, S — насыщенность или насыщенность, L — яркость или яркость / тон — A — ALPHA) — это система, которая не является системой, которая обычно используется в веб-дизайне, но он используется в других областях, таких как редактирование фотографий или дизайн (в целом).

Значение цвета HSV включает два дополнительных параметра к оттенку или цветности для получения цвета: насыщенность и значение. Отсюда его аббревиатура: HSV (H — оттенок или оттенок, S — насыщенность или насыщенность, V — значение или значение).

Значение цвета HWB (оттенок-белизна-черная) очень похоже на HSV (оттенок, насыщенность, значение) и HSL (оттенок, насыщенность, яркость), за исключением того, что ни HSV, ни HSL не обеспечивают насыщенности для белизны.

CMYK Color Value является субтрактивной моделью и используется при печати с использованием пигментов трех основных цветов: C — голубой, M — пурпурный и Y — желтый.K происходит от черного, так как комбинация трех предыдущих дает немного чистого черного.

ДЛЯ ДОПОЛНИТЕЛЬНОЙ ИНФОРМАЦИИ ПОСЕТИТЕ ССЫЛКИ В ТЕКСТЕ ИЛИ ПОСЕТИТЕ НАШУ ТЕОРИЮ ЦВЕТА.

Теория цвета

Общие цвета

Нет лучшего способа помочь вам найти свой идеальный цвет, чем дать вам обычные цвета того времени. Смотрите и удачи!

Общие цвета

ПОДЕЛИТЬСЯ С ДРУЗЬЯМИ!

12 уникальных инструментов выбора цвета для веб-дизайнеров и графических дизайнеров

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

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

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

12 лучших палитр цветов и инструментов для дизайнеров

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

1. ColorPick Eyedropper Расширение Chrome

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

ColorPick позволяет найти шестнадцатеричный цветовой код любого элемента.

2. ColorSnapper 2

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

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

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

3. Расширение Webflow для Chrome

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

Под рукой, правда?

Генераторы цветовых схем и палитр

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

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

4. Happy Hues

Созданный полностью в Webflow никем иным, как Mackenzie Child, Happy Hues дает вам различные цветовые палитры для вдохновения и показывает реальные примеры того, как эти цвета могут быть использованы в профессиональном дизайне.

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

5. Цвет

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

6. Coolors

Coolors упрощает выбор и уточнение вашей палитры.

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

7. LOLColors

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

8. Цветовое колесо торговой марки

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

Цветовое вдохновение

Благодаря достижениям в HTML и CSS дизайнеры теперь могут в полной мере использовать цветные градиенты в Интернете, не беспокоясь о создании тяжелых изображений или написании сложного кода. Единственная проблема сейчас — попытаться сузить круг выбора!

Следующие четыре инструмента — это наш лучший выбор для управления выбором цветовой палитры.

9. CSS Gradient

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

10. Adobe Capture CC

Цветовые палитры, созданные пользователем в Adobe Color.

Какой лучший способ черпать вдохновение в цвете, чем окружающий нас мир? Экосистема Adobe Color имеет ряд ресурсов (в том числе генератор образцов), но чаще всего я использую их приложение для iOS, Adobe Capture CC.

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

11. Colormind

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

12. Colorable

Программа Colorable, разработанная Jxnblk, позволяет веб-дизайнерам и дизайнерам печати легко тестировать различные цветовые комбинации, используя их шестнадцатеричные коды. Легко настраивайте значения RGB и HSV для точной настройки цветов. Сайт чрезвычайно прост в использовании: просто добавьте шестнадцатеричное значение для двух цветов, и система оценит комбинацию на основе рекомендаций WCAG по доступности. Этот рейтинг гарантирует, что дальтоники или слабовидящие пользователи смогут читать дизайн с этими двумя цветами.

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

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

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

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

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

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

Концепция

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

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

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

Бренд

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

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

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

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

Ваши вкусы

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

Простое руководство по цвету для веб-разработчика — Smashing Magazine

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

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

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

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

Вы, конечно, будете подсознательно изучать теорию по пути. Так что, просто для шуток (да, я сказал «забавные»), я рекомендую вернуться через несколько месяцев и еще раз попробовать теорию.

Клянусь, тогда все будет иметь гораздо больше смысла.

Выбор основного цвета

Мы можем увидеть что-то нелепое, например, 10 миллионов цветов в любой момент времени. Подумайте об этом на секунду. 10 миллионов.

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

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

Как выбрать начальный цвет

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

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

Советы по выбору начального цвета

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

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

Допустим, вы выбрали синий. (Отличный выбор, кстати!)

Выбор (приятного) основного цвета

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

Сначала перейдите в Dribbble и Designspiration и щелкните ссылку «Цвета» в обоих.

Они должны представить вам похожие экраны:

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

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

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

Различные оттенки синего имеют разные характеристики. Выбирать мудро! (Просмотр большой версии)

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

Так много синего! Ваша задача — выбрать тот, который, по вашему мнению, лучше всего подходит вашему бренду. Очень просто! (Просмотр большой версии)

Вы не только увидите разные варианты основного цвета, но и легко увидите совпадающие цвета.

Создание сплоченной цветовой палитры

Хорошо, теперь у вас должно быть HEX-значение для вашего цвета. Мой — # 30c9e8 . Теперь мы собираемся сделать палитру из этого цвета.И это проще, чем вы думаете.

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

Виды палитр, которые вы, вероятно, привыкли видеть. (Изображение предоставлено: палитры ColourLovers от manekineko и сахара!) (Просмотреть увеличенную версию)

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

белый,
темно-серый,
светло-серый (необязательно).

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

базовый цвет (в нашем случае # 30c9e8 ),
акцентный цвет (мы скоро доберемся до этого).

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

Как и Thoughtbot и TedTodd, вам не нужна сложная цветовая схема, чтобы иметь красивый веб-сайт.(Просмотр большой версии)

Найдите свой акцент

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

Ваш следующий шаг — перейти в Paletton и ввести свой HEX-код в цветовое поле:

Введите свой основной цветовой код в Paletton. (Просмотр большой версии)

Отсюда вы можете найти свой акцент одним из двух способов.

Во-первых, вы можете нажать кнопку «Добавить дополнение» и бух ! Этот апельсин там? Это твой акцент.

Paletton автоматически подберет подходящий цвет для акцента. (Просмотр большой версии)

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

Щелкните, чтобы найти цветовую схему, которая вам нравится. (Просмотр большой версии)

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

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

Наша цветовая палитра пока формируется. (Просмотр большой версии)

Сейчас не хватает только серого.

Добавление серого

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

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

Вы можете выбрать оттенки серого одним из двух способов:

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

Создание гармоничных оттенков серого

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

Создайте две формы и залейте их цветами # 424242 и #fafafa .
Вставьте слой с цветной заливкой над двумя фигурами.
Измените эту заливку на основной цвет ( # 30c9e8 ).
Установите режим наложения на перекрытие и уменьшите непрозрачность до 5–40% (в приведенном ниже примере она установлена на 40%).
Воспользуйтесь палитрой цветов и скопируйте новые значения.

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

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

Вуаля! Мы сделали это!

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

Наша замечательная цветовая схема, готовая к применению. (Просмотр большой версии)

Применение вашей цветовой схемы

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

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

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

Как видите, здесь показан синий . Он также используется на больших площадях и в значках.

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

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

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

Важно отметить, что при использовании цвета и текста необходимо обеспечить достаточный контраст между фоном и копией. Это поможет людям с дальтонизмом или слабым зрением читать текст на вашем сайте. Есть много инструментов, которые вы можете использовать для поиска цветов, соответствующих рекомендациям WCAG. Двумя популярными из них являются программа проверки контрастности цвета WebAim и функция Contrast Ratio от Lea Verou.

Color Guide Final Note

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

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

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

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

Дополнительная литература по SmashingMag:

(rb, jb, ml, al)

Paletton — The Color Scheme Designer

Влюблен в цвета, с 2002 года.

Приложение Paletton
Colorpedia
О компании Paletton
О компании Paletton

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

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

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

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

Интернет-палитра цветов | Руководство по бренду университета

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

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

Акцентные цвета (использовать с осторожностью)

ШЕСТИГР. FCE300
R-252
G-227
В-0

ШЕСТИГР. E4002B
R-228
G-0
В-43

ШЕСТИГР. 732F2F
R-115
G-47
В-47

Пропорции цвета

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

Палитра функций

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

Сообщения об ошибках и успешном выполнении

ШЕСТИГР. E4002B
R-228
G-0
В-43

См. Перо
Коллекция кнопок от TAMU MarComm (@tamumarcomm)
на CodePen.

🎨 Цветовые коды HTML

шестнадцатеричный:

RGB:
rgb (102 232 232)

HSL:
HSL (232,232,232)

#FFFFFF
RGB (255,255,255)
белый
# C0C0C0
RGB (192,192,192
)
серебро
# 808080
RGB (128,128,128)
серый
# 800000
RGB (128,0,0)
бордовый
# 800080
RGB (128,0,128)
фиолетовый
# FF00FF
RGB (255,0,255)
фуксия
# 008000
RGB (0,128,0)
зеленый
# 00FF00
RGB (0,255,0)
лайм
# 808000
RGB (128,128,0)
оливковый
# FFFF00
RGB (255,255,0)
желтый
# 000080
RGB (0,0,128)
военно-морской флот
# 0000FF
гб (0,0,255)
синий
# 008080
RGB (0,128,128)
бирюзовый
# 00FFFF
RGB (0,255,255)
аква

Что такое цветовой код HTML?

Цветовой код HTML — это идентификатор, используемый для представления цвета в Интернете и в других цифровых активах.Общие формы этих кодов представляют собой
имя ключевого слова, шестнадцатеричное значение, триплет RGB (красный, зеленый, синий) и триплет HSL (оттенок, насыщенность, яркость).
Каждая форма позволяет выбрать из 16 777 216 цветов.

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

красный (название ключевого слова)
# ff0000 (шестнадцатеричный)
(255,0,0) (RGB)
(0, 100%, 50%) (HSL)

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

Чтобы использовать выбранный цветовой код на своей веб-странице, вы можете поместить следующий атрибут в данный элемент, чтобы изменить его цвет фона на красный: style = "background-color: # ff0000;"

Цветовые коды

HTML используются в HTML и CSS для создания цветовых схем веб-дизайна.

Цвета web онлайн: Подбор цветов и генерация цветовых схем

Подбор цветов и генерация цветовых схем

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

Цвета Pantone — Онлайн каталог Pantone.

Таблица цветов Pantone

Палитра цветов с названиями — IMG online

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

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

Подбор цветов для сайта онлайн

16 отличных цветовых решений сайтов

Содержание статьи

Почему цветовая схема так важна?

1. Tori’s Eye

2. Mea Cuppa

3. The Big Top

4. BarkBox

5. Cheese Survival Kit

6. Nordic Ruby

7. Lake Nona

8. Lemon Stand

9. Mint

10. Odopod

11. Fiverr

12. Digital Photography School

13. Ahrefs

14. Millo.co

15. Brian Gardner

16. Loom

Тестирование цветовых палитр

Заключение

цветов HTML

HEX

RGB

HSL

Красивые градиенты каждый день

Красивые цветовые палитры

ПОДЕЛИТЬСЯ С ДРУЗЬЯМИ!

12 уникальных инструментов выбора цвета для веб-дизайнеров и графических дизайнеров

12 лучших палитр цветов и инструментов для дизайнеров

1. ColorPick Eyedropper Расширение Chrome

2. ColorSnapper 2

3. Расширение Webflow для Chrome

4. Happy Hues

5. Цвет

6. Coolors

7. LOLColors

8. Цветовое колесо торговой марки

9. CSS Gradient

10. Adobe Capture CC

11. Colormind

12. Colorable

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

Концепция

Бренд

Ваши вкусы

Простое руководство по цвету для веб-разработчика — Smashing Magazine

Выбор основного цвета

Как выбрать начальный цвет

Советы по выбору начального цвета

Выбор (приятного) основного цвета

Создание сплоченной цветовой палитры

Найдите свой акцент

Добавление серого

Создание гармоничных оттенков серого

Вуаля! Мы сделали это!

Применение вашей цветовой схемы

Color Guide Final Note

Дополнительная литература по SmashingMag:

Paletton — The Color Scheme Designer

Влюблен в цвета, с 2002 года.

Интернет-палитра цветов | Руководство по бренду университета

Акцентные цвета (использовать с осторожностью)

Пропорции цвета

Палитра функций

Сообщения об ошибках и успешном выполнении

🎨 Цветовые коды HTML

Что такое цветовой код HTML?

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