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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Behance

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

Dribbble Colors

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

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

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

Designspiration

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

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

Tineye Multicolr

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

Colorzilla

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

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

Shutterstock Spectrum

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

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

W3Schools

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

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

Material Design Color Tool

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

Coolors

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

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

Adobe Color CC

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

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

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

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

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

Paletton

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

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

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

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

WebAIM Color Contrast Checker

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

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

Coolors

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

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

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

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

NoCoffee Vision Simulator для Chrome

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

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

Заключение

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

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

Удивительные свойства цвета

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

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

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

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

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

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

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

Терминология

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

• цветовой тон - синоним цвета и традиционно относится к одному из 12 цветов;
• яркость: степень удаленности цветового тона от черного цвета;
• светлота: близость тона к белому цвету;
• насыщенность - интенсивность или чистота цвета (чем ближе оттенок приближается к серому, тем менее он насыщен).

Лучшие сочетания цветов

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

1. Монохромная схема: использование различной яркости, светлоты или насыщенности тонов одного цвета в диапазоне от светлого до темного. Пример удачного монохромного сочетания - красный с черным и белым. Эта схема обеспечивает тонкий и консервативный дизайн. Синий с белым - классическая комбинация китайского фарфора IX в. и французского текстиля XVIII в.

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

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

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

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

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

Вдохновение

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

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

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

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

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

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

Красный

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

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

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

Оранжевый

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

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

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

Желтый

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

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

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

Зеленый

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

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

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

Голубой

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

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

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

Фиолетовый

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

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

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

Черный

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

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

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

Белый

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

Альтернативные значения: в Китае белый - цвет траура. Во многих культурах он обозначает мир - белый флаг является универсальным символом перемирия или капитуляции.

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

Цвет в дизайне

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

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

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

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

и брендинге

Узнаваемость бренда сильно зависит от цвета. Достаточно подумать о «Кока-Коле», «Фейсбуке» или «Старбаксе», и будет несложно вспомнить тона, с которыми эти бренды ассоциируются.

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

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

RGB против CMYK

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

По этой причине им необходим инструмент, обеспечивающий стабильный цвет при работе с обеими системами - например, при разработке логотипа для веб-сайта и его печати на визитке. Одной из таких систем является Pantone Matching System (PMS). В ней тона могут быть сопоставлены для веб-сайтов и печати (а также для различных типов печатных поверхностей), чтобы обеспечить одинаковый вид.

Цвет: понять, исследовать и любить его!

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

14.5K

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

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

01. Adobe Colour CC

Компания Adobe переименовала свой проект Kuler в Colour

Вы можете быть знакомы с этим инструментом по его прежнему названию — Adobe Kuler . Однако совсем недавно компания Adobe переименовала одно из своих популярных веб-приложений в Adobe Colour CC .

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

02. Mudcube Colour Sphere

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

Mudcube Colour Sphere – очень удобный миниатюрный ресурс для дизайнеров, который не только предлагает hex-коды выбранных цветов, но и позволяет создавать цветовые схемы для собственных проектов. Также стоит отметить, что в Mudcube имеется собственная галерея готовых ресурсов, которые также можно использовать.

03. Check my Colours

Check my Colours разработан специально для оценки и подборки комбинации фона и основного цвета для всех DOM-элементов . А также для того, чтобы выяснить, достаточно ли элементы гармоничны между собой. Все тесты основаны на алгоритмах, рекомендованных World Wide Web Consortium (W3C ).

04. The Color App

Приложение поможет узнать RGB, HEX, а также HSLA-значения выбранных цветов

iOS-инструмент The Color App позволит легко и просто определять цвета при помощи большой цветовой палитры. Он позволяет узнать RGB , HEX и HSLA-значения цветов, а также создавать собственные цветовые схемы для сайта.

05. Color Hunter

Color Hunter формирует цветовую схему на основе выбранного изображения

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

06. TinEye

Если вам нужно получить конкретный цвет, просто введите HEX-значение в URL

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

07. Color

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

08. SpyColor.com

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

09. Designspiration

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

10. ColorExplorer

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

11. Hex Color Scheme Generator

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

12. COLOURlovers

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

13. Color Scheme Designer

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

14. COPASO

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

15. Colourmod

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

16. ColorZilla

ColorZilla доступен как для Chrome, так и для Firefox

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

17. Colormunki

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

18. colr.org

Colr.org позволяет установить диапазон цветов любого изображения

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

19. ColourGrab

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

20. ColorBlender

ColorBlender генерирует палитру из пяти сочетающихся цветов

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

21. GrayBit

GrayBit позволяет анализировать сайты, чтобы понять, как бы они выглядели в градации серого

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

22. COLRD

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