Красивая палитра – Названия цветов, от Абрикоса до Янтаря — ColorScheme.Ru

Содержание

Палитра цветов с названиями - 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

www.imgonline.com.ua

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

colorscheme.ru

Цвета HTML. Таблица из 147 имён цветов для HTML и CSS — ColorScheme.Ru

HTML Имя ЦветаHEXRGB
Красные тона:
IndianRed#CD5C5C205, 92, 92
LightCoral#F08080240, 128, 128
Salmon#FA8072250, 128, 114
DarkSalmon#E9967A233, 150, 122
LightSalmon#FFA07A255, 160, 122
Crimson#DC143C220, 20, 60
Red#FF0000255, 0, 0
FireBrick#B22222178, 34, 34
DarkRed#8B0000139, 0, 0
Розовые тона:
Pink#FFC0CB255, 192, 203
LightPink#FFB6C1255, 182, 193
HotPink#FF69B4255, 105, 180
DeepPink#FF1493255, 20, 147
MediumVioletRed#C71585199, 21, 133
PaleVioletRed#DB7093219, 112, 147
Оранжевые тона:
LightSalmon#FFA07A255, 160, 122
Coral#FF7F50255, 127, 80
Tomato#FF6347255, 99, 71
OrangeRed#FF4500255, 69, 0
DarkOrange#FF8C00255, 140, 0
Orange#FFA500255, 165, 0
Жёлтые тона:
Gold#FFD700255, 215, 0
Yellow#FFFF00255, 255, 0
LightYellow#FFFFE0255, 255, 224
LemonChiffon#FFFACD255, 250, 205
LightGoldenrodYellow#FAFAD2250, 250, 210
PapayaWhip#FFEFD5255, 239, 213
Moccasin#FFE4B5255, 228, 181
PeachPuff#FFDAB9255, 218, 185
PaleGoldenrod#EEE8AA238, 232, 170
Khaki#F0E68C240, 230, 140
DarkKhaki#BDB76B189, 183, 107
Фиолетовые тона:
Lavender#E6E6FA230, 230, 250
Thistle#D8BFD8216, 191, 216
Plum#DDA0DD221, 160, 221
Violet#EE82EE238, 130, 238
Orchid#DA70D6218, 112, 214
Fuchsia#FF00FF255, 0, 255
Magenta#FF00FF255, 0, 255
MediumOrchid#BA55D3186, 85, 211
MediumPurple#9370DB147, 112, 219
BlueViolet#8A2BE2138, 43, 226
DarkViolet#9400D3148, 0, 211
DarkOrchid#9932CC153, 50, 204
DarkMagenta#8B008B139, 0, 139
Purple#800080128, 0, 128
Indigo#4B008275, 0, 130
SlateBlue#6A5ACD106, 90, 205
DarkSlateBlue#483D8B72, 61, 139
Коричневые тона:
Cornsilk#FFF8DC255, 248, 220
BlanchedAlmond#FFEBCD255, 235, 205
Bisque#FFE4C4255, 228, 196
NavajoWhite#FFDEAD255, 222, 173
Wheat#F5DEB3245, 222, 179
BurlyWood#DEB887222, 184, 135
Tan#D2B48C210, 180, 140
RosyBrown#BC8F8F188, 143, 143
SandyBrown#F4A460244, 164, 96
Goldenrod#DAA520218, 165, 32
DarkGoldenRod#B8860B184, 134, 11
Peru#CD853F205, 133, 63
Chocolate#D2691E210, 105, 30
SaddleBrown#8B4513139, 69, 19
Sienna#A0522D160, 82, 45
Brown#A52A2A165, 42, 42
Maroon#800000128, 0, 0
Основные цвета:
Black#0000000, 0, 0
Gray#808080128, 128, 128
Silver#C0C0C0192, 192, 192
White#FFFFFF255, 255, 255
Fuchsia#FF00FF255, 0, 255
Purple#800080128, 0, 128
Red#FF0000255, 0, 0
Maroon#800000128, 0, 0
Yellow#FFFF00255, 255, 0
Olive#808000128, 128, 0
Lime#00FF000, 255, 0
Green#0080000, 128, 0
Aqua#00FFFF0, 255, 255
Teal#0080800, 128, 128
Blue#0000FF0, 0, 255
Navy#0000800, 0, 128
HTML Имя ЦветаHEXRGB
Зелёные тона:
GreenYellow#ADFF2F173, 255, 47
Chartreuse#7FFF00127, 255, 0
LawnGreen#7CFC00124, 252, 0
Lime#00FF000, 255, 0
LimeGreen#32CD3250, 205, 50
PaleGreen#98FB98152, 251, 152
LightGreen#90EE90144, 238, 144
MediumSpringGreen#00FA9A0, 250, 154
SpringGreen#00FF7F0, 255, 127
MediumSeaGreen#3CB37160, 179, 113
SeaGreen#2E8B5746, 139, 87
ForestGreen#228B2234, 139, 34
Green#0080000, 128, 0
DarkGreen#0064000, 100, 0
YellowGreen#9ACD32154, 205, 50
OliveDrab#6B8E23107, 142, 35
Olive#808000128, 128, 0
DarkOliveGreen#556B2F85, 107, 47
MediumAquamarine#66CDAA102, 205, 170
DarkSeaGreen#8FBC8F143, 188, 143
LightSeaGreen#20B2AA32, 178, 170
DarkCyan#008B8B0, 139, 139
Teal#0080800, 128, 128
Синие тона:
Aqua#00FFFF0, 255, 255
Cyan#00FFFF0, 255, 255
LightCyan#E0FFFF224, 255, 255
PaleTurquoise#AFEEEE175, 238, 238
Aquamarine#7FFFD4127, 255, 212
Turquoise#40E0D064, 224, 208
MediumTurquoise#48D1CC72, 209, 204
DarkTurquoise#00CED10, 206, 209
CadetBlue#5F9EA095, 158, 160
SteelBlue#4682B470, 130, 180
LightSteelBlue#B0C4DE176, 196, 222
PowderBlue#B0E0E6176, 224, 230
LightBlue#ADD8E6173, 216, 230
SkyBlue#87CEEB135, 206, 235
LightSkyBlue#87CEFA135, 206, 250
DeepSkyBlue#00BFFF0, 191, 255
DodgerBlue#1E90FF30, 144, 255
CornflowerBlue#6495ED100, 149, 237
MediumSlateBlue#7B68EE123, 104, 238
RoyalBlue#4169E165, 105, 225
Blue#0000FF0, 0, 255
MediumBlue#0000CD0, 0, 205
DarkBlue#00008B0, 0, 139
Navy#0000800, 0, 128
MidnightBlue#19197025, 25, 112
Белые тона:
White#FFFFFF255, 255, 255
Snow#FFFAFA255, 250, 250
Honeydew#F0FFF0240, 255, 240
MintCream#F5FFFA245, 255, 250
Azure#F0FFFF240, 255, 255
AliceBlue#F0F8FF240, 248, 255
GhostWhite#F8F8FF248, 248, 255
WhiteSmoke#F5F5F5245, 245, 245
Seashell#FFF5EE255, 245, 238
Beige#F5F5DC245, 245, 220
OldLace#FDF5E6253, 245, 230
FloralWhite#FFFAF0255, 250, 240
Ivory#FFFFF0255, 255, 240
AntiqueWhite#FAEBD7250, 235, 215
Linen#FAF0E6250, 240, 230
LavenderBlush#FFF0F5255, 240, 245
MistyRose#FFE4E1255, 228, 225
Серые тона:
Gainsboro#DCDCDC220, 220, 220
LightGrey#D3D3D3211, 211, 211
LightGray#D3D3D3211, 211, 211
Silver#C0C0C0192, 192, 192
DarkGray#A9A9A9169, 169, 169
DarkGrey#A9A9A9169, 169, 169
Gray#808080128, 128, 128
Grey#808080128, 128, 128
DimGray#696969105, 105, 105
DimGrey#696969105, 105, 105
LightSlateGray#778899119, 136, 153
LightSlateGrey#778899119, 136, 153
SlateGray#708090112, 128, 144
SlateGrey#708090112, 128, 144
DarkSlateGray#2F4F4F47, 79, 79
DarkSlateGrey#2F4F4F47, 79, 79
Black#0000000, 0, 0

colorscheme.ru

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

Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору сочетания цветов и генераторов палитр. А сегодня хотим расширить тему, разместив в блоге перевод статьи Essential Color Tools for UX Designers от Nick Babich.

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

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

1. Ищем вдохновение

Краски природы

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

Лучшие сочетания красок – в природе. Можете получить цветовую схему из любого фото

Behance

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

Dribbble Colors

Dribbble – одна из лучших социальных сетей для дизайнеров, которая пригодится при создании пользовательского интерфейса. Если вы желаете визуально понять, каким образом другие специалисты использовали конкретный цвет, откройте страницу по ссылке dribbble.com/colors и укажите нужное значение.

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

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

Designspiration

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

В Designspiration найдете разные примеры цветовых комбинаций

Tineye Multicolr

С помощью сервиса подбора цвета Tineye Multicolr сможете определить желаемую гамму изображения и даже задать процент каждого из них (соотношение). Сайт интегрирован с базой данных, состоящей из 20 млн фоток Creative Commons от Flickr. Это определенно один из самых быстрых способов найти бесплатные картинки в идеальной палитре.

Colorzilla

ColorZilla – расширение для установки в браузерах Chrome и Mozilla Firefox. Оно включает в себя такие инструменты, как «пипетка», функции просмотра палитр, создания CSS-градиентов и многое другое.

Расширение ColorZilla доступно в Chrome и Firefox

Shutterstock Spectrum

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

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

W3Schools

Недавно в блоге рассматривали подборку инструментов по веб-цветам в дизайне от W3Schools. Там собрано очень много информации по теме, начиная от их названий/кодов оттенков, теории сочетания палитр и заканчивая описанием разных форматов: HEX, RGB, CMYK, HWB и др. Также найдете простенькие генераторы, конверторы и тому подобные «мини-сервисы». В целом, интересно посмотреть.

2. Создаем цветовую палитру

Material Design Color Tool

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

Coolors

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

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

Цветовая схема в Coolors на основе фото 

Adobe Color CC

Сервис подбора цвета Adobe Color CC (ранее Kuler), сейчас довольно популярен. Он находится в свободном доступе в интернете, но существует также и десктор-версия. С помощью данного веб-приложения вы сделаете свою палитру, используя цветовой круг:

Проект позволяет создать/сохранить палитру из 5 значений

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

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

Здесь есть сотни готовых комбинаций, ищите их в разделе «Смотреть»:

Если пользуетесь десктоп-версией, то сможете в один клик экспортировать созданную вами цветовую систему в графические редакторы InDesign, Photoshop и Illustrator.

Paletton

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

Color Reference

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

3. Делаем палитру доступной

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

WebAIM Color Contrast Checker

Одни тона прекрасно сочетаются друг с другом, другие же – совсем наоборот. Огромное количество проектов не проходят тест А/А, и это факт. Очень важно проверять визуальное оформление интерфейса и контрастность тонов, особенно если на странице много текста. Для этих целей используйте WebAIM Color Contrast Checker при подборе цветов сайта.

WebAIM Color Contrast Checker – веб-инструмент, с помощью которого проверяются цветовые коды в шестнадцатеричных значениях.

Coolors

О данном сервисе мы уже упоминали выше. Кроме всего прочего Coolors также поможет вам проверить придуманную палитру на цветовую слепоту.

Тип цветовой слепоты в схеме

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

Так человек с протаномалией видит палитру

NoCoffee Vision Simulator для Chrome

С помощью сайта NoCoffee Vision Simulator сможете просмотреть, как люди с цветовой слепотой или слабым зрением будут воспринимать определенные веб-страницы. Например, указав параметр «Ахроматопсия» в секции «Color Deficiency», вы увидите веб-страницу в сером цвете.

Так выглядит проект CNN для человека с дейтеранопией

Заключение

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

design-mania.ru

15 генераторов по подбору цвета

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

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

В подборке нашего сайта я выделила 2 категории подобных сервисов — русскоязычные и англоязычные.

Русские сервисы сочетания цветов

  1. colorscheme — цветовой круг онлайн. Это инструмент для подбора и генерации цветовых схем. Вы можете выбрать один и вариантов сочетания цвета. Вы можете посмотреть шаблон дизайна страницы в выбранном сочетании цветов. Интересно также и то, что вы можете «посмотреть» на вашу палитру глазами других людей, имеющих некоторые отклонения в цветовосприятии.
  2. In colour balance — всевозможные цветовые палитры, выделенные из лучших образцов фото.
  3. colorup.tikkurila — помощь в поиске удачной цветовой схеме для интерьера, а также палитры для внешней отделки. Пригодится для работы дизайнерам интерьеров, архитекторам.
  4. Color Adobe — сайт этот, конечно же не русский, но с поддержкой русского языка, и он будет понятен русскоговорящим, поэтому я и отнесла его сэту группу. Очень удобный подбор цвета. Изменяйте положение указателя на цветовой круге и выбирайте схему по определенной цветовой системе.
  5. Генератор цветовых схем

Англоязычные сайты по подбору цвета

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

  1. Random Material Generator — название генератора указывает на случайность выбора цветовой палитры. Нажмите на кнопку «Generate different random combination» для генерации цветовой схемы.
  2. Material Mixer — позволяет смешать и посмотреть сочетания двух цветов.
  3. Colorhunter — готовые цветовые решения.
  4. Palette Generation — генерация оттенков цвета.
  5. Material Palette — выберите 2 цвета, и вы увидите еще цвета, которые подходят для вашего дизайна.
  6. Colorotate — воспользуйся конусом для создания собственной цветовой схемы. Чтобы пользоваться сайтом, разрешите загрузку Adobe Flash алеера в вашем браузере.
  7. Colorblender — Вам нужно определить алгоритм сочетания цвета и, перемещая ползунки, выберите сочетания цвета по RGB. Если вы затрудняетесь, то на этой же странице вы найдете ссылку на полную таблицу сочетания цвета.
  8. Colorspire — еще один простой цветовой круг, который поможет вам выбрать базовые цветовые сочетания, подобрать светлые, темные оттенки и т.д.
  9. Paletton — подбор сочетания цветов в зависимости от разных цветовых систем.
  10. Colorexplorer  — двигайте ползунки и выбирайте схему!

vgrafike.ru

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

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

 

Богатство и приключения

Отлично подходит для: стиля спортивных товаров и имиджа, связанного с приключениями

 

Тёплая античность

Отлично подходит для: органической продукции

 

Вода

Отлично подходит для: создания стиля связанного с морем или технологиями

 

Тропический пунш

Отлично подходит для: подчёркивания индивидуальности и создания ярких эмоций у зрителей

 

Боливийсая красота

Отлично подходит для: подчёркивания контраста текста или форм

 

Осенняя коллекция

Отлично подходит для: стиля утончённой продукции и товаров для зрелых людей 

 

Очень венецианский

Отлично подходит для: стиля фруктового или овощного бренда

 

Винтажный закат

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

 

Микс из календулы

Отлично подходит для: создания оптимистичного стиля

 

Северные леса

Отлично подходит для: стиля мужского бренда и товаров, направленных на мужскую аудиторию

 

Зелёный и золотой

Отлично подходит для: создания контраста и получения эффекта в использовании текста на фоне

 

Балеарское баунти

Отлично подходит для: флористики и всего, что связано с конфетами

 

Аква-армия

Отлично подходит для: создания стиля компаний, связанных с водой, включая компании занимающиеся производством напитков

 

Час сиесты

Отлично подходит для: брендов из пищевой и винодельной промышленности

 

Глубокие размышления

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

 

Послеобеденное наслаждение

Отлично подходит для:интерьера и создания стиля бренда, занимающегося товарами для дома

 

Греческий салат

Отлично подходит для: создания сильного богатого стиля

 

Связь с Францией

Отлично подходит для: оформления свадеб и приглашений

 

Безмятежная сакура

Отлично подходит для: создания тёплого современного имиджа

 

Утренний туман

Отлично подходит для: стиля производственной и строительной промышленности

4tololo.ru

Названия цветов в палитрах. - Красота, вдохновленная природой

Здравствуйте,  дорогие=) Чтобы  вы  без  меня  не  скучали - сегодня  вам  мини- подарок.  Помните, я  давала  ссылки  на  сайт, где  можно  подобрать  оттенки  с  названиями?  Так  вот,  из  любопытства  я  их  раскидала  по  12  цветотипам (на  самом  сайте  можно  попробовать  это  сделать  по  маркировкам,  но  маркировка  в  некоторых  случаях  не  совпадает. По маркировкам  кто-то  уже  делал,  эти  варианты  гуляют  на  pinterest. Но  там  есть  некоторые  несоответствия  реальности)

Число, конечно, неровное  получилось на  каждый  цветотип,  но, думаю,  такого рода  палитры  пригодятся=)


Яркая  весна

Яркая  зима

Мягкая  осень

Мягкое  лето

Темная  осень

Темная  зима

Светлая  весна

Светлое  лето

Холодное  лето

Холодная  зима

Теплая  осень

Теплая  весна

color-harmony.livejournal.com

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *