Программа подбора цветовой гаммы. Как подобрать цветовую палитру

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

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

Бонус: Много осложнений?

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





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

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

1. ГОТОВЫЕ ПАЛИТРЫ ВОКРУГ ВАС

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

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

Калли Хегстрем, дизайнер из агентства Make Media, рассказывает: «Сначала я делаю фотографии чего-то красивого. Это могут быть цветы, закат, что угодно. Таким образом я получаю готовую цветовую палитру и теперь мне лишь нужно вычленить из фото основные цвета, которые обязательно будут гармонировать между собой. Затем я могу открыть фотографию в фотошопе и с помощью пипетки сделать новую палитру. Еще проще сделать палитру с помощью такого инструмента, как Photocopa . Просто загрузите понравившееся изображение и получите готовую палитру».

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

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


2. ИСПОЛЬЗУЙТЕ ЦВЕТОВОЙ КРУГ

Художник Марк Шагал говорил: «Все цвета друзья своих соседей и любителей их противоположностей». Что он имел в виду? «Друзьями» Шагал называл оттенки, расположенные рядом на цветовом круге, например, голубой и синий. А вот «любители противоположностей» находятся напротив них на цветовом круге, то есть синий цвет будет сочетаться с различными оттенками оранжевого.

Сначала выберите базовый цвет

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

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


Канадский дизайнер Синди Кинаш из агентства Cultivated Mind говорит: «Когда используешь акварель, чтобы показать тень или глубину, можно использовать похожий цвет, только на несколько оттенков темнее». Данный способ подобрать хорошо сочетающиеся цвета один из самых лучший. Используя дружественные цвета и сочетая их с контрастными оттенками, можно добиться потрясающих результатов – нужно просто знать, как пользоваться цветовым кругом.

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

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


3. УЧИМСЯ У ДИЗАЙНЕРОВ ИНТЕРЬЕРА

Так как независимо от вида дизайна принципы работы с цветом остаются неизменными, то можно обратить внимание на то, как составляют цветовые палитры дизайнеры интерьера. Британский дизайнер Елена Дженова делится опытом: «Когда я занимаюсь дизайном интерьера, я использую правило, которое применимо и к графическому дизайну. В работе я использую доминирующий цвет, его доля составляет 60%, дружественные оттенки (30%) и 10% приходится на цветовой акцент. Если палитра кажется слишком бедной, то можно добавить несколько оттенков, которые будут «друзьями» доминирующего цвета, при этом не стоит дробить акцент, его нужно оставить таким, каким он был».

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

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


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


4.
СОХРАНЯЙТЕ УДАЧНЫЕ ПРИМЕРЫ

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

Пришло время сочетать цвета

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

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


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

Теория цвета применяется к веб-дизайну

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

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



5.
ИСПОЛЬЗУЙТЕ ВЕЕР PANTONE

Иногда такой проверенный способ подбора цветов, как цветовой круг, не помогает составить палитру. В этом случае, можно подобрать цвета как в старые добрые времена, используя веер Pantone. Порой бывает полезно отойти от монитора и сосредоточиться не на цифровом, а на физическом образце цвета. Келли Хегстрем так объясняет использование веера оттенков в своей работе: «Иногда очень хорошо иметь веер под рукой, особенно тогда, когда вы не уверены, что оттенок на мониторе будет правильно отображаться при печати. Также веер пригодится, если клиенту нужен какой-то особенный цвет – вы просто показываете ему веер и проблема решается сама собой».

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

Веб-элементы, в которых следует учитывать выбор цветов

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


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


6.
ВОЗЬМИТЕ ЦВЕТА У ПРИРОДЫ

Для определения основной цветовой палитры вашего веб-сайта вам потребуется от 4 до 5 цветов: 2 или 3 основных для вашего логотипа, а также для выделения жирного текста или фигур, дополнительного цвета для звонков на действия и третичного цвета для украшения или украшения.

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

Наши глаза привыкли к цветам, которые чаще всего встречаются в природе. Естественные цветовые палитры всегда будут смотреться удачно – ведь они нам знакомы. Дизайнер Гэри из агентства CO-OP говорит: «Цветовые комбинации бесконечны. Пейзажи, фрукты, листья, цветы – все это естественные, доступные и бесплатные источники вдохновения». Гэри работает в Южной Африке и поэтому его палитры теплые и яркие, как и природа этой страны.

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

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


7.
ИСПОЛЬЗУЙТЕ 3 ИЛИ 4 ЦВЕТА

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

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

Элементы дизайна в картинках

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


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

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

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

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


8.
ЦВЕТОВАЯ ПАЛИТРА ЗАВИСИТ ОТ ТЕМЫ

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


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


9.
ИСПОЛЬЗУЙТЕ PINTEREST ДЛЯ ПОИСКА ТЕМАТИЧЕСКИХ ПАЛИТР

На сайте Pinterest можно найти большое количество цветовых палитр, созданных дизайнерами со всего мира. Ян Барнард, создатель компании Vintage Design Co, рассказывает, как он использует Pinterest: «Если бы я работал над созданием плаката о пляжном отдыхе, то я бы ввел в поиск на сайте запрос «летние цветовые палитры» и выбрал бы подходящий вариант».



10.
ИСПОЛЬЗУЙТЕ СПЕЦИАЛЬНЫЕ САЙТЫ

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


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

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

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

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

Цветовая модель RGB
Наиболее распространена в веб-дизайне. Аббревиатура RGB означает названия трех цветов: Red (красный), Green (зеленый), Blue (синий). Его исходным цветом является черный (экран монитора). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать белый цвет. В HTML документах цвета задаются символами от 00 до FF в шестнадцатиричном коде перед которыми ставится символ #.


Цветовая модель CMYK
Эта модель характерна для полиграфии и печати. Аббревиатура CMYK означает названия четырех цветов: Cyan (голубой), Magenta (пурпурный), Yellow (желтый), Key (черный). Его исходным цветом является белый (лист бумаги). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать черный цвет.


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

Создаем палитру цветов
Как правило, дизайнеры пользуются традиционным цветовым кругом для определения цветовой палитры для сайта. Цветовой круг из 12 цветов был изобретен Исааком Ньютоном еще в 1666 году. Существует ряд цветовых комбинаций, выбираемых с помощью круга, которые практически всегда смотрятся гармонично. Рассмотрим подробнее некоторые из них.


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


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




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


Так на приведенных ниже примерах третий и четвертый — это основные контрастные цвета. 1 и 2 — оттенки третьего, а 5 — оттенок четвертого.




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


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


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




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




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




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



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

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


Дополнительные цвета
После того, как вы выбрали цветовую схему, обеспечили хороший контраст между текстом и фоном, осалось лишь выбрать вспомогательные цвета. Как правило, это оттенки ваших основных цветов. Эти цвета могут быть использованы при наведении на объект, в текстовых ссылках или декоративной тени у текста. Не следует перегружать сайт большим количеством цветов, это создаст ненужный хаос и отпугнет посетителей. Оптимально это 4-6 цветов на сайте.

PS. Постовой. А вы знаете, что два два человека: Мария aka Jakkonda и Олег S9 из Санкт-Петербурга ведут очаровательный Blog812 о Дизайне и Креативе . Авторы публикуют иллюстрации, фотографии, подборки уроков, вордпресс советы. Блог находится в стадии развития. Дружеская поддержка приветствуется.