Сочетание цветов в сайте: 50 идей от лучших дизайнеров

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

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

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

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

Зависимость цвета сайта и его стиля от ЦА

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

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

Цветовая гамма для сайта: как выбрать?

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

Принцип выбора цветовой палитры в соответствии с ЦА

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

• Для сайтов на детскую тематику лучшие цвета для сайта — яркие, контрастные и позитивные;
• Для ресурсов, где ЦА — девушки и женщины — нежные, светлые;
• Для сайтов, где целевая аудитория — мужчины — темные или нейтральные.

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

Сочетание цветов для сайта

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

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

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

Цветовые контрасты

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

Создавать контрасты цветов можно несколькими способами.

Цветовые тоны

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

Светлота тона

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

Температура тона

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

Интенсивность цвета

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

Цветовое распространение

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

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

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

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

Красный

Эмоции: страсть, любовь или опасение, важность.

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

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

Оранжевый

Эмоции: позитив, дружелюбие, движение, энергия, молодость.

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

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

Желтый

Эмоции: радость, счастье, энтузиазм.

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

Зеленый

Эмоции: спокойствие, благополучие, рост, стабильность.

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

Синий

Эмоции: спокойствие, открытость, безопасность.

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

Фиолетовый

Эмоции: богатство, помпезность, роскошь или тайна, мистика.

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

Темные цвета на сайте навевают романтику и таинственность.

Белый

Эмоции: добро, чистота, доступность.

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

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

Черный

Эмоции: изысканность, власть.

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

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

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

Выбирая цветовую палитру для своего сайта, подбирайте каждый цвет поэтапно:

1. Для начала следует определить основной цвет. Этот цвет, как правило, используется в большей мере, им могут выделяться основные заголовки или важная информация;
2. Выбираем вторичный цвет — цвет, которым будет выделяться второстепенная по важности информация;
3. Акцентирующий цвет — самый важный инструмент для привлечения внимания посетителя. Он должен быть контрастным, выделяющемся и на основном, и на фоновом цвете;
4. Фоновый — цвет, который преобладает на сайте, заполняя свободное пространство. Должен взаимодействовать со всеми выбранными оттенками, не привлекать на себя внимание.

Рассмотрим на примере использование всех цветов

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

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

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

Пример 1

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

Пример 2

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

Пример 3

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

Пример 4

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

Пример 5

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

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

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

Colorscheme

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

In Color Balance

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

Design Palette

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

Paletton

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

Какой должна быть палитра цветов для сайта?

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

Понравилась статья? Ставьте лайки и подписывайтесь на наш блог!

Выбор цвета при создании дизайна сайта / WAYUP

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

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

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

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

Что нужно учесть при выборе цвета?

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

1. Фирменный стиль. Если вы создаете сайт для продукта, который на рынке появился не вчера, у него уже есть своя аудитория, своё цветовое оформление, то это нужно обязательно учесть в дизайне сайта. Нужно использовать те цвета, с которыми у людей уже ассоциируется этот продукт. При необходимости для лучшего сочетания цветов можно поиграть с оттенками. Но не теряйте главную идею.
2. Тематика сайта. Есть темы, в которых определенные цвета уже стали классикой. Креатив – это хорошо, но не стоит полностью ломать устоявшиеся ассоциации. Например, на сайте о здоровом питании не может не быть зелёного цвета. Также как на сайте о SUP-прогулках нельзя обойтись без синего и многообразия его оттенков.
3. Целевая аудитория. Её должны знать все, в том числе и дизайнер.  Потому что выбор цвета во многом зависит от пола, возраста и интересов аудитории.

Психология цвета

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

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

Синий цвет

Этот цвет ассоциируется с такими чувствами как доверие, спокойствие, безопасность, лояльность. Он обладает выраженным успокаивающим эффектом. Синий цвет олицетворяет свободу и силу. И подтверждением этому служат примеры использования синего цвета такими крупными компаниями, как Facebook, Ford, Nivea, Visa, Samsung и многие другие.

Не стоит использовать этот цвет в оформлении сайтов, связанных с правильным питанием. Синий цвет –  неестественный для природы.

Красный цвет

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

Самые яркие представители дизайна с использованием этого цвета – CocaCola, McDonald’s, Lay’s, Lego, YouTube.

Красный – очень противоречивый. Именно поэтому не все дизайнеры спешат использовать его при создании дизайна сайтов. 

Желтый цвет

Ещё один сложный, неоднозначный цвет.

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

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

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

Оранжевый цвет

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

Но опять же важно правильное сочетание и позиционирование этого цвета.

Зелёный цвет

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

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

Фиолетовый цвет

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

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

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

Чёрный цвет

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

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

Белый цвет

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

Это цвет, не имеющих никаких противоречий. Он символизирует совершенство.

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

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

Вся теория сочетания цветов начинается с цветового круга Ньютона. Приёмы сочетания, которые использовал Ньютон не были безупречными, но сама идея была взята за основу.

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

Круг разделен на 12 секторов, в каждом из которых представлено несколько оттенков цвета от светлого в центре круга к тёмному.

Для выбора правильного сочетания существует несколько схем:

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

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

• Аналогичное сочетание. Включает в себя от 2 до 5 цветов, которые находятся рядом друг с другом на круге.

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

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

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

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

• colorscheme.ru
• color.adobe.com
• paletton.com
• degraeve.com
• palettegenerator.com
• palettable.io
• flatcolors.net
• materialpalette.com
• getuicolors.com

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

Подбор цвета онлайн: 15 генераторов сочетания цветов

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

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

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

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

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

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

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

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

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

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

Цветовая гамма сайта: рекомендации по подбору

Андрей Батурин, 25 октября, 2018

Андрей Батурин

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

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

Правила подбора

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

Гармоничные комбинации рождаются из:

• Триад — 3 цветов, которые в круге образуют треугольник. Классическая триада — когда каждый элемент тройки удален от другого на равное расстояние. Один цвет главенствует, два других дополняют его. Еще есть аналоговые триады — сочетания оттенков, лежащих рядом друг с другом на цветовом круге.
• Тетрад — соответственно, 4 цвета, образующих прямоугольник. Сложная схема, при которой 1 цвет — главный, 2 — дополнительных, а еще один — подчеркивающий акценты. Все 4 цвета нельзя использовать как основные: появится дисбаланс, дизайн будет, что называется, резать глаз.
• Контрастов, то есть сочетаний 2 цветов, расположенных в круге противоположно.

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

Чтобы быстрее сориентироваться в подборе цвета, надо усвоить еще несколько несложных правил:

• Гармонирующими являются тона, которые близки по спектру. Например, рядом с красным в круге располагаются розовый, оранжевый.
• Комплементарные либо дополнительные оттенки — пара, расположенная в круге напротив. Это, допустим, синий с желтым, зеленый с красный. Их нельзя использовать на равных: один – всегда основной, другой — дополнительный. Степень контраста значительна, и такие сочетания лучше применять, когда какую-то информацию необходимо подчеркнуть. К примеру, синий — фон, желтый — цвет акцента.
• Главные элементы спектра в живописи — красный, желтый, синий (RYB). И их нельзя получить путем смешивания прочих оттенков. Но в цифровом формате эта схема не работает. В веб-дизайне используют цветовую модель RGB — красный, зеленый, синий.

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

• Adobe Color CC. Есть русскоязычная версия и несколько режимов подбора, много палитр.
• ColorScheme.Ru — русскоязычный ресурс, простой и понятный даже новичкам.
• Paletton.com — тоже легкий в обращении, но на английском.

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

Значение оттенков

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

Вспомним кратко, как воспринимаются цвета в дизайне сайта:

• Черный: сила, лаконичность, власть.
• Белый: свежесть, ясность, чистота.
• Бежевый: скромность, нейтралитет, нежность.
• Оттенок слоновой кости: стиль, элегантность, комфорт.
• Серый: строгость, профессионализм, контроль.
• Фиолетовый: элита, роскошь, романтика.
• Синий: спокойствие, стабильность, безопасность.
• Зеленый: рост, развитие, естественность.
• Оранжевый: молодость, дружба, бодрость.
• Желтый: веселье, энтузиазм, энергия.
• Красный: страсть, действие, активность.

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

Вкусы у всех разные, на восприятие влияет эмоциональный фон, самочувствие, настроение, пользовательский опыт, погода и еще 1 000 факторов. На всех не угодишь! Ученые давно доказали, что мужское и женское восприятие цвета весьма отличаются друг от друга. У дальтонизма есть 3 разновидности — протанопия, дейтеранопия, тританопия, страдают им преимущественно мужчины — около 7-8%.

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

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

CEO WebEvolution — Андрей Батурин

• 14+ лет практики
• 304 сайтов разработано под личным руководством

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

Оставьте контакты, и я бесплатно вас проконсультирую!

Оставить телефон Оставьте ваш номер

Цвет и тема сайта

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

Иногда она задает тон и диктует свои условия:

• Представим, что сайт посвящен ландшафтному дизайну, благоустройству садов, продаже комнатных растений. В качестве основного цвета тут явно напрашивается зеленый, прочно ассоциирующийся с миром флоры!
• Если содержание сайта каким-то образом связано с водой (морскими путешествиями, аквариумами, доставкой питьевой воды), фаворитом будет синий.
• Сайты на разнообразные женские тематики часто используют розовый. И это обосновано, ведь он символизирует женственность, нежность.
• Желтый цвет близок к золотому. Присмотритесь, и вы поймете, что организации, связанные с финансами, — банки, страховые компании, МФК — часто выбирают именно его.

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

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

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

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

Цвет и вид сайта

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

К примеру:

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

Реализация цвета

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

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

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

Текст

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

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

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

Фон

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

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

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

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

Закажите дизайн в WebEvolution и будьте уверены в его качестве!

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

Другие статьи по тегам

сайты дизайн сайта разработка сайтов

на эту тему

Mobile first: тонкости разработки Веб-дизайн 2018 года: тенденции и тренды Когда пора заказать редизайн сайта? ТОП-10 классических стилей в веб-дизайне UX дизайн и его роль в веб-дизайне Разработка официального сайта компании Конверсия и методы ее повышения Как правильно подготовить сайт к продвижению 8 причин потерь позиций сайта в поисковой выдаче Интернет-магазины: как реализовать триггеры для роста продаж

25 примеров идеальных сочетаний цветов в веб-дизайне

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

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

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

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

Если вам интересно, вот несколько хороших инструментов, связанных с цветом: COLOURLovers, Kuler Adobe, Color Scheme Designer и помните, что иногда вы можете использовать Firebug, чтобы узнать, какие цвета люди используют в дизайне.Наслаждайтесь!

декодировать

Gimme Доставка

.

Шпаргалка «Ультимативные цветовые комбинации», чтобы вдохновить ваш дизайн

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

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

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

Получи Оберло сейчас. Это бесплатно.

Основы сочетания цветов

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

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

Цветовое колесо

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

Как работает цветовое колесо?

Простое цветовое колесо состоит из 12 цветовых оттенков, расположенных вокруг центральной втулки.

Цветовое колесо, состоящее из основного, вторичного и третичного цветов

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

Основные цвета, выделенные на цветовом круге

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

• Красный + Синий = Фиолетовый.
• синий + желтый = зеленый.
• Красный + Желтый = Оранжевый.

Вторичные цвета выделены на цветовом круге

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

• Красный + Оранжевый = Красно-оранжевый.
• желтый + оранжевый = желто-оранжевый.
• Желтый + Зеленый = Желто-зеленый.
• Синий + Зеленый = Сине-зеленый.
• синий + фиолетовый = сине-фиолетовый.
• Красный + Фиолетовый = Красно-фиолетовый.

Третичные цвета выделены на цветовом круге

Цветовая терминология

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

• Hue — художники и дизайнеры взаимозаменяемо используют термины «цвет» и «оттенок». В любом случае, это поможет вам, но слова «цвет» и «оттенок» на самом деле означают разные вещи. В общем, «цвет» используется для обозначения всех цветов, включая черный, белый и серый. В то время как «оттенок» относится к происхождению , цвета мы видим. Это базовый цвета, который мы видим, и всегда является одним из шести основных и дополнительных цветов на цветовом круге.
• Оттенок — «Оттенок» — это более легкая версия данного оттенка. Это оттенок, к которому добавлено , только белого. Иногда оттенок может казаться ярче, чем исходный оттенок, но это всего лишь бледная версия. Оттенок может варьироваться от оттенка, который чуть светлее, чем оригинал, до почти белого с небольшим количеством цвета в нем.
• Тень — Это противоположность «оттенка». «Оттенок» — это оттенок с добавлением только черного. Конечно, он может включать различное количество черного, и результирующий цвет может быть чуть темнее, чем исходный оттенок, или он может быть почти черным.Простой способ запомнить это — подумать о том, как трава в оттенке на дереве кажется на темнее на , чем трава на солнце.
• Тон — это очень похоже на «оттенок» и «оттенок», только вместо того, чтобы быть оттенком с добавленным белым или черным, к нему добавляется только серый. Серый цвет, добавляемый для создания «тона», должен состоять только из черного и белого, без других цветов (многие цвета, которые считаются серыми, на самом деле имеют основание, являющееся оттенком). Тонированные цвета, как правило, рассматриваются как более сложные, чем чистые оттенки.
• Warm Versus Cool — «Теплые» цвета — это те, которые напоминают или символизируют тепло, в то время как «холодные» цвета относятся к льду и более прохладным температурам. Например: красный, оранжевый, желтый и красно-фиолетовый — теплые цвета, а синий, фиолетовый, зеленый и сине-зеленый — прохладные.

Психология цвета

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

«Цвет — это сила, которая напрямую влияет на душу». ~ Василий Кандинский

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

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

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

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

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

цветовых комбинаций

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

Монохромные комбинации

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

Дополнительные комбинации

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

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

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

Примеры дополнительных цветовых комбинаций:

• красный и зеленый.
• Синий и оранжевый.
• Желтый и фиолетовый.
• Желто-зеленый и красно-фиолетовый.
• Красно-оранжевый и сине-зеленый.

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

Аналоговые комбинации

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

Примеры аналогичных комбинаций:

• Фиолетовый, синий и бирюзовый.
• Красный, фуксия и фиолетовый.
• Красный, оранжевый и желтый.
• Зеленый, синий и фиолетовый.

Дополнительные сплит комбинации

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

Примеры раздельных дополнительных цветовых схем:

• Красный, сине-зеленый и желто-зеленый.
• Синий, красно-оранжевый и желто-оранжевый.
• Желтый, сине-фиолетовый и красно-фиолетовый.
• Фиолетовый, желто-оранжевый и желто-зеленый.

Триадные Комбинации

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

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

Примеры триадных комбинаций:

• Красный, желтый и синий.
• Фиолетовый, зеленый и оранжевый.
• Сине-фиолетовый, красно-оранжевый и желто-зеленый.

Тетрадические комбинации

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

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

Примеры тетрадных цветовых схем:

• Красный, зеленый, сине-фиолетовый и желто-оранжевый.
• Желтый, фиолетовый, сине-зеленый и красно-оранжевый.

Эксперимент — это ключ

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

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

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

Наши любимые комбо

монохромный

Art by Кимберли Рашель . Цветовые палитры от Canva .

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

Art by Кимберли Рашель . Цветовые палитры от Canva .

Аналог

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

Сплит

Art by Кимберли Рашель . Цветовые палитры от Canva .

Triadic

Art by Кимберли Рашель . Цветовые палитры от Canva .

Тетрадик

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

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

Получи Оберло сейчас. Это бесплатно.

Хотите узнать больше?

У вас есть какие-нибудь яркие советы или хитрости? Мы хотели бы услышать их. Дайте нам знать об этом в комментариях!

Эшли Винчестер

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

,

Paletton — Дизайнер цветовых схем

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

1. Paletton application
2. Colorpedia
3. О Палеттон
4. О Палеттон

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

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

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

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

Генератор цветовой палитры — Colllor

Цветовая палитра идей

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

Красный

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

Желтый

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

Оранжевый

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

Blue

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

,