8 сайтов с палитрами — Каждый пиксель важен
Выбор цветовой палитры задача всегда сложная, будь то дизайн веб-сайта или мобильного приложения. Не стоит выбирать цвета спустя рукава, ведь качественно подобранная палитра задает стиль всему сайту.
Каждый раз при разработке нового веб-дизайна много времени уходит на выбор различных цветовых комбинаций. Альтернативные инструменты цветовой палитры помогут в будущем сэкономить вам время.
Существует большое количество приложений для подбора цветовой палитры, но в этом списке были отобраны инструменты, несколько отличающиеся от стандартных программ.
1 – Colorhexa
Сайт с говорящим названием, где собрана и подробно представлена информация о цвете. Он больше похож на инструмент разработчика, где есть и сложения и вычитания, доступно создание градиентов с точным указанием кода цвета во всех возможных цветовых пространствах. Такой подход удобен для тех, у кого есть свободное время, а так же необъяснимая любовь к вычислениям.
2 – Colllor
Дружелюбный и теплый «ламповый» сервис, который радует с первой минуты знакомства. Логика сайта заключается в том, что вы выбираете «один цвет», и сервис предлагает подходящие для него решения: градиент, разбег по самому темному и светлому оттенку, чуть приглушенные или яркие оттенки выбранного цвета.
3 – Design Seeds
В отличие от предыдущих сервисов, данный сайт демонстрирует уже готовые подобранные палитры, на которых отражено, как цвета взаимодействуют друг с другом на прикрепленных фотографиях. Рассматривая морские волны или цветы, поражаешься, как богата природа в своём творческом порыве, и как скудны наши познания в цвете. В целом, это ценный ресурс для тех, кто только начинает разбираться в цветовых сочетаниях и любит красивые картинки.
4 – 0to255
Как описывает автор свой ресурс: «я сделал сайт 0to255, чтобы упростить свою работу». Веб-дизайнеры и люди схожих профессий работают с цветами каждый день. Выбирая нужный, им необходимы его различные оттенки, а используя данный сервис можно легко сэкономить время, не обременяя себя редактированием шестнадцатеричного кода.
5 – Pictaculous
Решение для тех, кто любит находить цвета в изображениях. Достаточно загрузить изображение и сервис выдаст палитру основных цветов с шестнадцатеричным кодом.
6 – ColoRotate: mobile
Кому может понадобиться приложение по подбору цветовых решений для планшета? Вероятно тем, кто не просто работает с цветом, а живет с ним, или людям со способностью к синестезии. Сайт же предлагает, схожий, но немного урезанный функционал интерфейса, разработанный для планшета. К сожалению, на сайте имеются недоработки, например, 3D спектр, который является фишкой сайта, на деле оказывается неудобным в использовании.
7 – Color Explorer
В американских сериалах, часто говорят фразу «Только если бы ты был последним мужчиной на земле», в нашем же случае «Если нет любого графического редактора под рукой». Сухо, обычно, неинтересно. Нет в нём ни шарма, ни желания взаимодействовать, видимо, продукт давно не развивают.
8 – Copaso
Сложно назвать этот сайт простым, ведь создатели уместили в него всё, что могло бы понадобиться при работе с цветом. Здесь есть все: большой выбор подборок, каналов, тренды, различного вида инструменты для создания паттернов, поиск цветов по изображению. В общем, всё, что душа пожелает.
Photocopa
Подведём итог:
Несмотря на разнообразие сервисов по выбору цветов, всё же Adobe Kuler, по мнению нашей редакции, можно назвать лучшим, если судить по возможности выбора цветовых сочетаний.
Kuler
Одним из основных преимуществ данного миксера цветов является возможность сохранять свои подборки, просматривать выбранные цвета на весь экран, а так же делиться своими находками и смотреть чужие. А для тех, кто уже не хочет расставаться с данным сервисом ни на минуту, существует плагин для Photoshop, который позволяет пользоваться программой без отрыва от редактора.
фото: Дмитрий КутлаевПохожееБезопасные веб цвета » Инструменты вебмастера
Когда было время 256-цветных мониторов применялась «безопасная палитра», конечно она применяется и сейчас. У безопасной палитры всего три главных цвета для смешивания — R G B и соответствуют значениям: 00, 33, 66, 99, CC, FF.Вашему вниманию представляется палитра «безопасных веб цветов», которые одинаково хорошо будут отображаться во всех браузерах и во всех оперативных системах.
| Имя цвета для HTML | Код для HTML | R G B |
|---|---|---|
Красные | ||
| IndianRed | CD 5C 5C | 205 92 92 |
| LightCoral | F0 80 80 | 240 128 128 |
| Salmon | FA 80 72 | 250 128 114 |
| DarkSalmon | E9 96 7A | 233 150 122 |
| LightSalmon | FF A0 7A | 255 160 122 |
| Crimson | DC 14 3C | 220 20 60 |
| Red | FF 00 00 | 255 0 0 |
| FireBrick | B2 22 22 | 178 34 34 |
| DarkRed | 8B 00 00 | 139 0 0 |
Розовые | ||
| Pink | FF C0 CB | 255 192 203 |
| LightPink | FF B6 C1 | 255 182 193 |
| HotPink | FF 69 B4 | 255 105 180 |
| DeepPink | FF 14 93 | 255 20 147 |
| MediumVioletRed | C7 15 85 | 199 21 133 |
| PaleVioletRed | DB 70 93 | 219 112 147 |
Оранжевые | ||
| LightSalmon | FF A0 7A | 255 160 122 |
| Coral | FF 7F 50 | 255 127 80 |
| Tomato | FF 63 47 | 255 99 71 |
| OrangeRed | FF 45 00 | 255 69 0 |
| DarkOrange | FF 8C 00 | 255 140 0 |
| Orange | FF A5 00 | 255 165 0 |
Жёлтые | ||
| Gold | FF D7 00 | 255 215 0 |
| Yellow | FF FF 00 | 255 255 0 |
| LightYellow | FF FF E0 | 255 255 224 |
| LemonChiffon | FF FA CD | 255 250 205 |
| LightGoldenrodYellow | FA FA D2 | 250 250 210 |
| PapayaWhip | FF EF D5 | 255 239 213 |
| Moccasin | FF E4 B5 | 255 228 181 |
| PeachPuff | FF DA B9 | 255 218 185 |
| PaleGoldenrod | EE E8 AA | 238 232 170 |
| Khaki | F0 E6 8C | 240 230 140 |
| DarkKhaki | BD B7 6B | 189 183 107 |
Фиолетовые | ||
| Lavender | E6 E6 FA | 230 230 250 |
| Thistle | D8 BF D8 | 216 191 216 |
| Plum | DD A0 DD | 221 160 221 |
| Violet | EE 82 EE | 238 130 238 |
| Orchid | DA 70 D6 | 218 112 214 |
| Fuchsia | FF 00 FF | 255 0 255 |
| Magenta | FF 00 FF | |
| MediumOrchid | BA 55 D3 | 186 85 211 |
| MediumPurple | 93 70 DB | 147 112 219 |
| BlueViolet | 8A 2B E2 | 138 43 226 |
| DarkViolet | 94 00 D3 | 148 0 211 |
| DarkOrchid | 99 32 CC | 153 50 204 |
| DarkMagenta | 8B 00 8B | 139 0 139 |
| Purple | 80 00 80 | 128 0 128 |
| Indigo | 4B 00 82 | 75 0 130 |
| SlateBlue | 6A 5A CD | 106 90 205 |
| DarkSlateBlue | 48 3D 8B | 72 61 139 |
Зелёные | ||
| GreenYellow | AD FF 2F | 173 255 47 |
| Chartreuse | 7F FF 00 | 127 255 0 |
| LawnGreen | 7C FC 00 | 124 252 0 |
| Lime | 00 FF 00 | 0 255 0 |
| LimeGreen | 32 CD 32 | 50 205 50 |
| PaleGreen | 98 FB 98 | 152 251 152 |
| LightGreen | 90 EE 90 | 144 238 144 |
| MediumSpringGreen | 00 FA 9A | 0 250 154 |
| SpringGreen | 00 FF 7F | 0 255 127 |
| MediumSeaGreen | 3C B3 71 | 60 179 113 |
| SeaGreen | 2E 8B 57 | 46 139 87 |
| ForestGreen | 22 8B 22 | 34 139 34 |
| Green | 00 80 00 | 0 128 0 |
| DarkGreen | 00 64 00 | 0 100 0 |
| YellowGreen | 9A CD 32 | 154 205 50 |
| OliveDrab | 6B 8E 23 | 107 142 35 |
| Olive | 80 80 00 | 128 128 0 |
| DarkOliveGreen | 55 6B 2F | 85 107 47 |
| MediumAquamarine | 66 CD AA | 102 205 170 |
| DarkSeaGreen | 8F BC 8F | 143 188 143 |
| LightSeaGreen | 20 B2 AA | 32 178 170 |
| DarkCyan | 00 8B 8B | 0 139 139 |
| Teal | 00 80 80 | 0 128 128 |
Синие | ||
| Aqua | 00 FF FF | 0 255 255 |
| Cyan | 00 FF FF | 0 255 255 |
| LightCyan | E0 FF FF | 224 255 255 |
| PaleTurquoise | AF EE EE | 175 238 238 |
| Aquamarine | 7F FF D4 | 127 255 212 |
| Turquoise | 40 E0 D0 | 64 224 208 |
| MediumTurquoise | 48 D1 CC | 72 209 204 |
| DarkTurquoise | 00 CE D1 | 0 206 209 |
| CadetBlue | 5F 9E A0 | 95 158 160 |
| SteelBlue | 46 82 B4 | 70 130 180 |
| LightSteelBlue | B0 C4 DE | 176 196 222 |
| PowderBlue | B0 E0 E6 | 176 224 230 |
| LightBlue | AD D8 E6 | 173 216 230 |
| SkyBlue | 87 CE EB | 135 206 235 |
| LightSkyBlue | 87 CE FA | 135 206 250 |
| DeepSkyBlue | 00 BF FF | 0 191 255 |
| DodgerBlue | 1E 90 FF | 30 144 255 |
| CornflowerBlue | 64 95 ED | 100 149 237 |
| MediumSlateBlue | 7B 68 EE | 123 104 238 |
| RoyalBlue | 41 69 E1 | 65 105 225 |
| Blue | 00 00 FF | 0 0 255 |
| MediumBlue | 00 00 CD | 0 0 205 |
| DarkBlue | 00 00 8B | 0 0 139 |
| Navy | 00 00 80 | 0 0 128 |
| MidnightBlue | 19 19 70 | 25 25 112 |
Коричневые | ||
| Cornsilk | FF F8 DC | 255 248 220 |
| BlanchedAlmond | FF EB CD | 255 235 205 |
| Bisque | FF E4 C4 | 255 228 196 |
| NavajoWhite | FF DE AD | 255 222 173 |
| Wheat | F5 DE B3 | 245 222 179 |
| BurlyWood | DE B8 87 | 222 184 135 |
| Tan | D2 B4 8C | 210 180 140 |
| RosyBrown | BC 8F 8F | 188 143 143 |
| SandyBrown | F4 A4 60 | 244 164 96 |
| Goldenrod | DA A5 20 | 218 165 32 |
| DarkGoldenrod | B8 86 0B | 184 134 11 |
| Peru | CD 85 3F | 205 133 63 |
| Chocolate | D2 69 1E | 210 105 30 |
| SaddleBrown | 8B 45 13 | 139 69 19 |
| Sienna | A0 52 2D | 160 82 45 |
| Brown | A5 2A 2A | 165 42 42 |
| Maroon | 80 00 00 | 128 0 0 |
Белые | ||
| White | FF FF FF | 255 255 255 |
| Snow | FF FA FA | 255 250 250 |
| Honeydew | F0 FF F0 | 240 255 240 |
| MintCream | F5 FF FA | 245 255 250 |
| Azure | F0 FF FF | 240 255 255 |
| AliceBlue | F0 F8 FF | 240 248 255 |
| GhostWhite | F8 F8 FF | 248 248 255 |
| WhiteSmoke | F5 F5 F5 | 245 245 245 |
| Seashell | FF F5 EE | 255 245 238 |
| Beige | F5 F5 DC | 245 245 220 |
| OldLace | FD F5 E6 | 253 245 230 |
| FloralWhite | FF FA F0 | 255 250 240 |
| Ivory | FF FF F0 | 255 255 240 |
| AntiqueWhite | FA EB D7 | 250 235 215 |
| Linen | FA F0 E6 | 250 240 230 |
| LavenderBlush | FF F0 F5 | 255 240 245 |
| MistyRose | FF E4 E1 | 255 228 225 |
Серые | ||
| Gainsboro | DC DC DC | 220 220 220 |
| LightGrey | D3 D3 D3 | 211 211 211 |
| Silver | C0 C0 C0 | 192 192 192 |
| DarkGray | A9 A9 A9 | 169 169 169 |
| Gray | 80 80 80 | 128 128 128 |
| DimGray | 69 69 69 | 105 105 105 |
| LightSlateGray | 77 88 99 | 119 136 153 |
| SlateGray | 70 80 90 | 112 128 144 |
| DarkSlateGray | 2F 4F 4F | 47 79 79 |
| Black | 00 00 00 | 0 0 0 |
Яркие цвета в веб-дизайне — плюсы и минусы яркой цветовой палитры в дизайне сайта
Сегодня в трендах веб-дизайна присутствуют не только минималистичные сайты с минимум цветовых оттенков, но и яркие ресурсы, на которых используются самые невозможные сочетания и принты. В этой статье мы расскажем, как выбрать цветовую палитру для своего сайта, какие преимущества могут быть у ярких цветов, и есть ли негативные последствия от применения таких оттенков для пользователей и конверсии ресурса.
Немного о цвете в веб-дизайне
Веб-дизайнеры похожи на художников — перед составлением макета тщательно выбираются оттенки цвета, составляется композиция, и только потом наносятся основные «штрихи». Разберемся, какие особенности приходится учитывать дизайнерам при выборе цветовой палитры для создания сайта.
В интернет-пространстве существует около 16,8 миллионов цветов. Однако все цвета являются составляющими трех базовых оттенков — красного, зеленого и голубого. Такая модель называется RGB, аббревиатура, которая состоит из первых букв представленных цветов: R — red (красный), G — green (зеленый), B — blue (голубой).
В зависимости от количества того или иного цвета, можно «вывести» новый цветовой оттенок, задавая определенные значения в модели RGB. Например:
Видно, что полученный оттенок содержит интенсивность 255 для красного, 100 для зеленого и 200 для голубого.
Также все цвета можно «разбавить» белым или черным цветом и получить различные оттенки. Например, оттенки синего:
Таким образом, дизайнеры имеют огромный выбор цветов для макета. От того, какие цвета выберет разработчик, зависит:
- легкость восприятия контента. Пользователи обращают особое внимание на палитру — иногда слишком яркие цвета отвлекают клиентов от полезного контента или мешают восприятию. Например, слишком яркий фон для текста уменьшает его читабельность, поэтому пользователь может проигнорировать контент;
- эмоциональная составляющая сайта. Цветовые оттенки напрямую влияют на эмоции, которые испытывает пользователь при просмотре контента. Различают холодные и теплые цвета, которые вызывают разные чувства — так, холодный синий ассоциируется со строгостью и сдержанностью;
- ассоциация с брендом. Как известно, цвета — один из самых распространенных способов создать фирменный стиль и повысить узнаваемость бренда. Проще всего иллюстрировать данный прием на примере самых популярных сотовых операторов:
Красный прочно ассоциируется у пользователей с МТС, зеленый — с Мегафон и так далее. Цвет у компаний — прочная составляющая бренда, которая позволяет узнавать компанию, даже не используя логотип напрямую.
При выборе цвета дизайнеры учитывают вышеперечисленные факторы. Соблюдение фирменного стиля, формирование у пользователя соответствующего настроения и облегчение восприятия — три главных цели при выборе оттенка.
Как дизайнеры составляют палитры
Способов составления цветовой палитры для сайта множество. Существуют как специальные сервисы для подбора цветов к макету, так и просто вдохновляющие идеи из искусства, фотографии и прочего.
Например, есть сайты, на которых можно посмотреть различные цветовые сочетания на реальных примерах. Например, сайт dribble:
Кроме того, большинство дизайнеров ориентируется на созданный для компании брендбук — руководство по использованию фирменного стиля организации. Часто в фирменный стиль входят цветовые оттенки, которые необходимо обязательно использовать в макете. Также в фирменный стиль могут входить различные принты и текстуры. Больше об элементах айдентики на сайте можно прочитать в этой статье.
Еще один способ выбрать цвета для сайта — вдохновляться искусством и шедеврами художников, которые отлично разбирались во влиянии цвета на эмоции людей. Например, «разобрать» картины на цвета:
Больше о поиске идей мы писали здесь.
Преимущества яркой цветовой палитры
Все чаще дизайнеры отказываются от серых скучных палитр и выбирают для макетов яркие сочные цвета. Разберемся, в чем плюсы и минусы такого подхода и приведем примеры сайтов с яркой цветовой палитрой.
Запоминаемость ресурса
Яркие и необычные цветовые сочетания — отличный способ создать уникальный и запоминающийся ресурс. Например, использование ярких иллюстраций или фотографий, фона для заголовков или целых блоков:
На примере представлен сайт, где используются рисованные иллюстрации и насыщенная палитра цветов. Такой прием запоминается пользователями своей необычностью и яркостью, по сравнению с классическими сайтами и традиционной структурой в виде горизонтального меню и контентной части.
Запоминаемость ресурса и компании в целом — важная составляющая влияния бренда на продажи. Если организация не на слуху, не запоминается клиентами — компания теряет возможность приобрести постоянных заказчиков и ей остается только привлекать новых клиентов.
Эмоции
Яркие цвета — это всегда про эмоции. Яркие цвета влияют на настроение, создают особую атмосферу на сайте, вызывают определенные ассоциации с продуктом.
Выбранный дизайнерами цвет для оформления — мятный, который вызывает чувство свежести, ассоциируется с чистотой, здоровьем. Кокосовый вкус как раз подходит под эти ассоциации, поэтому пользователю будет вспоминаться именно это изображение.
Стиль
Яркая цветовая палитра является одним из трендов веб-дизайна. «Скучный» минимализм уже никого не удивляет, и дизайнеры ищут новые направления, в которых можно создать уникальный дизайн и привлекать пользователей. Например, один из «законодателей» трендов в веб-дизайне Apple использует для своих баннеров цветной градиент:
Одно из популярных направлений в веб-дизайне стиль Flat — также характеризуется яркой цветовой палитрой. Подробнее об этом можно прочитать в нашем блоге.
Становление бренда
Мы уже говорили о влиянии цветов на фирменный стиль и восприятие бренда. Приведем еще один пример того, как один или несколько цветов могут ассоциироваться с компанией и брендом.
Яркий пример — компания Google. У организации есть несколько обозначений, по которым узнается бренд: это сама надпись перед поисковой строчкой, а также логотипы их продуктов — браузер, диск и так далее.
Такие цвета использует Google для своих логотипов:
Таким образом, набор данных оттенков прочно ассоциируется с компанией. Такой способ позволяет увеличить узнаваемость бренда и, как следствие, повысить продажи.
Яркая цветовая палитра — отличная составляющая фирменного стиля. Бренды, использующие выразительные цвета вместе с интересными иллюстрациями или символами всегда больше запоминаются клиентами. Мы привыкли ассоциировать красную букву «Я» с компанией «Яндекс», различаем по цветам всех операторов, узнаем на улицах курьеров Delivery Club только по зеленой куртке и сумке. Несмотря на то, что цвет не является торговым знаком (зарегистрировать цвет очень сложно, хотя такие прецеденты случались в странах Европы) его можно с успехом использовать как ассоциативную составляющую бренда.
Креативность
Яркая цветовая палитра — отличный способ проявить креативность и создать по-настоящему уникальный дизайн. Сейчас структура, серые цвета без ярких акцентов и «серьезность» ушли в прошлое — в трендах яркие оттенки, креативные текстуры, анимация и многое другое.
Теперь увидеть необычные сайты стало легче. Дизайнеры придумывают новые концепции, соединяют несочетаемое, работают с фотографией и произведениями искусства и придумывают настоящие шедевры. Яркая цветовая палитра встречается даже на новостных порталах и информационных сайтах — так ресурсы перестают быть одинаковыми и завоевывают любовь все новых и новых пользователей.
Яркий пример — сайт «Тинькофф журнал». Издание стало популярным не только благодаря интересному контенту, но и необычному дизайну и интересной типографике:
Таким образом, дизайнерам предоставлена возможность работать с различными направлениями и создавать новые цветовые сочетания. Рисованные плоские иллюстрации, цветные блоки, 3D-типографика и анимационные переходы — все это входит в норму веб-дизайна и становится отличительными особенностями сайтов, на которых не только легко воспринимать контент, но и просто приятно находится.
Повышение продаж
Еще одна причина, почему яркие цвета популярны в веб-дизайне — повышение уровня конверсии. Дизайнеры научились управлять вниманием пользователей с помощью цвета — например, выделять особо важные элементы (призывы к действию, социальные доказательства) более яркими оттенками.
Также яркие цвета часто используют на промо-сайтах. Продукты презентуют в ярких красках, которые вызывают положительные эмоции у клиентов:
Больше об оформлении промо-сайтов мы писали в этой статье.
В целом яркая цветовая палитра — отличный инструмент повышения продаж при грамотном использовании оттенков и составлении удобной структуры для пользователей. Однако, есть несколько недостатков, которые стоит учитывать при использовании таких цветов в дизайне сайтов.
Недостатки яркой цветовой палитры
Несмотря на то, что яркая цветовая палитра остается в трендах, некоторые сайты могут потерять клиентов при неправильном распределении цветов или неправильном составлении структуры сайтов. Рассмотрим подробнее недостатки яркой палитры и способы решения возникающих проблем.
Сложности с юзабилити
Основной недостаток ярких цветов — возникающие сложности с юзабилити. Креативные сочетания, анимация и другие составляющие ярких сайтов неизбежно влияют на удобство пользования. Традиционные элементы, к которым привыкают пользователи, могут скрываться (например, горизонтальное меню часто прячут за значок «гамбургера»), недостаточно прорабатываются элементы навигации.
Как решить эту проблему? В первую очередь, необходимо соблюдать баланс между креативностью и юзабилити. Например, оставлять важные элементы для пользователей и, в то же время, вставлять необычные детали или анимацию. Более подробно о балансе креативности и юзабилити мы рассказываем здесь.
Сложности с восприятием контента
Еще одна распространенная проблема — сложности с восприятием контента, чаще всего текстового. Яркие тона отвлекают пользователей от надписей, переводят внимание на изображения и клиенты могут не узнать важную информацию — о компании, новых товарах, акциях и прочее. Иногда дизайнеры вставляют модную крупную типографику, которая также снижает читабельность текста:
В этом случае дизайнерам нужно тщательно продумывать структуру сайта и подбирать палитру. Важный контент лучше выделять рамкой или яркими вставками, а главные элементы следует располагать таким образом, чтобы пользователь четко выделял композицию и понимал, какой шаг стоит сделать дальше.
Несоответствие тематике
Еще одна распространенная проблема — несоответствие цветовой палитры посылу, смыслу и теме сайта. Например, яркие цвета неуместны на каких-то исторических сайтах, розовые оттенки не добавляют странице «серьезности», если это необходимо.
Такой диссонанс возникает, когда дизайнеры поддаются веяниям моды и забывают о назначении ресурсов. Также стоит помнить о целевой аудитории — если в качестве ЦА выступают люди, которые далеки от современных трендов, лучше остановиться на классическом варианте с понятными навигационными элементами и не использовать креативные детали.
Студия дизайна IDBI в своих работах использует как яркие цветовые сочетания, так и классические представления о сайтах. Мы создаем интернет-магазины с ярким оформлением, промо-сайты с эффектной презентацией товара и обычные ресурсы для размещения новостных сводок. Мы обращаем внимание на назначение сайта, принимаем во внимание брендбуки и другие атрибуты фирменного стиля. Яркие палитры часто используем в призывах к действию и навигационных элементах, чтобы сделать сайты удобными для пользователей и увеличить уровень конверсии ресурса. Наши работы можно посмотреть в разделе «Портфолио».
«Безопасные» или Web Safe цвета для веб-дизайна
4.9 из 5 на основе 9 оценок
18.12.2015«Безопасные», Web Safe или Browser Safe цвета – это палитра, состоящая из 216 оттенков, которые отображаются максимально точно независимо от монитора компьютера или выбранного браузера, способного отображать, по крайней мере, 8-ми битный цвет (256 цветов). Причина наличия в палитре только 216 вместо максимальных 256-ти цветов заключена в том, что именно эти основные цвета отображаются на всех компьютерах одинаково.
Более десяти лет назад, большинство компьютеров способно было отображать максимум 256 цветов одновременно. Причин было достаточно много, однако самой главной была высокая стоимость видеопамяти.
Определяли 256 цветов согласно математической формуле, а не по их эстетическим характеристикам, так как описывались они всего 8-мью битами компьютерной информации. Эта базовая палитра и включает в себя 216 цветов, которые сегодня мы называем «безопасными».
Web Safe цвета определяются таким градациями RGB: 0, 51, 102, 153, 204 и 255 (0, 33, 66, 99, СС, FF), которые указывают на процентное присутствие того или иного цвета: 0, 20, 40, 60, 80 и 100%.
Когда необходимо использовать «безопасные» цвета?
Если ваш веб-сайт имеет какой-либо цветной фон, то лучше всего для этой цели использовать именно Web Safe цвета. Таким образом, это гарантирует вам, что цвет не будет смущать пользователя при отображении на разных компьютерных платформах. Не стоит забывать и о том, что даже старые компьютеры, которых еще сохранилось достаточно большое количество и все еще активно используются, будут представлять ресурс точно, без колебаний и различий в цветах.
Если вы создаете картинки, текст или любые другие элементы, стоит обращаться к Web Safe палитре, так как это позволит получать более чистое изображение, отображаемое и для вас, и для пользователя всегда одинаково.
К сожалению, точной инструкции по подбору правильной цветовой палитры, которая бы привлекала, а не отталкивала пользователя, нет. Это субъективное понятие. Однако обратившись к основной «безопасной» палитре вы сможете не сомневаться в том, что каждый точно воспринимает представленный на сайте цвет.
Предлагаем вам ознакомиться с перечнем цветов HTML, который содержит в себе всю «безопасную» палитру и из которого вы сможете выбрать свои варианты оттенков для оформления дизайна.
По материалам http://www.htmlgoodies.com/
Лучшие цвета для оформления сайта: палитры из кино
Один из первых вопросов, который встает перед созданием сайта — какие цвета выбрать для дизайна. Ведь они влияют не только на внешний вид и стиль, но и на успех с точки зрения продолжительности посещения и продаж.
- Лучшие цвета для оформления сайта
- Цвета для сайта на тему мода и красота
- Спорт, хобби и развлечения
- Бизнес и услуги
- Цветовые тренды 2020 года
Выбор цветовой палитры — это сложный процесс из-за бесконечного количества возможных комбинаций. Веб-дизайнеры часами могут щелкать по цветовому кругу в Photoshop в поисках того самого идеального оттенка, который бы “зажег” дизайн.
Мы командой TemplateMonster решили, что отличным источником вдохновения может стать кинематограф и подготовили для вас цветовые палитры из кадров знаменитых фильмов.
Лучшие цвета для оформления сайта
При выборе цветовой палитры для сайта подумайте, какие чувства и эмоции он должен передавать. Вот 5 основных цветов и ассоциации, которые возникают с ними у людей:
- Синий: уверенность, спокойствие, успех
- Фиолетовый: очарование, гламур, престиж
- Зеленый: прочность, экологичность, надежность
- Желтый: современность, задор
- Красный: уверенность в себе, экспертность, мотивация
Холодные цвета отлично передают профессионализм и спокойствие. Теплые цвета — хороший выбор, если ваш бренд отражает энергию, страсть и энтузиазм. Используйте правило, где 60% — доминирующий оттенок, 30% — вторичный цвет, а 10% — акценты (например, СТА).
Итак, взгляните на эти цветовые палитры — каждая из них может привнести в ваш дизайн особую атмосферу!
Цвета для сайта на тему мода и красота
Интернет-магазин одежды
Причудливые пастельные тона выглядят свежо, стильно и молодежно. Они фокусируют внимание посетителей на продукте и помогают отличать группы товаров.
«Эдвард Руки-ножницы»
Эта палитра подойдет для сайта магазина женской одежды, аксессуаров и украшений.
“Волк с Уолстрит”
Сайт свадебного салона
“Мария-Антуанетта”
Сайт салона красоты
“Волк с Уолл-стрит”
Спорт, хобби и развлечения
Сайт на тему автомобили
Красный — цвет страсти, энергии, скорости. В продуманном сочетании с черным и синим придаст сайту авторитетности.
“Неоновый демон”
Сайт в тематике развлечения
Фиолетовый — самый трендовый цвет в 2018 году. Он уже давно ассоциируется с роскошью, властью и богатством. Творческим сайтам он придаст особую магическую атмосферу.
“Бегущий по лезвию 2049”
Магазин домашнего декора
Эта палитра сочетает бежевые с богатыми темными тонами, придавая свет, воздушность и атмосферу уюта.
“Леон-киллер”
Сайт фотографа
“Ребенок Розмари”
Спортивный сайт
“Омерзительная восьмерка”
Бизнес и услуги
Сайт ресторана
Теплые коричневые оттенки символизируют уют, натуральность и традиции.
“От заката до рассвета”
Сайт недвижимости
Эта палитра вызывает особый психологический отклик. Коричневые и оранжевые оттенки ассоциируются с землей, энергией и уютом, а зеленые — с жизненной силой и устойчивостью. Это, определенно, лучшие цвета для оформления сайта недвижимости.
“Светская жизнь”
Медицинский сайт
Медицинские сайты должны вызывать доверие и чувство исцеления. Это хорошо выходит у синих оттенков.
“Шоу Трумана”
Зеленые оттенки приятны глазу и визуально успокаивают. Когда посетители видят зеленый цвет, они часто связывают его расслаблением, безопасностью и гармонией.
“Бронсон”
Сайт турагентства
Сине-белые и серые оттенки создают идеально мягкое и просторное ощущение на сайте. А коралловые и бирюзовые цвета можно использовать для выделения важных элементов.
“Любовь и милосердие”
Бизнес-сайт
Сильный красный и уверенный синий выражают авторитет и обладают силой убеждения, а богатые коричневые оттенки придают тепло.
“Марсианин”
“Оно”
Хотите выглядеть благонадежно? Выбирайте синий. Это цвет безопасности и надежности — именно то, что хотят чувствовать люди при обращении с их деньгами. Эти оттенки часто используют банки, финансовые консультанты и популярные соцсети.
“Труп невесты”
Сайт адвоката
“Темный рыцарь”
Интернет-магазин электроники
Веселый и игривый желтый цвет привлекает внимание. Его можно использовать в названии бренда, СТА-кнопках, навигационных элементах в сочетании с нейтральными тонами.
“Афера по-американски”
“Терминатор”
Цветовые тренды 2020 года
Информация взята с www.shutterstock.com
Откройте для себя Lush Lava, Aqua Menthe и Phantom Blue — три оттенка, которые будут доминировать в 2020 году и продемонстрировать тенденцию к максимализму и насыщенным оттенкам.
Будь то ответ на минималистскую одержимость последних лет или коллективное стремление к самовыражению, идея, что больше — это больше , поднялась на новую высоту. От моды к изобразительному искусству мы наблюдаем переход от мягких пастельных цветов к более сенсационным оттенкам. Лаванда, загар, белый и розовый цвета становятся пассивными, в то время как эти три смелых, насыщенных оттенка находятся на пути к славе в 2020 году.
Пышная лава
взято с www.shutterstock.comПри практическом использовании этот захватывающий цвет легко бросается в глаза — идеальный инструмент для компаний, стремящихся немедленно привлечь внимание к своему брендингу.
Аква Менте
Взято с www.shutterstock.comЯркий, но безмятежный тон идеально подходит для передачи игривой, современной и общительной личности. Будь то акцент или основной цвет, это отличный выбор для забавных и современных брендов.
Фантомный синий
Более темные тона передают стабильность, надежность и утонченность, и Phantom Blue не является исключением. Несмотря на то, что он поразителен сам по себе, он также является идеальным компаньоном для ярких контрастных цветов.
Надеемся, эти цветовые решения пришлись вам по душе. А если вы ищете идеи для создания сайта, на TemplateMonster уже есть готовые шаблоны различных тематик. В поиске, кроме фильтра движка и категории шаблона, вы также можете выбрать нужные цвета. Попробуйте!
Друзья, а какая палитра понравилась вам больше всего? Из чего вы черпаете вдохновение? Поделитесь с нами!
Читайте также:
10+ трендов веб дизайна 2020
Дизайн в пастельных тонах: примеры использования
40 Бесплатных Photoshop градиентов для дизайна
    Использование Photoshop CS4 |
Цвет / Выбор цветовВ палитре цветов Adobe цвет выбирается с использованием четырех цветовых моделей: HSB, RGB, Lab и CMYK. Палитра позволяет выбрать основной, фоновый и текстовый цвета, а также устанавливать целевые цвета для различных инструментов, команд и параметров.Палитру цветов Adobe можно настроить на выбор только тех цветов, которые относятся к веб-палитре или к специальной цветовой системе. Пользователи Photoshop Extended могут обращаться к палитре HDR (с высоким динамическим диапазоном), которая позволяет выбирать цвета для изображений HDR. Поле цвета в палитре цветов Adobe отображает компоненты цвета в режимах HSB, RGB и Lab. Если известно точное числовое значение нужного цвета, его можно ввести в текстовые поля. Можно также пользоваться шкалой и просматривать выбор в поле цвета. При настройке цвета с помощью шкалы и поля цвета числовые значения изменяются соответствующим образом. Поле цвета справа от шкалы отображает в верхней половине отрегулированный цвет, а в нижней — исходный. Если цвет не является веб-цветом или выходит за пределы цветового охвата при печати (является непечатным) , выдается предупреждение.
При выборе цвета в палитре цветов Adobe одновременно отображаются его числовые значения для режимов HSB, RGB, Lab и CMYK, а также значения в виде шестнадцатеричных цифр. Это позволяет увидеть, как цвет описывается в различных цветовых моделях. Photoshop использует по умолчанию палитру цветов Adobe, однако можно пользоваться другой палитрой цветов, указав ее в параметрах настройки. Например, можно воспользоваться встроенной палитрой цветов операционной системы или палитрой цветов сторонней разработки. Отображение окна «Палитра цветов»
|
Палитра для веб-разработки
Метод разложения цветов по светлости и представления множества цветов палитры в виде двумерной палитры может быть полезен даже в том случае, когда палитра и сайт уже существуют. Для примера, приведём в порядок палитру от lonelyplanet.com.
Для начала найдем множество уникальных цветов, даже если они представлены в палитре различными оттенками. Для наглядности представим цвета в цветовом пространстве hsl.
$red : #fa5e5b = hsl( 1, 94%, 67% )
$orange : #ffc83f = hsl( 43, 100%, 62% )
$yella : #feef6d = hsl( 54, 99%, 71% )
$green : #16c98d = hsl( 160, 80%, 44% )
$teal : #0fdebd = hsl( 170, 87%, 46% )
$lpblue : #297cbb = hsl( 206, 64%, 45% )
$linkblue: #288ad6 = hsl( 206, 69%, 50% )
$darkblue: #142b44 = hsl( 211, 55%, 17% )
$navblue : #1d508d = hsl( 213, 66%, 33% )
$plum : #bf538d = hsl( 328, 46%, 54% )Посмотрим внимательно на полученное hsl-представление цветов. Цвета $lpblue и $linkblue равны по параметру «Hue» (цвет). А их параметры «насыщенность» очень близки.
$lpblue : #297cbb = hsl( 206, 64%, 45% )
$linkblue: #288ad6 = hsl( 206, 69%, 50% )Если чуть «похулиганить», то к данной группе можно добавить и другие цвета из основной палитры.
$lpblue : #297cbb = hsl( 206, 64%, 45% )
$linkblue: #288ad6 = hsl( 206, 69%, 50% )
$darkblue: #142b44 = hsl( 211, 55%, 17% )
$navblue : #1d508d = hsl( 213, 66%, 33% )С небольшим допущением, данные цвета можно заменить одним базовым и его производными по светлости:
$lpblue : #297cbb = hsl( 206, 64%, 45% ) ——> hsl( 206, 69%, 45% )
$linkblue: #288ad6 = hsl( 206, 69%, 50% ) ——> hsl( 206, 69%, 50% )
$darkblue: #142b44 = hsl( 211, 55%, 17% ) ——> hsl( 206, 69%, 17% )
$navblue : #1d508d = hsl( 213, 66%, 33% ) ——> hsl( 206, 69%, 33% )Определим возможные уровни и создадим переменные.
$red : #fa5e5b = hsl( 1, 94%, 67% ) ——> hsl( 1, 94%, 67% ) = $red_3l
$orange : #ffc83f = hsl( 43, 100%, 62% ) ——> hsl( 43, 100%, 62% ) = $orange_2l
$yella : #feef6d = hsl( 54, 99%, 71% ) ——> hsl( 54, 99%, 71% ) = $yella_4l
$green : #16c98d = hsl( 160, 80%, 44% ) ——> hsl( 160, 80%, 45% ) = $green_1d
$teal : #0fdebd = hsl( 170, 87%, 46% ) ——> hsl( 170, 87%, 45% ) = $teal_1d
$lpblue : #297cbb = hsl( 206, 64%, 45% ) ——> hsl( 206, 69%, 45% ) = $blue_1d
$linkblue: #288ad6 = hsl( 206, 69%, 50% ) ——> hsl( 206, 69%, 50% ) = $blue
$darkblue: #142b44 = hsl( 211, 55%, 17% ) ——> hsl( 206, 69%, 17% ) = $blue_5d
$navblue : #1d508d = hsl( 213, 66%, 33% ) ——> hsl( 206, 69%, 33% ) = $blue_3d
$plum : #bf538d = hsl( 328, 46%, 54% ) ——> hsl( 328, 46%, 54% ) = $plum_1lВ данном примере шкала уровней отклонения светлости от базового цвета равна: ±33, ±21, ±17, ±12, ±5(4). Для максимальной релевантности брендовых цветов и новой палитры на уровне 1l отклонение по светлости равно +4, а на уровне 1d — -5.
Результат наших манипуляций представлен ниже. Это «живой» HTML и CSS, тут можно поинспектировать, исследовать значения цветов и их разницу.
Серой рамкой обозначены базовые цвета, т.е. те цвета, которые являются основой для всех остальных (производных) цветов палитры.
Маркером (белой точкой) указаны брендовые цвета. Рядом с маркером, для сравнения, имеется область исходного цвета из палитры дизайнера. Для наглядности, ниже представлен увеличенный участок палитры, с цветами имеющими отличие от исходных.
Сравнение исходной и новой палитрыТакие расхождения — следствие допущений принятых при построении палитры. При работе с синими я приравнял их параметры Hue и Saturation, а при работе с цветами близкими по светлоте, их светлота приводилась к единому значению, всё это повлияло на конечный результат.
Чем меньше цветов одного тона будет в исходной палитре и чем больше будет цветов равных по светлоте, тем выше будет релевантность исходной и новой палитры.
Для того чтобы палитра получилась идеальная, расскажите дизайнеру о нюансах разработки, решите вопрос дополнительных цветов заранее.
Кстати, обратите внимание на верхнюю часть полученной палитры (выше базовых цветов), там брендовые цвета все сохранились без искажений.
Для изучения материала рекомендую проанализировать палитры других сайтов: gov.uk, disqus.com, linkedin.com
Используйте качественные палитры!
Sass автоматически конвертирует hsl в rgb. И делает это практически (Sass hsl to rgb bug) правильно. На момент написания статьи bug имеет статус «open».
Вместо заключения — Задолба!ли — Говорите поярче.
Как создать идеальную цветовую палитру для веб-сайта
Выбор собственной цветовой палитры для веб-сайта — не что иное, как прогулка по парку, особенно если вы не уверены в своих способностях выбирать цвета. Это может быть кошмар, когда миллионы цветов вспыхивают на вас, делая вас временно слепым и подавленным.
Ага! Я понял!
Но прежде чем я поделюсь несколькими советами и формулами, которые помогут вам сделать этот опыт приятным, позвольте мне рассказать вам небольшую историю…
Примерно в то время, когда я учился в старшей школе, моя мама хотела владеть красная машина.
Она хотела, чтобы он был настолько красным, насколько это возможно. Вроде… действительно красный.
В итоге финансы позволили семье позволить себе новую машину для мамы, и, конечно же, красную.
Автомобиль был подарком на Рождество, и я хорошо помню, как перелез через него, чтобы повесить на него большой огромный лук. Было весело сделать сюрприз, а увидеть ее счастливое лицо? было более чем того стоило!
Забавно, машина приехала двумя неделями раньше, и мы оставили ее в гараже.Нам приходилось сохранять невозмутимое выражение лица каждый раз, когда мама парковала свою грязную старую белую машину рядом с этой великолепной новой красной машиной. О боже, она понятия не имела, что машина будет ее через несколько недель!
Красная машина — лишь одно из многих моих детских и юношеских воспоминаний, связанных с любовью моей мамы к красному цвету. Ей также нравится зелено-синий цвет, который я считаю сине-зеленым, но я сохраню эту историю для другого поста.
Эти счастливые воспоминания никогда не перестают вызывать у меня улыбку. Это часть личного опыта , который влияет на то, как я отношусь к красному цвету.
Сила цвета
Color — мощный инструмент коммуникации. Он способен привлекать или отталкивать людей любого возраста, пола и культуры, вызывая эмоции и психологические реакции. На предпочтение цвета может повлиять личный опыт, личные вкусы, чувства или мнения.
Наше восприятие цвета также зависит от генетики. Мы не все видим цвета одинаково. В мире каждый двенадцатый мужчина и каждая 200 женщина страдают какой-либо дальтонизмом .И многим другим трудно увидеть разницу между похожими оттенками одного цвета, особенно если они расположены рядом друг с другом. Поэтому, если ваша целевая аудитория — это мужчины, помните об этом при создании цветовой комбинации.
Некоторые исследования также показали, что разные пола привлекают разные цвета кожи. Исследования показывают, что женщины предпочитают пастель и теплые цвета, а мужчины — холодные. Это также показывает, что женщинам не нравится коричневый и оранжевый, а мужчинам не нравится фиолетовый.
Помните, однако, что это исследования. Это не правила, по которым нужно жить и дышать!
Вот небольшой мой секрет:
Я склонен тяготеть к землистым цветам, а черный / коричневый — постоянное место в моем шкафу. Несмотря на это, когда я в джинсах, оранжевые, желтые и красные обычно оказываются на высоте. Для цветовой гаммы своего сайта я также выбрала яркие цвета. Единственная разница в том, что я использую их экономно и больше полагаюсь на нейтральные цвета, такие как кремовый, белый и черный.Так что да … Меня не консультировали для исследования выше. 🙂
Цвета во всем мире
Цвет также имеет разные значения во всем мире. В Америке и Европе красный цвет используется для обозначения любви, страсти и огня. В Китае и Индии он используется для обозначения плодородия и удачи и является предпочтительным цветом для платья невесты.
Красное свадебное платье в КитаеВ этой части света, в западной культуре, синий цвет обычно ассоциируется с властью, мудростью, миром и депрессией.В Греции и Турции считается, что синий борется со злом; однако в Корее темные оттенки синего — это цвет траура.
Синий турецкий сглазПомните об этих различиях при выборе цветовой палитры для своего веб-сайта. Чтобы избежать путаницы и недоразумений, быстрый поиск в Интернете подскажет вам, что означает каждый цвет в разных частях мира.
Какой цвет выбрать?
Типичный вопрос, который мне часто задают: «Какие цвета мне выбрать? Те, которые мне нравятся, или те, которые понравятся моим пользователям? »
Короткий трехсекундный ответ — выбрать цвета, которые вам нравятся.
Но подождите !!
Давайте немного подробнее рассмотрим ваши любимые цвета, не так ли?
Когда я сажусь с новым клиентом во время процесса «Обнаружения веб-сайтов», я задаю несколько вопросов перед тем, как приступить к работе с цветовыми палитрами веб-сайта. Иногда у них есть один или два цвета, которые они уже используют на своем логотипе и других предметах бренда. Иногда они проводят ребрендинг, а иногда начинают новый бизнес. Итак, где бы вы ни находились, ответы на эти вопросы станут руководством к выбору цветовой палитры для веб-сайта:
- Какие слова и прилагательные отражают индивидуальность вашего бренда?
(Женское или мужское? Игривое или серьезное? Роскошное или доступное? Современное или классическое? Молодое или зрелое? Громкое или приглушенное?) - Каковы ценности вашего бренда?
(Изобилие, сострадание, надежность, равенство, веселье, рост, честность, новаторство, доброта, мастерство, уравновешенность, стойкость, стабильность, доверие, видение и т. Д.) - Какой цвет подходит под характеристики вашего товара / услуги?
- Кто ваш идеальный клиент?
- Как вы хотите, чтобы ваш идеальный клиент чувствовал себя, когда он взаимодействует с вашим брендом?
После того, как вы ответите на эти вопросы , вы обнаружите, что некоторые слова, которые вы используете, совпадают с описанием и настроением цвета или группы цветов в таблице ниже.
Психология цвета
Для большинства из нас, жителей западной части этого мира, цвета имеют следующее положительное значение:
Разрешение нарушать правила
Есть некоторые отрасли, в которых определенные цвета имеют большее значение. чаще, чем другие.Вы можете услышать, как эксперты говорят, что вам следует выбирать цветовую палитру своего бренда и веб-сайта только на основе вашей целевой аудитории. На самом деле, вы можете осторожно, без страха нарушать правила, и это может быть отличительной чертой вашего бренда.
Одним из примеров является Wells Fargo. В то время как большинство банков и финансовых учреждений остаются «в безопасности» благодаря своим синим цветам, Wells Fargo выделяется. Его бренд является хорошим примером нарушения правил, используя цвета, связанные с едой, оформлением и срочностью, например красный и желто-оранжевый.
Другой пример — идея о том, что, поскольку фиолетовый в США означает богатство и королевскую власть, его не следует использовать для продажи недорогих ковриков для йоги. Ну, я не знаю, как вы, но я вижу, что фиолетовый и йога всегда хорошо сочетаются друг с другом!
Как насчет свадьбы? Какой цвет приходит тебе на ум? Белый? Белый с оттенком? Крем? Мягкая пастель? Что ж, у меня для вас новость: есть МНОГО других возможных цветов для блаженства в день свадьбы счастливой, энергичной пары. То же самое и с независимыми подрядчиками, предоставляющими свои услуги, от дизайнеров приглашений до стилистов декора приемных.
Поэтому я настоятельно рекомендую вам не увлекаться слишком уж из-за психологии цвета.
(прямо сейчас я слышу, как на меня кричат Боги цвета…)
Психология цвета поможет вам сузить круг вариантов. Секрет здесь в том, чтобы понимать правила, но сознательно нарушать их, если они не поддерживают индивидуальность вашего бренда, ценности, нишу и послание.
Назад к основам: теория цвета
Человеческий глаз может различать около 7 миллионов различных цветов.Одна эта информация может показаться устрашающей, когда вы пытаетесь найти правильные цвета для своего веб-сайта. Но это становится менее пугающим, если вспомнить, что все 7 миллионов цветов являются результатом трех цветов.
Цветовое колесо
Помните, как в школе изучали основные и второстепенные цвета? Как насчет третичных цветов?
Хорошо, может, я зашел слишком далеко…
Если вы помните хотя бы первые две группы, у вас уже есть базовые знания теории цвета! Ура!
Основные цвета включают желтый, красный и синий.Эти цвета нельзя смешивать с другими цветами, что делает их источником всех цветов.
Дополнительные цвета представляют собой смесь двух основных цветов. Они бывают: оранжевые, зеленые и пурпурные.
Третичные цвета — это комбинации основных и дополнительных цветов. Существует шесть третичных цветов: желто-зеленый, сине-зеленый, сине-фиолетовый, красно-фиолетовый, красно-оранжевый, желто-оранжевый. Хороший способ запомнить имена — всегда использовать основное имя перед другим цветом.
Единственное, что вам нужно знать о теории цвета, это то, что существует три основных категории: цветовое колесо , изображенное выше, цветовой контекст и цветовая гармония .
Цветовой контекст
Знаете ли вы, что цвет ведет себя иначе по сравнению с другими цветами и формами? Цветовой контекст — это то, как мы видим изменение цвета в зависимости от того, что вокруг него. Один и тот же оранжевый оттенок «выглядит» по-разному в сочетании с желтым фоном, а затем с красным фоном.
Но… какие цвета хорошо смотрятся вместе?
На этом этапе вы можете подумать, что есть много вещей, которые следует учитывать, прежде чем выбирать цвета. И вы даже не уверены, какие цвета хорошо смотрятся вместе!
Не бойся, друг мой!
Введите…
Color Harmony!
Прежде чем мы перейдем к деталям цветовой гармонии, рекомендуется сделать краткий обзор нескольких терминов, используемых для описания различных типов цвета и их вариаций.Эта информация поможет вам при создании цветовой палитры вашего сайта. Это:
- Оттенок : другое слово, обозначающее «цвет»; относится к одному из двенадцати цветов на цветовом круге
- Оттенок : оттенок, затемненный черным (хороший трюк для поиска темных цветов фона)
- Оттенок : оттенок, осветленный белым (хороший способ найти свет цвета фона)
- Значение : насколько темным (он же Shade) или светлым (он же Tint) является цвет, в диапазоне от черного до белого.
- Насыщенность : относится к интенсивности, независимо от того, выглядит ли цвет более тонким или более ярким. Чем ближе цвет к серому, тем он более ненасыщенный, приглушенный.
- Тон : оттенок, приглушенный серым
Цвета в цветовом круге можно комбинировать с помощью одной из шести формул цветовой схемы, что позволяет достичь гармонии в любом дизайне. Все эти шесть схем позволяют создавать сбалансированные и визуально приятные или высококонтрастные и яркие комбинации .
Итак, поехали! Существуют настоящие формулы , по которым вы можете следовать , чтобы создать комбинацию цветов, которые хорошо смотрятся вместе. Они бывают монохроматическими, аналогичными, дополнительными, расщепляюще-дополнительными, триадными, тетрадными и дважды-дополнительными.
Я почти слышу, как вы говорите «Ура!» затем сделайте небольшой цветной танец. 💃🏻🕺🏻
Монохроматический
В этой формуле используется один оттенок, что позволяет вам исследовать различную насыщенность и значение для создания вариаций этого цвета.
Эта формула гарантированно соответствует, создавая визуально целостный вид. Он также считается самым легким для глаз . Он не привлекает к себе внимания и помогает ассоциировать бренды с определенным запоминающимся цветом.
монохроматического цветовую палитру можно рассматривать как неоспоримо шик и консервативны. Он также может стать жертвой скуки, в зависимости от использования. Вы можете немного изменить правила — и при этом сохранить монохромную схему — используя дополнительный или акцентный цвет.Дополнительный оттенок можно найти прямо напротив выбранного вами цвета, и, если его использовать экономно, это поможет.
Аналог
В аналогичной комбинации используются цвета, расположенные рядом друг с другом на цветовом круге, например синий и зеленый или красный и оранжевый. Они очень хорошо сочетаются с и создают приятные для глаз схемы. Вы часто встретите это очень универсальное сочетание в природе — изобразите красные, оранжевые и желтые листья осенью или небо во время заката.
Аналогичная схема отлично подходит для очень спокойного, умиротворенного дизайна, где вы хотите, чтобы ваша аудитория чувствовала себя комфортно и расслабленно. Это не значит, что вы не можете использовать одну и ту же цветовую схему для создания других ощущений, таких как изобилие и энергия, особенно при использовании теплых оттенков.
Дополнительные
Это цвета, расположенные напротив друг друга на цветовом круге, например красный и зеленый или синий и оранжевый. Эта комбинация, когда они имеют одинаковое значение (оттенок / оттенок), составляет чрезвычайно ярких и динамичных , и поэтому они постоянно используются в спорте.Его высокая контрастность и высокая интенсивность создают «вибрирующие границы», когда цветовая вибрация происходит по краям, разделяя оттенки одного и того же значения.
Эту схему трудно применить гармонично, если использовать ее в чистом виде. Решение здесь — добавить оттенок, оттенок или ненасыщенные тона к одному из цветов или добавить нейтральный цвет к смеси. Это добавит разнообразия и устранит вибрирующие границы, сохранив контраст.
Split-Complementary
В этой цветовой схеме используется любой цвет плюс два, которые граничат с его дополнением.Он по-прежнему дает вам контраст, как в дополнительной схеме, но добавляет больше цветов для работы и более интересных результатов.
Триадический
В триадной схеме используются три цвета, которые расположены равномерно, образуя идеальный треугольник на цветовом круге. Эти комбинации обычно составляют ярких и стимулирующих , особенно если вы используете основные или второстепенные цвета. Поиграйте с оттенками и оттенками, чтобы создать схему с меньшим контрастом. Используйте один в качестве основного цвета, а два других в качестве акцентов.
Самая сложная часть этой формулы — получить три цвета, соответствующие описанию индивидуальности вашего бренда. Я предлагаю вам сначала ознакомиться со списком вопросов и таблицей цветовой символики, прежде чем вы решите использовать эту схему.
Тетрадик или дважды комплементарный
Эта схема образует прямоугольник на колесе с использованием двух дополнительных цветовых пар. Это очень привлекательная комбинация , но, возможно, ее сложнее применить в вашем дизайне, поскольку большее количество цветов сложнее сбалансировать.
Эта комбинация работает лучше, если вы выбираете один цвет в качестве основного оттенка, в то время как другие могут служить в качестве акцентных цветов с отрегулированной насыщенностью и значением некоторых или всех цветов.
СОВЕТ ПРОФЕССИОНАЛА: Если вы не уверены в своих способностях к выбору цвета, я предлагаю вам держаться подальше от этой формулы цветовой гармонии.
Другие инструменты, которые вы можете использовать для своего веб-сайта Цветовая палитра
Приведенные выше формулы цветовой гармонии — отличный инструмент, отправная точка для руководства, но это не единственный способ сделать это.Вот еще несколько способов сделать это:
- Цвета могут быть объединены в пары по температуре , насыщенности , настроению и теме .
- Используйте изображение с вашим любимым цветом, индивидуальностью вашего бренда и его посланием и создайте на его основе палитру.
- Найдите существующую цветовую палитру , которая пробудит ваше воображение или ту, которая вам понравится, и сделайте ее своей собственной.
Взгляните на некоторые из перечисленных ниже инструментов.Вы можете использовать их для создания цветовой палитры с нуля, из изображения или для проверки других существующих палитр.
- Adobe Color CC для создания цветовой палитры веб-сайта с нуля или из изображения, щелкнув ссылку «импортировать изображение».
- Coolors для создания цветовой палитры веб-сайта с нуля, из изображения, щелкнув значок камеры, или просто щелкнув ссылку «исследовать», чтобы найти существующие цветовые палитры.
- Палитра и 0to255 для создания цветовой палитры веб-сайта с нуля
- Семена дизайна и цветовые палитры для поиска существующих палитр
- Pinterest — еще один отличный инструмент, который вы можете использовать, просто выполните поиск по запросу «Цветовые палитры веб-сайта»
Создайте свой собственный веб-сайт Цветовая палитра
Пришло время провести мозговой штурм и сузить собственную цветовую палитру.
Важно понимать, что эти правила не являются строгими. Чтобы получить правильную цветовую палитру для вашего веб-сайта, нужно проработать множество различных шагов и аспектов, и вы, безусловно, можете использовать разные пути. Однако в следующих строках я расскажу о пути, который я использую при создании цветовых палитр веб-сайтов для моих клиентов и даже для себя.
Взгляните на существующие элементы дизайна. Если у вас уже есть цвет для вашего логотипа или любого другого существующего элемента бренда, вы можете использовать его, чтобы начать этот процесс.Вы также можете добавить его позже, если не хотите, чтобы он был основным цветом.
После того, как вы просмотрите ответы из списка вопросов выше, вы обнаружите, что некоторые (или многие!) Из них совпадают с описанием и настроением каждого цвета в психологии цветовой таблицы.
STEP ONE
Выберите цвета, которые вам нравятся, и представляйте свой бренд
Это цвет, который будет самым запоминающимся, самым интересным, поэтому он привлечет наибольшее внимание.
Давайте возьмем пример бренда, который описывает свою личность и ценности словами «стабильность, доверие, креативность и оптимизм».Затем мы сужаем выбор цвета до синего (стабильность и доверие) и оранжевого (креативность и оптимизм).
У бренда также есть выбор «отказаться от одного из цветов», если он предпочитает сосредоточиться на одной конкретной ценности или чертах личности. В нашем примере мы будем придерживаться обоих и перейдем к следующим шагам.
Помните, что вы также можете выбрать цвет, который вам нравится, если он соответствует некоторым словам, которые вы используете для описания вашего бренда. Если одно из описаний вашего бренда — «тепло», у вас есть несколько вариантов: красный, оранжевый и желтый (и все что угодно в этом диапазоне).То же самое и с другими цветами.
«А сколько цветов?» вы спрашиваете…
Это действительно зависит от вас, от того вывода, который вы придете после того, как ответите на эти вопросы и решите, какую цветовую формулу вы хотите использовать. Однако в большинстве случаев для не дизайнеров я предлагаю меньшее количество цветов: один или два максимум . Чем больше у вас цветов, тем сложнее сбалансировать их все в своем дизайне. При создании цветовой палитры своего сайта придерживайтесь концепции «меньше значит больше».
Пока вы просматриваете цветовую диаграмму, цветовое колесо и шесть приведенных выше формул, подумайте о своей цветовой палитре, содержащей примерно от 3 до 7 цветов.
ШАГ ВТОРОЙ
Решите, какую формулу цветовой схемы вы будете использовать
В нашем примере, когда мы сузим цвета, мы увидим, что синий и оранжевый противоположны на цветовой диаграмме. Это дает нам возможность использовать дополнительную формулу или дополнительную формулу.
Бренд любит оранжевый, но предпочитает работать с двумя разными оттенками синего. Итак, давайте выберем дополняющую формулу: цвет плюс два, которые граничат с его дополнением.
ШАГ ТРЕТИЙ
Отрегулируйте оттенки по своему усмотрению
На этом этапе мы можем перейти к цветовому кругу и изменить оттенок, оттенок, насыщенность и тон по своему вкусу.
В нашем примере бренд предпочитает более темный синий цвет и чуть более светлый оранжевый, почти желтый. Затем мы добавляем больше оттенка (черный) к синему и больше оттенка (белый) к оранжевому. Для более светлого синего цвета мы переместили «стрелку» ближе к зеленому, но все еще в синем спектре.
Теперь у нас есть три цвета, которые хорошо смотрятся вместе благодаря формулам цветовой гармонии.
На следующих этапах мы сосредоточимся на том, какой из этих цветов будет нашим основным или акцентным. Мы также выберем другие цвета, которые уравновесят и дополнят их в этой цветовой палитре.
СОВЕТ ПРОФЕССИОНАЛА: Вы можете обойти любой определенный цветовой спектр в цветовом круге, чтобы найти тон / значение, которое вам больше всего нравится.
На следующих этапах цвета будут разделены на четыре отдельные группы:
- Основной
- Акцентный
- Нейтральный
- Оттенки и / или оттенки
ШАГ ЧЕТВЕРТЫЙ
Выберите основной цвет (а)
На этом этапе вы можете выбрать один или два цвета для первой группы: основной цвет (цвета), иногда называемый «жирным», «основным» или «доминирующим» цветом (цветами).
Основной, основной, жирный или доминирующий цвет является «доминирующим» либо из-за того, сколько он проявляется в вашем общем дизайне, либо из-за того, как он выделяется по сравнению с другими цветами.
В большинстве случаев доминирующий цвет является основным цветом вашего бренда. Он также привлечет к себе наибольшее внимание и станет самым запоминающимся. Вспомните красный цвет Coca-Cola ™, желтый McDonald’s ™, оранжевый Amazon ™, розовый Barbie ™, синий GE ™, серый Mercedes ™, черный Chanel ™. Другими словами, основной цвет — это ваша главная звезда. ⭐️
В нашем примере мы выберем два основных цвета: более светлый оттенок синего будет нашим первым основным цветом, а более темный «темно-синий» будет вторым основным цветом.
Мы можем использовать светло-оранжевый и один из синих оттенков в качестве основных цветов или даже один цвет в качестве основного. Этот выбор зависит от нескольких вещей. Если:
- бренд уже создан
- уже есть цвет логотипа
- хотите использовать цвета вашего логотипа в качестве основных цветов
- вы начинаете с нуля (тогда у вас будет больше гибкости)
- ценности бренда сильнее в одном цвете, чем в другом (в нашем примере: стабильность и доверие сильнее, весят больше, чем креативность и оптимизм)
ГДЕ ИСПОЛЬЗОВАТЬ : Используйте эти цвета, чтобы привлечь внимание аудитории или выделить важную информацию, такую как логотип , вкладки меню, кнопки призыва к действию, заголовки, заголовки, ссылки, номера телефонов и т. д.
СОВЕТ ПРОФЕССИОНАЛА : выберите универсальный основной цвет, который хорошо работает как на светлом, так и на темном фоне. Если ваш основной цвет — белый / очень светлый или черный / очень темный, возможно, вы захотите, чтобы один из ваших акцентных цветов был универсальным.
ШАГ ПЯТЬ
Выберите акцентные цвета
Затем выберите один или два цвета , которые контрастируют или дополняют ваш основной цвет. Это цвет, который вы используете чаще всего после основного цвета.
Акцентные цвета выделяют другие важные части вашего веб-сайта, помогая создать иерархию и единый дизайн.В свою очередь, они помогут привлечь внимание аудитории к наиболее важной информации на ваших страницах.
В зависимости от вашего бренда и сообщения, вы можете выбрать более двух цветов акцента, например, красочный стиль бренда, ориентированный на детей, или забавные темы. Однако в большинстве случаев идеальным числом является один или два.
Акцентный цвет не обязательно означает, что это яркий или яркий, сверхнасыщенный цвет. Это просто означает цвет, который контрастирует с вашим основным цветом или дополняет его. Если вы сомневаетесь, вернитесь к цветовому кругу и выбранной формуле, чтобы просмотреть доступные варианты.
В нашем примере мы выберем светло-оранжевый в качестве основного цвета.
Помните, что вы можете выбрать любой оттенок в качестве акцентного цвета. Единственная разница в том, как вы будете использовать его на своих страницах.
СОВЕТ ПРОФЕССИОНАЛА: Ограничьтесь двумя или тремя цветами между основным и акцентным . Выберите один основной цвет? Выберите два акцентных цвета. Если вы выберете два основных цвета, придерживайтесь одного акцента. Вы хотите, чтобы это было очень просто? Выберите один основной цвет и один цвет акцента.
ГДЕ ИСПОЛЬЗОВАТЬ : Эти цвета могут выделять важную или второстепенную информацию на вашей странице, такую как CTA (призыв к действию), цитаты, субтитры или текущие вкладки меню.
ШАГ ШЕСТОЙ
Выберите нейтральные цвета
Эти цвета уравновешивают ваш дизайн и создают «белое пространство», а также обеспечивают темные цвета для основного текста и светлые цвета, чтобы различать фон, текстуры и узоры. Все цветовые схемы должны иметь минимум 2 нейтральных цвета .
Если вы используете нейтральный цвет в качестве фона, убедитесь, что он достаточно контрастирует с цветом вашего текста, чтобы не напрягать глаза и его было легко читать. Если сомневаетесь, используйте белый, бежевый и разные оттенки серого. Черный вариант — вариант, но он имеет тенденцию преобладать в цветовой схеме, если используется в нескольких элементах, поэтому будьте осторожны.
В нашем примере мы выберем два нейтральных цвета: бежевый для фона и почти черный для текста.
СОВЕТ ПРОФЕССИОНАЛА : Старайтесь держаться подальше от чистого черного (# 000000).Черный преобладает, и на самом деле нет ничего черного на 100%. Добавьте немного тонких оттенков в ваш черный, и это будет легче для глаз.
ГДЕ ИСПОЛЬЗОВАТЬ : Эти цвета в основном используются в качестве фона, текстуры, тонких узоров, текста и как баланс между основным и акцентным цветом.
STEP SEVEN
Вам могут понадобиться оттенки и оттенки
Иногда вы обнаруживаете, что вам нужна дополнительная версия или две вашего основного или акцентного цвета. Хорошее решение — добавить его оттенки или оттенки. Это необязательный шаг , но я считаю, что он помогает, когда вам нужно изменить один или несколько цветов из вашей палитры.
В нашем примере мы выберем очень светлый вариант оранжевого цвета акцента (оттенок) и более темный вариант цвета фона, который мы выбрали выше. Эти комбинации дадут нам большую гибкость.
ГДЕ ИСПОЛЬЗОВАТЬ : Эти варианты можно использовать для фона, падающих теней, эффектов свечения, наложений и вспомогательных элементов. Обычно они остаются вне поля зрения, предоставляя вам больше возможностей, не меняя созданную вами цветовую схему.
Хорошим примером использования оттенков и оттенков является длинная страница с разделами, где вы можете использовать цвета фона, контрастирующие между темным и светлым, или когда у вас есть контактные формы, которые разработаны с рамкой и цветом фона.
Вы чувствуете себя застрявшим?
Семь миллионов цветов на выбор.
Различные формулы и номенклатуры.
Непреодолимое чувство.
Ага, знаю! 🤦🏻♀️
Но вот что я узнал, делая это снова и снова: следуйте инструкциям и позвольте себе изменить несколько цветов здесь и там, когда вы начнете их применять, особенно нейтральные, оттенки и оттенки.
Даже новый дизайнер нередко сталкивается с потребностью в дополнительном цвете или другой версии оттенка, когда цветовая палитра веб-сайта готова и внедряется в макеты.
Так что не будьте так строги к себе!
Вы делаете свою палитру своими руками. и достигли этой точки в этом посте, поэтому вы уже на сто шагов впереди того места, где были раньше! Похлопайте себя по спине! ??
Давайте подведем итоги
Первое ✓
Ответьте на вопросы, которые я задавал ранее в этом посте.Если у вас уже есть цвет, который вы используете для логотипа или графики вашего бренда, подумайте о том, чтобы использовать его в качестве отправной точки.
Секунда ✓
Сравните ваши вопросы с психологией цветовой карты. Найдите те, которые описывают личность и ценности вашего бренда, и запишите их вместе с соответствующими цветами.
Третий ✓
Шаги 1-3: Просмотрите формулы цветовой гармонии и найдите, какие из них лучше подходят для цветовых результатов, полученных вами из ваших ответов и цветовой таблицы.Поиграйте с комбинациями, используя несколько инструментов, которые я предоставил, чтобы «научиться».
Четвертый ✓
Шаги 4-7: Определитесь с основным, акцентным, нейтральным и оттенками и оттенками для окончательной цветовой палитры вашего веб-сайта.
Заключение
Самый важный урок из этого поста, помимо нескольких хороших идей и формул для выбора идеальной цветовой палитры веб-сайта, — это согласованность !
После того, как вы выберете свои цвета, решите, где они будут использоваться, и придерживайтесь этого, сохраните их согласованность! Если вы решили, что ваши кнопки будут одного цвета (акцентный или основной) или иметь два типа цветов кнопок, оставьте это на всех этапах.То же самое касается заголовков, подзаголовков, фона и т. Д.
Как я уже упоминал выше, это всего лишь руководство, которое поможет вам создать цветовую палитру для вашего веб-сайта. Это не конкретные правила, высеченные в камне. Используйте свои инстинкты и не забывайте всегда учитывать триггеры и цвета эмоциональной связи, которые приносят вам, вашему бренду и вашей аудитории. Я надеюсь, что это руководство поможет вам создать цветовую палитру, которую вы действительно любите и готовы двигаться вперед.
Если вы находитесь в затруднительном положении, создавая цветовую палитру своего веб-сайта, дайте мне знать в комментариях, как у вас дела.
Давайте подключимся!
Присоединяйтесь ко мне в этом блоге, на Facebook или YouTube, где я делюсь еще большим количеством советов по цвету и другими советами, связанными с брендами и веб-сайтами.
PS: Если вы пролистали этот пост полностью, прочтите раздел резюме и присоединитесь ко мне на Facebook.
PS2: Если вам понравилась эта статья и вы хотели бы закрепить ее, я создал для вас несколько вариантов изображений ниже! Спасибо, что поделились!!
11 цветовых схем веб-сайта, которые помогут вам найти идеальную палитру
При создании веб-сайта первоочередной задачей является улучшение цветовой палитры вашего веб-сайта.Лучший способ сделать это — посмотреть на существующие веб-сайты и изучить конкурентов, поэтому мы проделали всю работу за вас и составили список из 11 цветовых схем веб-сайтов, которые идеально подходят для каждого бренда.
Но подождите минутку. Что делать, если у вас уже есть цветовая палитра веб-сайта, которую вы хотите использовать? Что ж, конечно, это отличное начало, но важно подумать, что вы хотите, чтобы цветовая схема вашего веб-сайта говорила, прежде чем торопиться с чем-либо …
Учет психологии цвета для цветовых схем веб-сайта
—
Возьмите прекрасного художника Йозефа Альберса.Мастер цвета, он посвятил свою практику пониманию цвета и того, как он влияет на настроение зрителя и адаптируется к различным контекстам. Огромная часть его исследований заключалась в изучении различных способов взаимодействия цветов друг с другом. Возьмем, к примеру, его картину ниже: сочетание темно-зеленого и оранжевого цветов вызывает неприятные ощущения, тогда как в сочетании зеленого с серым Альберс создает баланс с гораздо более спокойным, современным настроением для публики.
Взаимодействие цвета. Джозеф Альберс через Phillips. Подобные открытия можно использовать для информирования при выборе дизайна; они помогут вам выбрать цвета веб-дизайна, подходящие для ваших услуг, и подчеркнут идентичность вашего бренда, чтобы донести его до потребителей.
Этот разговор представляет собой введение в психологию цвета, то есть изучение цветов и того, как они влияют на нас на церебральном уровне. Как показал Марк Ротко со своими одноименными картинами «Цветовое поле», определенные цвета требуют определенной реакции. Итак, когда мы рассматриваем цветовые схемы веб-сайта, важно понимать, как разные тона и оттенки влияют на наше настроение. Например, если бы мы разработали веб-сайт для благотворительной организации в области устойчивого развития, мы могли бы использовать оттенки зеленого и синего, потому что они вызывают чувство доверия, природы и здоровья.
Выбор идеальной цветовой палитры для вашего веб-сайта создает положительное восприятие и доверие потребителей.
Вы можете не только использовать определенные цветовые схемы, чтобы влиять на настроение людей, но также можете использовать их для управления тем, как они воспринимают ваш веб-сайт. Почему именно Facebook всегда придерживался синей цветовой схемы? Неужели это действительно потому, что Марк Цукерберг дальтоник к красно-зеленому, а это значит, что синий кажется ему необычайно ярким? Ну да, но еще и потому, что синий — самый любимый цвет.Фактически, синий цвет присутствует более чем в половине всех логотипов. Имея это в виду, давайте посмотрим на основные психологические принципы всех ключевых цветов:
- Красный : скорость, энергия и страсть. Красный — отличный цвет, когда вы хотите, чтобы ваша аудитория начала действовать. Красный часто используется для цветовых схем на веб-сайтах электронной коммерции, а также в ресторанах и приложениях для еды на вынос — когда вы голодны и заказываете еду на вынос, вы страстно хотите, чтобы еда была быстрой!
- Апельсин : оптимизм и счастье.Оранжевый цвет повсеместно считается «забавным» цветом, и его использование в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
- Желтый : тепло, уют, позитив. Цвет солнечного света, желтый ассоциируется со счастьем и радостью. Супер весёлый и доступный. Это отличный цвет для веб-сайтов в сфере услуг — вы будете рады помочь!
- Зеленый: природа и здоровье. Успокаивающий и естественный зеленый цвет — идеальный выбор для цветовой схемы при создании здорового бренда.Зеленый также является отличным выбором для обозначения экологичности и устойчивости.
- Синий: самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его одним из самых популярных в цветовых схемах веб-сайтов.
- Purple : творчество, мудрость и уверенность. Фиолетовый — это уникальный яркий цвет, который можно использовать в цветовой схеме веб-сайта, поскольку он требует внимания и выделяется.
- Pink : креативность и изобилие.Пинк в данный момент переживает время своей жизни, более чем когда-либо его принимают люди всех полов и идентичностей, а это означает, что бренды следуют его примеру и внедряют его в различные отрасли.
- Коричневый : доброта, тепло и честность. Коричневый цвет удобен в использовании в веб-дизайне. Это придает веб-сайтам естественную, приземленную атмосферу и часто сочетается с традиционным винтажным дизайном.
- Черный: современность, гладкий, нейтральный.Его минимализм отлично подходит для роскошных веб-сайтов; многие косметические бренды выбирают черный цвет в качестве основного цвета, чтобы показать, что их продукт является качественным, что, возможно, поможет вам оправдать такие большие траты ..?
- Белый: минимализм, прозрачность. Иногда лучший выбор цвета для минималистичного веб-дизайна — это вообще отсутствие цвета. Белый — нейтральный оттенок, а это значит, что его можно легко комбинировать с другими цветами в целях брендинга. Он в основном используется в качестве цвета акцента или фона.
- Серый: зрелость, авторитет.Если у вас более серьезный веб-сайт, серый цвет — отличный выбор, он показывает людям, что вы серьезно относитесь к делу.
Мы только что отправили вам ваш первый урок.
Автор OrangeCrush11 красивых цветовых схем веб-сайта, которые вдохновят вас
—
Хорошо, кажется, нам нравится приписывать цветам эмоциональные и человеческие черты. Бренды используют эти абстрактные ассоциации для установления эмоциональных связей с людьми, что помогает им привлекать и удерживать больше потребителей или клиентов. Выбирая цветовую палитру своего веб-сайта, вы можете использовать эти ассоциации в своих интересах.Чтобы помочь нам объяснить, мы поискали в Интернете 11 конкретных примеров цветовых схем веб-сайтов в действии:
1. Цвета для продуманных экологически чистых продуктов
При выборе цветовой гаммы для бренда органической конопли есть ли другой выбор, кроме зеленого ?! Помимо экологичности, он является синонимом продуктов из марихуаны, конопли и CBD. Бледные оттенки желтого и овсяного цвета дополняют зеленый цвет конопли, в то время как серьезный характер темно-синего привносит доверие к этой цветовой гамме.
Зеленая конопля, бледно-лимонный, овсяный и темно-синий:
Цветовая схема сайта с тонировкой конопли от Tonitrix: # f5eec2 # 416a59 # 39395f # 73a24e # a9c25d2. Яркие и полезные для здоровья цвета
Было бы легко увязнуть в предсказуемо землистых тонах коричневого и зеленого при визуализации экологической идентичности бренда… но вы не должны забывать, что ваша целевая аудитория постоянно находится в поле зрения периферии!
Daye в основном ориентирована на молодых, профессиональных, умных и заботящихся о своем здоровье женщин.Поэтому инновационный бренд выбрал яркую палитру персиковых, оранжевых и зеленых тонов (которая кажется настолько актуальной, что не будет неуместной в вычурном аккаунте в Instagram), чтобы передать современные ценности экологичности и натуральных продуктов.
Бледно-персиковый, апельсиновый, мятный и темно-зеленый:
Эко-тона тысячелетия от Your Daye: # f6c453 # fefbe9 # f0a04b # 183a1d # e1eedd3. Стильные тщательно подобранные цветовые схемы
У Сирени момент. Полистайте любой актуальный модный журнал, и вы увидите, как именно этот фиолетовый сочится со страниц и попадает в ваш гардероб.Это свежая, мягкая и классная альтернатива , розовому цвету тысячелетия, которые мои глаза так много видели, что на него стало больно смотреть.
Цветовая гамма этого веб-сайта электронной коммерции — сиреневый, ржавый и кремовый — мгновенно создает тщательно подобранную атмосферу. Он вызывает доверие у пользователей, показывая, что они, как и они, внимательны, продвигают индивидуальность и идут в ногу с современными модными тенденциями.
Сирень, ржавчина, крем и уголь:
Цветовая схема Contemporary Lilac от Collagerie: # e4ddf4 # 943d24 # fffbf0 # 2d2d2d # 2826124.Веселые, юные цветовые палитры
Идея создания ботанического цеха под названием «Каменная бумага» сама по себе настолько увлекательна, что нет ничего лучше, чем использовать выбранные ими второстепенные цвета, похожие на детские. На первый взгляд, эта цветовая схема веб-сайта приносит столько радости и волнения, что возвращает вас в школьные годы — точно так же, как это сделала бы творческая мастерская.
Нежно-розовый, зеленый, оранжевый и фиолетовый:
Цветовая схема полихроматического сайта от Brent & Jo Studio: # 397754 # f0a3bc # 70be51 # eb6b40 # 9b45b25.Цвета для креативщиков, кружащие голову
Контраст неонового синего и первичного желтого кажется невероятным: он выходит за рамки требования быть замеченным, он заставляет мои глаза физически слезиться. Но я почему-то не против. Эта смелая цветовая гамма отражает вынужденную харизму креативного агентства: она смелая, захватывающая, и мне очень нравится с ней работать.
Желтый, неоновый синий и черный:
Контрастная цветовая схема сайта от e2infinity: # 5bccf6 # fcde67 # 030e126.Успокаивающие и оптимистичные нейтральные палитры
Тональное сочетание персикового и не совсем белого обеспечивает красивый фон и, вероятно, самый простой аспект приучения малышей к туалету. Почти черная копия легко читается поспешными родителями и менее жесткая, чем абсолютно черная. Упрощенная, приглушенная и легкая, эта цветовая палитра этого веб-сайта вызывает умиротворение.
Персик, сливки и уголь:
Успокаивающая нейтральная цветовая гамма от Lovely Grit Studio: # ef9273 # fef9f8 # 0d0d0d7.Надежные тона
Оглядываясь на нашу теорию цвета, мы видим, что крутой синий цвет вызывает чувство надежности и доверия к цветовым схемам веб-сайтов: по сути, ко всему, что вы хотите от онлайн-банка.
Бирюзовый, серый, синий, ярко-белый, темно-серый и морской волны:
Надежные бирюзовые тона через N26: # 2b6777 # c8d8e4 #ffffff # f2f2f2 # 52ab988. Успокаивающие, но уверенные цветовые схемы
Хотя коралловый и темно-синий — довольно яркие цвета, они смягчаются безмятежными оттенками серого, сиреневого и бледно-розового.Это умная цветовая схема для приложения для медитации, потому что, хотя она успокаивает, она также уверенная (красный) и надежная (синий), которые в совокупности вполне подходят для услуг, ориентированных на психическое здоровье и благополучие.
Бледно-розовый, коралловый, серый, сиреневый и темно-синий:
Медитативная цветовая схема Spoon Lancer: # fae5df # f5cac2 # ed7966 # 303179 # 1418509. Современные модные цветовые схемы
Purple возвращается на бис, так как на этот раз лиловый сочетается с мятой и апельсином.Эти цветовые схемы повсюду в мире иллюстраций Instagram и модных интернет-магазинов. Хотя они довольно мягкие и скромные, они создают прилив современной энергии, достаточно универсальный, чтобы проникнуть в брендинг любой отрасли.
Фиолетовый, лиловый, мята и апельсин:
Via Saluto: # 5f2c3e # d1adcc # c2d2bd # c65032 # f6e9d710. Веселые и благотворительные цветовые палитры
Эта некоммерческая организация из Нью-Йорка использует пастельные синие и зеленые оттенки с акцентом на желтом, чтобы проиллюстрировать юношеское, радостное отношение к детям, поскольку они стремятся учить детей правильному питанию и предоставлять медицинские услуги школам.В этой цветовой гамме они выглядят искренними, позитивными и заботливыми.
Синий, желтый, шалфейно-зеленый и белый:
Веселые некоммерческие цвета от Lovely Grit Studio: # 1b4d89 # f9e45b # 6db784 #ffffff11. Сильные и женственные цветовые схемы
Для бренда, основной задачей которого является обсуждение и поддержка аудитории, испытывающей трудности с фертильностью, жизненно важно привлечь внимание к своему бренду. Он должен быть заслуживающим доверия, но не снисходительным, вызывающим и в то же время чувствительным.Нежная теплота розового по сравнению с более сильными оттенками фуксии и нефрита отражает разнообразие чувств, впечатлений и людей, для которых существует этот бренд: он целостный, всеобъемлющий и не боится бороться с любыми эмоциями.
Пудрово-розовый, фуксия и нефрит:
Цветовая схема Fuschia и Green для Fertility Tribe от Lovely Grit Studio: # eddcd9 # f2ebe9 # de5499 # 264143 # e99f4cНачинается поиск цветовых схем для веб-сайтов сейчас
—
Будь то новый диван, помада или велосипед, выбор правильного цвета может оказаться довольно сложной задачей.Если вы пытаетесь запустить веб-сайт, все становится сложнее. Вы должны оценить психологическое и культурное значение различных цветовых палитр веб-сайта и то, как это повлияет на восприятие вашего бренда.
К счастью, для этого вам не нужна степень. Изучите теорию цвета, выбор цвета веб-сайта ваших конкурентов и не бойтесь экспериментировать с границами: в случае успеха это может стать разницей между выбором между вашим брендом и остальным рынком.Когда вы думаете об этом, волшебство цветов заключается в том, что мы буквально окружены ими: вдохновляющая часть начинается, когда вы открываете глаза и смотрите по сторонам.
Ищете единственную в цветовой гамме?
Позвольте нашим дизайнерам подобрать ваши оттенки.
Эта статья была первоначально опубликована в 2017 году и написана Диной ДеБара. Он был дополнен новой информацией и примерами.
19 Генераторы цветовых палитр, которые упрощают веб-дизайн
Отличная цветовая схема — фундаментальный компонент хорошо спроектированного веб-сайта.Непривлекательная цветовая схема потенциально может отпугнуть посетителей сайта еще до того, как они дойдут до вашего контента. Однако не всегда легко придумать привлекательную цветовую палитру самостоятельно. Если у вас возникли проблемы, генератор цветовой палитры может помочь вам выбрать правильную комбинацию цветов для конкретного приложения.
Мы составили список из 19 удобных генераторов цветовой палитры (все бесплатные), чтобы помочь вам создать идеальную цветовую схему для вашего веб-сайта.
19 генераторов цветовых палитр, которые упрощают веб-дизайн
В этот пост мы включили широкий спектр инструментов для самых разных приложений, поэтому имейте в виду, что выбор правильного генератора цветовой палитры для вашего проекта в конечном итоге будет зависеть от личных предпочтений.Мы советуем попробовать несколько разных, чтобы увидеть, какой из них лучше всего подходит для вас. Давайте начнем!
1. Coolors
Coolors — фантастический инструмент, который объединяет в себе немало полезных функций. Он отображает полноэкранную цветовую палитру в интерфейсе перетаскивания. На этом экране вы можете редактировать каждый цвет, перетаскивать, чтобы изменить порядок, и расширять цвета, чтобы показать выбор альтернатив.
Генератор также позволяет заблокировать те цвета, которые вам больше всего нравятся, и автоматически генерировать параметры для других цветов, нажав клавишу пробела.Вы можете загрузить изображение для вдохновения, изучить палитры в сообществе Coolors и экспортировать палитру в шести различных форматах. Coolors даже доступен как приложение для iOS и надстройка Adobe.
2. Палеттон
Paletton имеет множество опций настройки, которые помогут вам создать красивую цветовую схему. Выберите использование предустановленных опций или займитесь фристайлом и создайте уникальную палитру с нуля. Двадцать четыре предустановленных эффекта, таких как яркая пастель, блестящий и темный неон, можно использовать для настройки вашей новой палитры.
Одна из самых удобных функций Paletton — это живые образцы создаваемых вами цветовых схем. Одним щелчком мыши инструмент может открыть образец дизайна веб-сайта на основе вашей палитры, дополненный изображениями и анимацией. Вы даже можете протестировать, как каждая цветовая схема будет выглядеть для зрителей с различными типами дальтонизма. После завершения настройки вы можете экспортировать палитру в несколько различных форматов, включая код CSS и образец цвета PNG.
3. Adobe Color CC
Adobe Color CC (ранее Adobe Kuler) дает вам возможность начать с нуля, загрузить изображение для вдохновения или выбрать цветовую палитру из сообщества Adobe CC.Когда у вас есть отправная точка, вы можете либо применить алгоритмические правила к своей палитре, либо внести изменения вручную. Если вы используете изображение для вдохновения, у вас есть несколько вариантов эффектов для настройки цветовой схемы.
Цена возможности настройки Adobe Color CC — это период обучения. Интерфейс относительно интуитивно понятен, но его освоение потребует немного больше времени, чем некоторые другие, более простые генераторы цветовой палитры.
4. ColoRotate
Если вы чувствуете потребность в трех измерениях, не смотрите дальше: ColoRotate — это то, что вам нужно.Этот расширенный инструмент позволяет создавать палитры на трехмерном цветовом круге. Вы можете начать с нуля, загрузить изображение или использовать палитру из сообщества для вдохновения.
Интерфейс дизайна довольно сложен и поначалу может показаться пугающим. Однако потратьте немного времени на изучение пользовательского интерфейса, и вы увидите невероятные результаты. В качестве дополнительного бонуса веб-сайт предлагает обширную информацию о цвете, если вы хотите узнать больше о науке создания привлекательной цветовой схемы.
5. Цветовая сфера Mudcube
Mudcube Color Sphere предлагает десять различных вариантов для автоматического создания цветовой палитры, от нейтральных до дополнительных или конфликтующих цветов. Просто выберите базовый цвет, выберите правило генерации и настраивайте его, пока не будете довольны. Как и Paletton, Mudcube позволяет вам видеть ваши цветовые схемы с точки зрения дальтоника. Несмотря на некоторую пугающую терминологию, пользовательский интерфейс довольно прост в использовании.
Когда вы будете довольны своей цветовой палитрой, либо сохраните ее как файл Adobe Illustrator или Photoshop, либо сохраните URL-адрес уникальной цветовой палитры, чтобы вернуться к ней позже.
6. ColRD
ColRD — это интуитивно понятный генератор цветовой палитры с множеством опций. Одна из его лучших функций — сетка из 140 похожих цветов, отображаемая рядом с тем, над которым вы сейчас работаете, что ограничивает необходимость настройки нескольких панелей управления при попытке найти идеальную палитру.
Помимо стандартной опции запуска с нуля, ColRD позволяет загружать изображения. Предупреждение: этот процесс на ColRD, по-видимому, выполняется медленнее, чем на других генераторах, предлагающих такую же функцию.ColRd также имеет потрясающую библиотеку изображений сообщества с соответствующими цветовыми палитрами. Даже если вы решите не использовать этот инструмент, их библиотеку определенно стоит изучить.
7. ColorHexa
ColorHexa, самопровозглашенная энциклопедия цветов, не разочаровывает. В интерфейсе вы можете создавать палитры с помощью различных методов, включая создание градиента, смешивание цветов и вычитание цветов.
Вы также можете ввести любой цветовой код в любой форме и получить все его переводы, помимо предложений палитры на основе цвета.Таким образом, это не только удобный инструмент для создания палитры, но и отличный ресурс для изучения цвета.
8. COLORlovers
Немного отличается от других инструментов в этом списке, COLORlovers — это в первую очередь веб-сайт сообщества, где приоритетом является то, чтобы вы делились своей цветовой схемой или черпали вдохновение из библиотеки. Их инструмент работает лучше всего, если у вас уже есть хорошее представление о цветовой палитре, которую вы хотите создать, и вы просто хотите видеть свои цвета рядом.В нем нет предустановленных параметров для управления генерацией цвета, но он предлагает 12 похожих цветов рядом с тем, над которым вы сейчас работаете.
На веб-сайте COLORlovers также есть более продвинутый генератор цветовой палитры под названием COPASO (см. Ниже).
9. КОПАСО
COPASO — это более продвинутое предложение COLORlovers. Он предоставляет гораздо больше возможностей для создания вашей цветовой палитры в виде общих предустановок, таких как дополнительные, триадные и тетрадные цвета.Однако, хотя COPASO может быть более продвинутым, чем базовый инструмент, он все же не может сравниться с некоторыми из более продвинутых доступных опций. Более того, пользовательский интерфейс сложнее, чем вы ожидаете от довольно простого инструмента.
Опять же, главная привлекательность COPASO — это сообщество COLORlovers. Сообщество — мечта истинного ценителя цвета, где делятся множеством красивых палитр и узоров и обсуждаются их применения.
10. Colordot
Уникальная особенностьColordot — это ультра-минималистичный интерфейс, позволяющий создать идеальную цветовую палитру.Вы изменяете каждый цвет движением мыши; перемещайте из стороны в сторону для оттенка, вверх и вниз для легкости и прокручивайте для насыщенности. Если цвет вас устраивает, просто нажмите, чтобы сохранить.
Нет возможности экспорта, но Colordot автоматически сохранит URL-адрес вашей окончательной палитры. У Colordot также есть приложение для iOS, в котором вы можете играть с цветовыми палитрами, а также делиться ими в своих учетных записях в социальных сетях.
11. Цветовой код
На первый взгляд, Colourcode почти идентичен Colordot, так как имеет тот же инструмент смены цвета на основе курсора (вы даже можете изменить всю цветовую палитру сразу, перемещая курсор).Однако эта функция представляет собой только инструмент бесплатной сборки в Colourcode; Полный инструмент предлагает несколько других вариантов создания палитры.
Сохраните свою работу в различных цветовых кодах, в файле PNG или постоянной ссылке.
12. Поддон
Еще один инструмент создания минимальной цветовой палитры, пользовательский интерфейс Palettable напоминает Colordot, хотя работает по-другому. Palettable предоставляет вам предложения по цветам, которые вам могут понравиться, не понравиться или настроить с помощью цветового блока.
Полноэкранный дисплей генератора — несомненный плюс, позволяющий легко увидеть, насколько хорошо ваши цвета дополняют друг друга. Инструмент автоматически создает палитру для каждого созданного вами инструмента, к которой вы можете вернуться в любое время.
13. Палитра материалов
Палитра материаловот UpLabs вдохновлена Google Material Design. Этот простой инструмент предлагает вам выбрать два цвета из 19 на выбор. Затем он генерирует палитру из восьми цветов по вашему выбору, включая два выбранных вами цвета или их вариации.Несмотря на то, что других параметров настройки нет, Material Palette все же создает привлекательные цветовые схемы.
Инструмент также предлагает варианты размещения каждого цвета на своем сайте, включая основной цвет, дополнительный цвет, основной цвет текста и дополнительный цвет текста.
14. PHOTOCOPA
PHOTOCOPA — это расширенный генератор цветовой палитры на основе изображений, также созданный хорошими людьми из COLORlovers. После выбора базового изображения (загрузите собственное или выберите из огромной галереи) вам будет предложено 48 вариантов цвета.Вы также можете выбрать из шести различных цветовых палитр с такими эффектами, как яркий, приглушенный, аналогичный и случайный.
Один щелчок открывает полноэкранное отображение выбранной палитры. Однако есть один недостаток: цвета нельзя настроить напрямую в инструменте, поэтому вы ограничены палитрами, которые инструмент автоматически извлекает из изображения.
15. Colorfavs
Colorfavs позволяет вам создавать цветовые палитры либо из загруженных или веб-изображений, либо случайным образом после установки нескольких простых параметров, таких как количество цветов, оттенок и яркость.Для каждого цвета в палитре вы можете просматривать шестнадцатеричные преобразования, стандартные цветовые схемы, тона градиента и многое другое.
Colorfavs также предлагает множество полезных советов и предложений от других пользователей своего сообщества. Один из самых больших плюсов инструмента — дизайн пользовательского интерфейса. Интерфейс не только интуитивно понятен, но и довольно эстетичен.
16. Живописный
Все мы знаем MailChimp за его популярный инструмент автоответчика, но один из его менее известных инструментов — Pictaculous.Еще один генератор изображений, Pictaculous, создает пятицветную палитру после загрузки изображения. Его самая интересная особенность заключается в том, что он также извлекает предложения по палитре от сообществ Adobe Color CC (обозначенных как Kuler) и COLORLovers — по пять от каждого.
Хотя в Pictaculous отсутствуют параметры настройки, удобная комбинация предложений от Adobe и COLOURLovers заставляет взглянуть на него еще раз. В качестве дополнительного бонуса вы можете экспортировать палитры в файл Adobe.
17. Поддон
Palettr представляет собой совершенно новый взгляд на поколение цветовой палитры.Вместо того, чтобы создавать предложения цветовой схемы вокруг изображения, сообщения сообщества или вашего собственного выбора, Palettr создает цветовые палитры на основе ключевого слова. Просто введите выбранное вами ключевое слово, и инструмент отобразит подборку фотографий, относящихся к вашему ключевому слову, размером от 500 пикселей, в сопровождении предлагаемых цветовых палитр для каждого изображения.
Я считаю, что этот инструмент особенно полезен, когда вы знаете общую тему / ощущение, которое пытаетесь создать, но совершенно не знаете, с чего начать с цветов. Вы можете даже убить двух зайцев, найдя подходящие изображения для своего веб-сайта.
Стоит отметить, однако, что поиск по ключевым словам не всегда дает изображения того типа, которого вы ожидаете. Возможно, вам придется немного поиграть, прежде чем найти подходящую палитру.
18. Цветной блендер
Color Blender — это генератор цветовой палитры со специальным приложением. Просто укажите два цвета и количество цветов средней точки, которые вы хотите видеть, и инструмент отобразит точки между ними. Вот и все.
Хотя интерфейс Color Blender выглядит довольно скучно, вы действительно получаете четкие инструкции на странице, а инструмент просто выполняет свою работу.URL-адрес вкладки автоматически обновляется с учетом вашей конкретной цветовой палитры. Просто сделайте закладку и заходите снова, когда захотите.
19. Сплошные цвета
Cohesive Colors — еще один базовый инструмент, который предлагает нечто иное. Он создает только простую цветовую палитру, но также позволяет накладывать на палитру любой цвет по вашему выбору.
Вы можете начать со своего собственного набора цветов или выбрать случайный из COLORlovers. Затем выберите цвет наложения и отрегулируйте интенсивность.Этот инструмент обеспечивает согласованную цветовую схему, но не позволяет настраивать отдельные цвета.
Заключение
Доработка цветовой схемы для вашего веб-сайта может оказаться сложной задачей даже для самого опытного дизайнера. К счастью, существует множество автоматических генераторов палитры, которые помогут вам выбрать идеальную цветовую комбинацию.
В этой статье мы обсудили 19 удивительных генераторов цветовых схем, от самых простых до более сложных.
Один из наших личных фаворитов — Coolors, фантастический инструмент, который объединяет множество функций в очень удобном интерфейсе. Если вы ищете что-то еще более продвинутое, то Paletton с его значительными возможностями настройки и множеством примеров — еще один отличный выбор.
Более простой вариант, Colourcode имеет супер простой интерфейс с достаточным количеством параметров настройки для создания красивой палитры. Для палитр, вдохновленных изображениями, мы выберем PHOTOCOPA; он интуитивно понятен и предлагает отличные варианты палитры.
Какими бы ни были ваши потребности в конкретной цветовой палитре, в этом списке обязательно найдется инструмент, который поможет вам выполнить свою работу. Попробуйте несколько из них и посмотрите, какие из них вам подходят.
Как вы выбираете цветовые схемы для своих проектов? Дайте нам знать в разделе комментариев ниже и не забудьте подписаться, чтобы следить за беседой!
Миниатюра статьи изображение от eatcute / shutterstock.com
15 лучших бесплатных онлайн-генераторов цветовой палитры на 2021 год
Одним из наиболее важных шагов любого проекта графического или веб-дизайна является создание соответствующей цветовой палитры для использования во всем дизайне.
Создание профессиональной и творческой цветовой палитры также может быть очень трудоемкой задачей. Мы здесь, чтобы облегчить вам этот процесс.
В этом посте мы представляем некоторые из лучших генераторов цветовой палитры, которые вы можете использовать для создания эффективной цветовой палитры для любого типа дизайна всего за несколько кликов.
Некоторые из этих генераторов даже помогут вам найти цветовые палитры, основанные на различных тенденциях, таких как плоский цвет и дизайн цвета материала. Они также включают шестнадцатеричный код, который вы можете скопировать, чтобы добавить правильные цветовые коды при разработке веб-сайтов.Лучше всего то, что их можно использовать совершенно бесплатно.
4 совета по созданию профессиональных цветовых палитр
Прежде чем перейти к списку, давайте изучим основы создания более эффективных цветовых палитр.
1. Различные типы цветовых палитр
Прежде всего, вы должны знать о четырех основных типах цветовых палитр.
- Монохроматический: монохроматические цветовые палитры — это те, которые вы создаете, используя разные оттенки одного цвета.Их довольно легко сделать, и они обычно используются многими популярными брендами.
- Аналог: Аналогичные палитры состоят из цветов, близких друг к другу на цветовом круге. Если вы выберете основной цвет, тогда цвета рядом с ним можно будет выбрать как второстепенные цвета для этого типа палитр.
- Дополняющий: Подобно аналогу, дополнительные палитры состоят из цветов, противоположных друг другу в цветовом круге.
- Triadic: Палитры Triadic состоят из трех основных цветов.Эти цветовые палитры лучше всего подходят для создания четко видимого контраста в дизайне.
Кроме того, вам также следует изучить и понять теорию цвета.
2. Рассмотрим психологию цвета
Цвета связаны с определенным психологическим фактором. Согласно психологии цвета, разные цвета оказывают сильное влияние на вызывание определенных эмоций у людей. Например, черный цвет ассоциируется с элегантностью, загадочностью и авторитетностью. Вот почему этот цвет в основном используют люксовые бренды.
Рассмотрите возможность применения психологии цвета при выборе цветов для своей цветовой палитры.
3. Использование цветовых трендов
Важно также учитывать цветовые тенденции при создании цветовой палитры. Особенно если вы создаете дизайн для современного бренда или стартапа, тренды играют важную роль в привлечении текущей аудитории.
Тенденции постоянно меняются, и есть много разных тенденций, которые вы можете применить к своим цветовым палитрам, например, тренд плоских цветов, цвета материального дизайна, цвета метро и многое другое.
4. Найдите вдохновение в реальных фотографиях
Лучшие цвета — в реальной жизни. Если вы предпочитаете более реалистичную цветовую палитру, вдохновленную природой, вы можете использовать настоящие фотографии, чтобы найти вдохновение для своей цветовой палитры. Существуют инструменты и приложения, которые также позволяют создавать цветовые палитры на основе фотографий и изображений.
Без лишних слов, давайте приступим к изучению генераторов цветовой палитры, не так ли?
Если вы когда-нибудь задумывались о цветовых палитрах, используемых популярными брендами, или хотели украсть цветовую палитру у вашего любимого бренда, BrandColors — это веб-сайт, который стоит оставить в закладках.В нем представлена обширная коллекция цветовых палитр, используемых популярными брендами.
Coolors.co — один из простых в использовании генераторов цветовой палитры, который идеально подходит для начинающих. Он позволяет создавать цветовые палитры с нуля или исследовать палитры, созданные другими. Инструмент также включает полезную опцию для загрузки изображений, чтобы выбрать базовые цвета из фотографий.
Создав учетную запись на сайте, вы можете сохранять свои палитры в облаке и создавать свои собственные коллекции для последующего доступа.
Color Hunt — это массивная коллекция цветовых палитр, созданная дизайнерами. Он включает в себя множество различных типов цветовых палитр, которые вы можете изучить в зависимости от популярности или тенденций. Поскольку эти цветовые палитры уже созданы другими дизайнерами, вы можете легко выбрать палитру и начать свой дизайн.
Этот инструмент также позволяет создавать свои собственные цветовые палитры. Однако может потребоваться немного опыта, чтобы найти лучшие цвета для вашей палитры.
Colormind — еще один удобный для начинающих генератор цветовой палитры, который включает в себя очень интересную функцию, которая позволяет вам в реальном времени предварительно просмотреть свою цветовую палитру, примененную к образцу дизайна.Он также позволяет вам выбирать между цветным дизайном материала и бумаги, а также переключаться между дизайном веб-сайта и шаблоном.
Помимо создания цветовых палитр одним щелчком мыши, Colormind позволяет также создавать цветовые палитры из изображений.
Color Designer — это слегка усовершенствованный генератор цветовой палитры, в котором есть множество уникальных инструментов для создания профессиональных цветовых палитр. Этот инструмент позволяет создавать цветовые палитры с использованием трех различных систем: «Образцы», «Палитра цветов» и «Массовый редактор».Каждый вариант дает вам свои преимущества.
Выбрав базовые цвета, вы также можете перейти на следующий уровень, исследуя различные оттенки, оттенки и цветовые гармонии из обширного списка.
Paletton — еще один продвинутый инструмент для создания цветовых схем, который имеет более сложный набор опций для создания цветовых палитр. На первый взгляд, этот инструмент может показаться довольно сложным для понимания. Однако это один из немногих инструментов, который позволяет создавать цветовые палитры на основе основных типов цветовых палитр, включая монохроматические и триадные.
Этот инструмент больше всего подходит для опытных дизайнеров, которым нравится экспериментировать и тестировать различные типы цветовых палитр и цветовых схем.
Генератор цветовой палитрыCanva обладает очень простыми функциями, но отлично справляется со своей задачей. Инструмент прост: вы просто загружаете фотографию или изображение на сайт, и инструмент автоматически генерирует цветовую палитру на основе основных цветов изображения. Затем вы можете скопировать цветовые коды одним щелчком мыши.
Несмотря на то, что инструмент предлагает ограниченные возможности, он идеально подходит для поиска базовых цветов для создания естественной цветовой палитры.
Это усовершенствованный редактор цветовой палитры от Adobe для профессиональных дизайнеров. Этот инструмент также позволяет создавать цветовые палитры на основе монохроматических, триадных, аналогичных и других типов палитр. Кроме того, вы можете загрузить изображение, чтобы извлечь из него цвета.
Khroma — это современный генератор цветовых палитр, использующий технологию искусственного интеллекта для создания творческих цветовых палитр. Во-первых, вам нужно выбрать 50 разных цветов, чтобы обучить ИИ генерировать цветовые палитры на основе вашего выбора.Тогда вы сможете выбирать из множества цветовых комбинаций, созданных ИИ, чтобы найти правильную цветовую палитру для вашего проекта.
ColorSpace — еще один простой в использовании генератор палитр, который позволяет создавать цветовые палитры одним щелчком мыши. Все, что вам нужно сделать, это ввести шестнадцатеричный код основного цвета на веб-сайт, а затем нажать кнопку «Создать». Затем инструмент генерирует различные стили цветовых палитр вместе с соответствующими градиентами.
Color Tool — это усовершенствованный инструмент для создания цветовой палитры, разработанный для дизайнеров веб-сайтов и пользовательских интерфейсов.Инструмент позволяет создавать цветовые палитры материального дизайна на основе пользовательского интерфейса и категорий доступности. Полезной особенностью этого инструмента является то, что он предлагает предварительный просмотр в реальном времени при выборе цветов для палитры.
Collor — еще один простой генератор цветовых палитр, который предлагает более простой опыт создания цветовых палитр. Просто выберите основной и вторичный цвета, и он сгенерирует набор цветовых палитр, из которых вы сможете выбирать и настраивать. Единственным недостатком использования этого инструмента является то, что он требует, чтобы в вашем браузере был включен Flash.
ColourLovers содержит коллекцию цветовых палитр, созданных другими дизайнерами. Вы можете выбрать готовую палитру из списка или создать свою собственную. Создатель цветовой палитры также предлагает варианты создания базовой и расширенной палитры, а также возможность извлечения цветов из фотографии.
Colourcode — это простой инструмент для создания цветовой палитры, который можно использовать для создания уникальных цветовых схем, просто наведя курсор мыши на экран.Как только вы найдете цвет, простой щелчок левой кнопкой мыши выбирает его, а затем вы можете переходить к следующему цвету. Инструмент также позволяет находить цвета на основе монохромных, аналоговых, триадных и других типов.
Эта палитра цветов также является отличным инструментом, который можно использовать для создания цветовых палитр. Он позволяет вам выбирать цвета, которые подходят для светлого и темного фона, а также имеет параметры для выбора одного оттенка и различных цветовых схем.
Хотите узнать, как подбирать цвета? Тогда обязательно ознакомьтесь с нашим руководством о том, как сочетать цвета, как профессионал, а также с нашей статьей о дизайне с использованием монохромной цветовой схемы.
Похожие сообщения
7 правил для цветовых схем веб-сайтов
Для веб-авторов инвестирование в визуальную иерархию является естественным шагом в нашем рабочем процессе дизайна. В прошлом году в блоге Shutterstock была опубликована статья «6 правил визуальной иерархии, которые помогут вам разрабатывать лучше». Эти правила, как они объясняют, основаны на всеобъемлющей цели — упорядочении компонентов дизайна на основе важности, что «направляет зрителя через дизайн и гарантирует, что сообщение будет ясным и лаконичным.”
Из шести правил Shutterstock первое и главное правило относится к цветовой схеме веб-сайта, и они формулируют это правило следующим образом: «Сделайте фокус с помощью цвета». Что мы можем понять из этого, так это то, что когда вы обращаетесь к визуальной иерархии своего веб-сайта, ваша цветовая палитра является одним из наиболее важных вариантов дизайна, которые следует учитывать. Это верно для цветов, которые вы выбираете для текста, цветов кнопок, фона и т. Д.
Согласно этому образу мышления, когда у вас есть главный текст, а затем описание под ним, ваш выбор цвета шрифта имеет решающее значение, как и ваш выбор цвета фона.Например, на изображении выше различить заголовок и подзаголовок гораздо проще, если им присвоены два разных цвета. Таким образом, более «важный» текст будет темным цветом, а «менее важный» текст — более светлым контрастным цветом. Глаз обращается к h2 перед подзаголовком просто потому, что он очень выделяется и каждый легко увидеть в отдельном свете. Во втором визуале оба текстовых элемента имеют один и тот же цвет, поэтому глаз инстинктивно видит их как одно целое и медленнее разделяет их на два разных объекта.
Принцип разработки цветовых палитр как детерминанта визуальной иерархии относится почти к каждому визуальному компоненту веб-сайта. Это верно для цветов текста, как мы описали, но также и для цветов фона и цветов кнопок. Подчеркнуть важность конкретной кнопки часто можно, выбрав цвет кнопки, который с наибольшей вероятностью привлечет внимание пользователя и, в конечном итоге, приведет к более высокому рейтингу кликов.
Создайте стиль CSS для радиуса границы, шрифтов, преобразований, фона, окон и теней текста с помощью онлайн-генераторов кода CSS.
30 цветовых палитр для веб-сайтов — выберите цвета для своего веб-сайта
Цвет — это первое, что люди замечают на вашем сайте. Начните с этих профессионально созданных цветовых комбинаций.
Создание онлайн-присутствия является абсолютной необходимостью для любого бизнеса. Помимо создания собственного веб-сайта, внешний вид и оформление вашего веб-сайта должны дополнять ваш бренд и товарное предложение. Психология цвета и брендинг идут рука об руку; тон и настроение, привязанные к определенным цветам, говорят потребителям, какой у вас бизнес.Бренды, в которых используются землистые оттенки, могут казаться естественными и экологичными, в то время как бренды, использующие розовый цвет, могут казаться более женственными.
Ваш продукт или услуга и ваша целевая аудитория также во многом определяют цвета, которые вы используете в своем бренде и на веб-сайте. Ваш бизнес ориентирован на детей до десяти лет или он интересен взрослой аудитории в возрасте от двадцати пяти до сорока пяти лет? Если вам сложно понять, какие цвета нравятся вашей целевой аудитории, узнайте, как ваши конкуренты подходят к использованию цвета.
Как выбрать цвета для вашего веб-сайта
Выбирая цветовую схему для своего веб-сайта, лучше всего ограничить палитру четырьмя оттенками или меньше. Простая формула — найти один доминирующий оттенок, один вторичный оттенок и один акцентный оттенок. Доминирующие и второстепенные оттенки могут иметь цветовые вариации, например оттенки, оттенки или тона. Доминирующие цвета должны говорить о типе вашего бренда и бизнеса. Второстепенные или вторые по популярности оттенки должны контрастировать или дополнять ваш доминирующий оттенок.Акцентные цвета должны выделяться и лучше всего подходить для ссылок, кнопок, значков и других мелких элементов. Если у вас есть логотип яркого оттенка, попробуйте добавить его в качестве основного цвета.
При разработке веб-сайта придерживайтесь четырех или менее цветов. Изображение через Visual Generation.Конфликтующие цветовые палитры могут оттолкнуть потребителей от вашего веб-сайта. Лучшие оттенки приятны для глаз и легко читаются на экранах разных размеров и форматов. Хорошо спроектированный веб-сайт не сочетает в себе ярко-желтый и белый цвета, поскольку сочетание двух светлых оттенков затрудняет чтение информации.Также очень важно учитывать слои и цвета, а также то, как они выглядят рядом друг с другом.
Цветовая схема вашего веб-сайта имеет решающее значение для имиджа вашего бренда. Он формирует то, как зрители видят ваш сайт, развивает чувство порядка и иерархии и позволяет выделять важную информацию. Согласованная цветовая схема также создает ощущение потока и баланса между разными страницами. Гармоничная цветовая палитра действительно больше, чем просто эстетика.
Читайте дальше, чтобы найти тридцать цветовых палитр для различных отраслей, а также десять макетов веб-сайтов, которые помогут вам визуализировать свою собственную палитру веб-сайта.
Цветовые палитры для сайтов о здоровье и красоте
Отрасли здоровья и красоты обычно способствуют благополучию, заботе о себе и счастью. Выбирая оттенки для своего салона красоты, подумайте о выборе приглушенных тонов в холодных или теплых вариантах. Целая палитра ярких цветов может быть резкой для глаз и ощущать что угодно, только не спокойствие и умиротворение.
1. Аромат лаванды
Использование холодных тонов, таких как фиолетовый, зеленый и синий, — отличный способ вызвать умиротворение и умиротворение на вашем веб-сайте.Фиолетовый символизирует роскошь и покой, синий символизирует верность и безмятежность, а зеленый внушает чувство безопасности и роста. В сочетании эти оттенки идеально подходят для брендов, рекламирующих товары, которые способствуют спокойствию.
Используйте холодные тона, чтобы придать дизайну безмятежность. Изображение предоставлено Эйрен Фагус.2. Безмятежное небо
Nature предлагает лучшие цветовые палитры. Небо на рассвете и в сумерках служит источником вдохновения для любого веб-сайта, особенно тех, которые продвигают товары для здоровья.При использовании по отдельности кораллово-розовый и апельсиновый цвета могут казаться резкими, но в сочетании с зелеными и серыми оттенками палитра получается гармоничной и сбалансированной.
Не бойтесь черпать вдохновение в природе. Изображение предоставлено Тананья Питхи.3. Йога на открытом воздухе
Вдохновение из пейзажей идеально подходит для пропаганды практик йоги и медитации. Используйте акцентные цвета, такие как глубокий кораллово-розовый, чтобы компенсировать более холодные тона природы.
Используйте яркие цвета, чтобы добавить свежести палитре с естественной тематикой.Изображение Юлия Григорьева.4. Очаровательный аптекарь
Оранжевые оттенки создают дружелюбное поведение, особенно в его ярких формах. Приглушая этот популярный оттенок и добавляя оттенки и тона, бренды могут привнести намек на изысканность в свои веб-сайты.
Медовые тона придают веб-дизайну изысканность и гламур. Изображение предоставлено Ефетовой Анной.5. Спа-центр
Оранжевый и синий — классические дополнения. Выбирайте приглушенные версии, чтобы уравновесить эти теплые и холодные тона.При умеренном использовании в качестве акцента оранжевый может придать яркости веб-сайту спа или косметолога.
Приглушенный оранжевый цвет придает энергию успокаивающей зелени. Изображения через Anna Ok, PureSolution и васанаджай.Цветовые палитры для сайтов, торгующих продуктами питания и напитками
Использование ярких и привлекательных оттенков является ключевым моментом при продвижении еды и напитков на вашем сайте. Яркие цвета выглядят более привлекательно, чем мутные серые оттенки. Нанося привлекательные цвета на свой сайт, обязательно применяйте их вдумчиво, а не небрежно.
6. Яркая чаша
Яркие цвета продуктов создают красивую цветовую палитру для блогов о еде, ресторанов и бакалейных лавок. Красновато-розовый и зелень авокадо отлично сочетаются друг с другом в качестве классического дополнения.
Разбудите аппетит свежей зеленью и ярким цветом. Изображение предоставлено Тимолиной.7. Звездный синий
Blueberries — настоящая звезда шоу. Глубокие синие и пурпурные тона этого универсального фрукта являются отличным источником вдохновения для магазинов напитков и кулинарных блогов.Палитра холодных тонов гармонична и радует глаз.
Нежные прохладные тона привлекают внимание зрителя, не отвлекая его. Изображение предоставлено Ольгой Мильцовой.8. Контрастный цитрус
Яркость апельсиновых цитрусовых выделяется на голубом фоне. В паре оранжевый выделяется больше, чем в паре на красном фоне. Добавьте изюминку в свой сайт, используя эту классическую цветовую схему.
Яркий оранжевый и успокаивающий синий — классическая привлекательная комбинация.Изображение предоставлено Kiian Oksana.9. Богатый красный
Red вызывает у зрителей бурные эмоции и повышенный аппетит. Рестораны используют эту цветовую психологию при создании элементов брендинга. При использовании в Интернете ярко-красный цвет может быть слишком резким для зрителей; вместо этого выберите оттенки, оттенки и тона красного, чтобы вызвать аналогичные психологические реакции.
Более мягкие красные тона обладают всей глубиной настоящего красного без какой-либо резкости. Изображение предоставлено Daxaio Productions.10. Фермерский рынок
Земляные тона и фермерские рынки идут рука об руку. Вместо того чтобы выбирать непривлекательные мутные тона, выберите яркие зеленые и желтые тона в сочетании с насыщенным коричневым.
Цвета урожая вызывают ассоциации с пышными садами и фруктовыми садами. Изображение через marcin jucha и chelovector.Цветовые палитры для сайтов блогов и портфолио
Выбор привлекательной цветовой палитры для вашего блога или веб-сайта портфолио имеет решающее значение для поиска вакансий и клиентов.Хотя большая часть веб-сайта сосредоточена вокруг контента и изображений, нельзя упускать из виду общую палитру. Ключевым моментом является использование игривых и энергичных оттенков; те же оттенки должны дополнять (а не противоречить) вашей работе.
11. Работа с сеткой
Ваша палитра всегда должна хорошо сочетаться с вашим портфолио. Если сомневаетесь, используйте привлекательный розовый в качестве акцента, а затем компенсируйте яркость этого оттенка глубокими синими и зелеными оттенками.
Выбирайте цвета, которые дополняют вашу работу.Мокап через нелелену. Значок заголовка через Mio Buono. Иллюстрации через miniwide, GoodStudio, GoodStudio, Moremar, Ardea-studio, Lavrushka, GoodStudio и GoodStudio.12. Красочная эстетика
Если ваша индивидуальность такая яркая, как эта цветовая палитра, то ваш веб-сайт должен это отражать. Эта комбинация желтого, синего и красного оттенков выделяет любое портфолио или блог.
Используйте радостные цвета, чтобы отразить общительный характер. Изображение предоставлено AlessandroBiascioli.13. Красивая в розовом
При умеренном и преднамеренном использовании розовый цвет успешно пробуждает женственность и беззаботность, что идеально подходит для блоггеров, работающих в женском стиле. Добавьте оттенки желтого, чтобы сайт был веселым и ярким.
Мягкие розово-розовые тона добавляют всплеск женственности. Изображения через Юлию Завалишину, Серенко Наталью и босоточку.14. Коралловая зелень
В то время как сочетание красного и зеленого обычно представляет рождественские праздники, приглушенные вариации этих дополнительных цветов вызывают что угодно, только не.Этот кораллово-красный выступает в качестве идеального акцента на темно-зеленом.
Используйте дополнительные цвета, чтобы придать вашему сайту живость. Изображение предоставлено Victoria43.15. Простая красота
Приглушенный желтый цвет — жидкое золото при правильном использовании. Сместите богатую яркость этого оттенка с бирюзовым и глубоким синим, и вы получите победителя.
Простота тоже работает. Мокап через нелелену. Значок заголовка через Mio Buono. Иллюстрации через Mio Buono, Mio Buono, Mio Buono, Mio Buono, Mio Buono и createvil.Цветовые палитры для экологических объектов
Веб-сайты, пропагандирующие окружающую среду (или причины, связанные с окружающей средой), становятся все более популярными, поскольку изменение климата становится огромной проблемой. Хотя движение и причина намного перевешивают внешний вид веб-сайта, наличие привлекательного сайта очень полезно.
16. Зеленая красота
Лесная зелень — потрясающее зрелище при демонстрации окружающей среды на веб-сайте. Добавьте тона натурального дерева и бамбука, чтобы гармонизировать эту палитру и создать ощущение леса.
Теплые нейтральные и глубокие тона драгоценных камней передают изысканность и гармонию. Изображение предоставлено Абрамовой Александрой.17. Рыба-клоун
Океан предлагает множество прекрасных оттенков, которые послужат источником вдохновения для вашего веб-сайта. Классическая комбинация оранжевого и синего цветов оживает с этой рыбой-клоуном и анемоном.
Вызовите морскую жизнь с помощью насыщенного красно-оранжевого и темно-синего цветов. Изображение предоставлено J’nel.18. Воздействие на океан
Пластик сеет хаос на нашей планете, и многие группы начинают действовать.Продвигайте свою преданность планете и своему делу, создав веб-сайт, на котором освещается красота океанского блюза и вред, который наносит пластик.
Черпайте вдохновение в самом море. Изображения через Mr.anaked и WindAwake.19. Блестящие лилии
Лилии действительно прекрасны; их яркие лепестки и дурманящий запах — это то, о чем можно мечтать. В сочетании с темно-зеленой зеленью эти привлекательные желтые оттенки выделяются и подчеркивают любой экологический веб-сайт.
Яркие желтый и глубокий зеленый цвет придадут вашему сайту весеннюю свежесть. Изображение предоставлено JUTARAT BUADOK.20. Амазонский тукан
Что не нравится в тукане? Их ярко-оранжевые клювы особенно выделяются на фоне зелени. Как и в случае с клювом этой популярной птицы, нанесите эти яркие апельсины на небольшие акцентирующие элементы, такие как кнопки, ссылки или значки, чтобы создать контраст в более естественных тонах.
Спокойные яркие тропические тона с мягкими нейтральными оттенками. Изображение через MarcusVDT.Цветовые палитры для сайтов фитнеса и тренировок
Яркие, энергичные оттенки — звезда шоу на сайтах, посвященных фитнесу и тренировкам. В этом случае выбор цвета имеет огромное значение и может означать разницу между успешной страницей фитнеса и красивой страницей фитнеса. Мягкие пастельные тона не совсем соответствуют силе и энергии, необходимой для упражнений. Насыщенные красные, синие или желтые цвета действительно символизируют интенсивность тренировок.
21. Силовые тренировки
Гири — распространенное оборудование для силовых тренировок.Как видно на этом изображении ниже, насыщенные желтый и синий контрастируют с окружающими его серыми и черными цветами. Применяя эту палитру к своему веб-сайту, посвященному упражнениям, подумайте об использовании жирного синего и желтого цветов в качестве акцентов для кнопок, ссылок, деталей и логотипов.
Спортивные синие и желтые цвета придадут вашему сайту энергичные акценты. Изображение через ColorMaker.22. Тренажерный зал Excel
Целевая страница, которую ваши зрители видят при первом посещении вашего сайта, должна отражать настроение и тон вашего бизнеса.В этом случае насыщенный красный цвет, примененный к более глубокому красному, позволяет выделить важную информацию, побуждая ваших зрителей переходить по этим ссылкам.
Глубокий красный цвет — мощный фоновый образ. Изображения через sportpoint и Alex_Colt.23. Ряд мощности
Хотя эти оттенки не такие яркие, как их насыщенные аналоги, темно-розовый и желтый так же выделяются в сочетании с темно-синим. Это говорит о том, что сочетание цветов вашего веб-сайта имеет решающее значение для создания гармоничной страницы, которая соответствует характеру вашего бизнеса.
Глубокие розовый и желтый цвета согревают успокаивающий синий цвет. Изображение предоставлено Dmitrydesign.24. Бесстрашный фитнес
Нет ничего более мощного и сильного, чем насыщенный красный фон. В то время как красные лучше всего подходят для акцентных оттенков, более глубокий тон действительно может оказать влияние, когда другие оттенки сохранены чистыми и простыми. Добавьте ярко-желтый, чтобы побудить зрителей нажать на эту важную кнопку.
Глубокий золотисто-желтый цвет выделяется на фоне теплых красных тонов. Изображения через Джейкоба Лунда и Зубдаша.25. Поход в горы
Суровые пейзажи — отличный источник цветового вдохновения. Оранжевые и серые оттенки хорошо сочетаются с их приглушенным характером. Сочетание яркого красного с этими ненасыщенными цветами легко сделает ваш сайт ярче.
Тренируйтесь и вдохновляйтесь на свежем воздухе. Изображение через everst.Цветовые палитры для сайтов одежды и одежды
Веб-сайты с одеждой и одеждой должны быть связными, веселыми и привлекательными. Тусклый, унылый веб-сайт не побуждает зрителей просматривать или покупать товары.И приглушенные, и насыщенные оттенки отлично подходят для этого типа веб-сайтов. Однако цветовая палитра все же должна соответствовать тону одежды и самой торговой марки.
26. Яркая одежда
Ярко-желтый, розовый и синий обычно конфликтуют при неосторожном применении. Однако при осознанном и преднамеренном использовании эти насыщенные цвета могут говорить о живом характере вашего бизнеса. Используйте синий и розовый в качестве доминирующих оттенков, а затем сделайте акцент на желтом.Как всегда, вы также можете уменьшить яркость, добавив белый, серый или черный цвет, чтобы получить более ненасыщенный вид.
Пастельные тона добавляют энергии и оживляют шоппинг. Изображение предоставлено Africa Studio.27. Cool Collective
Выбирая палитру для своего сайта одежды, всегда сосредотачивайтесь на самом продукте. Палитра должна дополнять одежду и модели, но не подавлять их. Нейтральные оттенки могут казаться тусклыми, но при правильном использовании они позволяют продукту действительно сиять.
Нейтральные изображения — отличный фон для сайтов розничной торговли. Изображение предоставлено Якобом Лундом.28. Коралловый наряд
Если вы когда-нибудь хотели сделать свой веб-сайт более ярким, тогда используйте кораллово-розовый и апельсиновый цвета. Выбирайте более светлые или темные вариации популярного оттенка, а затем контрастируйте теплые тона с прохладным акцентом бирюзы.
Добавьте немного чирка или бирюзы, чтобы охладить тропические кораллы. Изображение предоставлено Indigo Photo Club.29. Приглушенный стиль
Muted — не значит тусклый и тусклый.В тех случаях, когда ассортимент минимален, использование более нейтральной палитры визуально более привлекательно, чем использование полностью насыщенных оттенков. Вдохновение самой одеждой — всегда отличная отправная точка при выборе цветовой схемы для вашего веб-сайта.
Черпайте вдохновение в своих продуктах. Изображение предоставлено Екатериной Зубал.30. Дорожные сигналы
Если сомневаетесь, выберите дополнительные оттенки. Классический контраст теплого оранжевого и холодных синих и коричневых оттенков добавляет глубины и азарта любому веб-сайту.
Холодный синий, теплый коричневый и апельсиновый цвета передают ощущение страсти к путешествиям. Изображение предоставлено OSABEE.Изображение обложки через SkyPics Studio.
Ищете другие способы повысить свое присутствие в Интернете? Ознакомьтесь с этими статьями ниже:
Модных веб-цветовых палитр и цветовых схем и инструментов для Material Design
Несколько недель назад Matt DesLauriers @mattdesl, программист графики, работающий в Jam3, показал нам интересную разработку, выполненную на нашей платформе.Как вы уже знаете, с 2009 года Awwwards собирает информацию о наиболее примечательных веб-сайтах, что делает нас важным источником для анализа тенденций веб-дизайна.
Проект начался как эксперимент, в то время я только изучал Node и решил посмотреть, смогу ли я очистить Awwwards для некоторой визуализации данных.
Мэтт разработал инструмент, который запрашивает каждую страницу галереи победителей Awwwards, а затем ищет в HTML все доступные метаданные, такие как имя сайта, автор, дата, URL, миниатюра и т. Д.Пиксели RGB каждой миниатюры анализируются, чтобы получить приблизительную цветовую палитру из трех основных цветов.
Результатом является великолепная визуализация данных, в которой каждый сайт представлен в виде круговой диаграммы, показывающей распределение его трех основных цветов. Визуализация была отрисована с помощью Canvas2D. Мэтт также использовал множество инструментов с открытым исходным кодом, включая Node.js, d3.js, Cheerio и Browserfy.
………
1. 20 сайтов дня с отличными цветовыми схемами
Во второй части этой статьи мы составили список цветовых палитр, которые использовались чаще всего за последние несколько месяцев.Указанный список должен включать самую последнюю SOTM.
# c0dfd9 # e9ece5 # b3c2bf # 3b3a36
УРОВЕНЬ По Vide Infra# edd9c0 # c9d8c5 # a8b6bf # 7d4627
Brdr. Krüger By Relax, мы хорошие ребята# dddfd4 # fae596 # 3fb0ac # 173e43
QED Group Автор: madeo#feffff # 98dafc # daad86 # 312c32
Teye By denkwerk# 6534ff # 62bcfa # fccdd3 # bbc4ef
Crea Carte от Dataveyes# 16174f # 963019 # f6f1ed # 667467
Bonhomme от Bonhomme# 262216 # 49412c # 97743a # b0a18e
Хорошо освещено Tool и Y&R NY#bccbde # c2dde6 # e6e9f0 # 431c5d # e05915 # cdd422
Антон и Ирэн Автор Антон и Ирэн, Студия Олега Чулакова………
2. Цвет в материальном дизайне: теория и инструменты
Как и ожидалось, в последнее время наблюдается распространение цветовых инструментов, основанных на философии материального дизайна, которую Google представил на I / O 2014. Это самая важная тенденция последнего времени, и поэтому мы составили список ресурсов. который поможет вам понять и реализовать цветовые подсказки, предоставленные нам Material Design.
Palette Perfect: как материальный дизайн упрощает цвет
Material Design Color Guidelines: Цвет должен быть неожиданным и ярким.
Цвета материалов
Палитра материалов
Материал UP: Цвета
………
3. Полезные инструменты для создания и понимания цветовых палитр
В дополнение к нашему короткому выбору цветов мы также включаем различные инструменты, некоторые из которых необходимы уже много лет, а другие являются более новыми и вносят инновации в сложную задачу создания уникальной цветовой схемы.
Охладители
Coolors — это интуитивно понятное приложение, которое позволяет нам простым способом создавать цветовые комбинации, обмениваться палитрами и даже экспортировать их в различные форматы, такие как SVG, PDF или SCSS.
http://coolors.coСтили меня
Stylify me предоставляет нам основы руководства по стилю сайта, включая цвета, шрифты, размеры и интервалы.
http://stylifyme.comAdobe Color CC
Классический инструмент для создания цветовых схем с помощью цветового круга или просмотра тысяч цветовых комбинаций от сообщества Kuler.
https://color.adobe.comПалетон
Инструмент дизайнера для создания сочетаний цветов, которые хорошо сочетаются друг с другом.
http://paletton.com/Цвет-Шестигранник
Color-hex — интересный инструмент, который помогает нам выбирать монохромные цвета, триадные цвета, аналогичные цвета или оттенки. Это позволяет нам визуализировать нашу палитру в различных цветовых моделях, таких как RGB, HSL, HSV и CMYK.
