Как подобрать цветовую палитру? Лучшие сочетания цветов. Цветовой круг

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

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

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

Начнем с краткого введения в теорию цвета.

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

Подготовка

Вам необходимо вдохновение?

1.

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

Ищете готовую палитру?

2.

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

Палитра сопровождается говорящими названиями: Шторм в Уитсанди (тихоокеанский архипелаг в Коралловом море), Сумерки в Уитсанди, Остров Уитсанди

3.

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

4.

В ColoRotate вы найдете библиотеку цветовых схем, которые можно просматривать, выбирать и изменять. Сделать собственную палитру на основе найденной поможет специальный 3D инструмент (3D color tool). Цветовую схему, созданную вами, можно сразу применить в PhotoShop или Fireworks, установив ColorRotate plugin или приложение для iPad.

В соответствии с требованиями бренда

Что, если у вас уже есть картинки, логотипы или требования бренда, которым нужно соответствовать?

1.

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

2.

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

3.

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

4.

Paletton ускоряет процесс создания палитры. Нужно выбрать тип схемы: моно, составные, триадные, тетрадные, родственные, родственно-контрастные. Как только вы поменяете один цвет, остальные автоматически подстроятся.

5.

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

6.

Этот плагин для Chrome помогает гармонизировать цвета, учитывать дальтонизм и идентифицировать HEX-коды. Цветовые палитры можно сразу экспортировать в Illustrator, PhotoShop и CoIRD.com.

7.

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

8.

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

Создать свой цвет

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

1.

Это приложение для iOS помогает выбрать из нескольких цветов, которые размещаются рядом через небольшое расстояние, что намного удобнее градиентного представления, кругов и спектров. Большие цветовые сетки позволяют использовать весь экран (что особенно ценно для владельцев iPad Pro). В приложении можно создавать образцы цвета, находить RGB, HEX и HSLA значения и делать палитры из набросков.

3. Color

В Color от HailPixel не определиться с цветом нельзя. Вы точно поймете, что хотите и получите HEX-код оттенка.

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

Получить код цвета

Если вы увидели где-то цвет и хотите узнать его код и название, эти ресурсы для вас.

1.

SpyColor предоставит информацию о любом цвете, включая Hex, RGB, CMYK и другие коды, и покажет целый диапазон схем для каждого оттенка, в том числе комплементарные, сплит-комплементарные, триадные, контрастные и аналоговые.

2.

HTML Color Codes находит HEX-код для цветов на изображении. Вы выбираете картинку, открываете ее для просмотра и получаете код цвета, наведя на него курсор.

Протестировать свою палитру

Создав цветовую схему, хочется удостовериться в ее эффективности.

Check my Colours проверяет основные и фоновые цвета на соответствие требованиям контрастности для тех, чье цветовое восприятие имеет отклонения от нормы. Если вы хотите убедиться, что ваш сайт подходит для людей с дальтонизмом или получить работающие и интуитивно понятные цветовые сочетания с точки зрения UX, этот ресурс незаменим. Достаточно ввести адрес сайта, чтобы ознакомиться с отчетом по его внешнему виду.

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

Заключение

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

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

1. Kuler

Kuler от компании Adobe давно признан лучшим помощником профессионального веб-дизайнера. В отличие от конкурентов, здесь есть обширное коммьюнити и можно делиться созданными палитрами или брать чужие цветовые схемы и модифицировать под свои нужды. Для общения в сообществе нужно зарегистрироваться и получить Adobe ID. Цвета в Kuler представляются в различных форматах, включая RGB, CMYK, LAB и HSV.

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

Отдельные цвета никогда не висят в вакууме, и каждый оттенок воздействует на окружающие. Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете. Это идеальный инструмент, если нужно создать минималистский сайт с небольшим количеством цветов, которые дополняют друг друга.

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

В отличие от большинства других генераторов цветовых схем типа «цветового колеса», Colorotate показывает палитру на трёхмерном конусе. Как и Kuler, пользователи могут сохранять и редактировать свои цветовые схемы, а также просматривать палитры, сделанные другими дизайнерами. Инструмент интегрирован с популярными дизайнерскими программами Adobe Fireworks и Photoshop.

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

Как управлять вниманием пользователя на сайте? Как подбирать правильные цвета для сайта? С помощью какого приложения узнать код цвета на сайте конкурента? Разбираем сегодня в статье.

Сервисы по определению цветовой схемы

• color-hex.com — определит какие цвета стоят рядом с вашим цветом
• thestocks.im — агрегатор мокапов, видео, фотографий, иконок, шрифтов.
• Eye Dropper — расширение для Google Chrome, которое позволяет с помощью пипетки узнать код любого цвета на любой странице в интернете.
• Adobe Color CC -подберёт цветовые сочетания. Adobe Color CC поможет, когда есть картинка, и вы хотите выгрузить её основные цвета. Программа определяет палитру из 5 доминирующих цветов изображения, которую можно сохранить и использовать в презентациях. Бесплатно.
• Colorzilla -расширение для Google Chrome и Mozilla Firefox, которое включает инструменты colour picker, eye-dropper, css gradient generator и palette browser. Достаточно навести пипеткой на нужный цвет на любом сайте и скопировать код.

Подбор цвета

Загрузите картинку и сделайте из нее палетку.

• Coolors.co — ресурс с палитрами, которые можно создавать самим или заимствовать из коллекци

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

Как выбрать цвет для сайта

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

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

• Черный. Надежный, утонченный и опытный. Используется для продвижения предметов роскоши.
• Белый. Простой, спокойный и чистый.
• Красный. Уверенность, молодость и власть. Нередко используется для тотальных распродаж.
• Оранжевый. Дружелюбный, теплый и энергичный. Создает призыв к действию: регистрироваться, покупать или продавать.
• Желтый. Счастье, оптимизм и тепло. Обычно используется для привлечения внимания к витрине.
• Зеленый. Мир, рост и здоровье. В маркетинге применяется для расслабления.
• Синий. Доверие, безопасность и стабильность. Обычно используется для банков и бизнесов.
• Пурпурный/фиолетовый. Роскошный, креативный и мудрый. Обычно применяется в индустрии красоты и антивозрастных товаров.
• Розовый. Романтичный и женственный. Используется для продвижения товаров для женщин и молодых девушек.

Черный

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

Белый

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

Красный

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

Оранжевый

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

Желтый

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

Зеленый

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

Синий

Цвет доверия. Он обычно показывает надежность, успокаивает.

Пурпурный

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

Розовый

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

Коричневый

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

Влияние цвета на покупку товара

Исследование проводилось в Северной Америке.

Любимые цвета

Нелюбимые цвета

Цветовые модели

• CMYK: Cyan (синеватый), Magenta (красноватый), Yellow (желтый), и Key («ключевой» - черный). То есть эта модель состоит из трех основных цветов и черного, который позволяет создавать более темные оттенки. Используется в живописи и печати.
• RGB-модели: red, green, blue - красный, зеленый, синий. Используется в компьютерах, телевизорах и других электронных устройствах

Монохроматический

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

Аналогичные (Analogous Colors)

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

Complementary

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

Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору и . А сегодня хотим расширить тему, разместив в блоге перевод статьи 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). В ней тона могут быть сопоставлены для веб-сайтов и печати (а также для различных типов печатных поверхностей), чтобы обеспечить одинаковый вид.

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

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