Введение в теорию цвета и цветовые палитр

Что такое теория цвета?

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

Базовые основы теории цвета были заложены Исааком Ньютоном в 1666 году, и они по-прежнему остаются актуальными. В основном цветовом круге есть три группы цветов: первичные, вторичные и третичные.

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

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

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

Аддитивные и субтрактивные цветовые модели

Аддитивная цветовая модель (RGB)

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

Субтрактивная цветовая модель (CMYK)

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

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

Одноцветный

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

Аналогичный

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

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

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

Сплит-комплементарность

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

Триадический

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

Тетрадный

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

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

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

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

Выбирайте цвета с умом

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

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

Не экономьте на контрасте

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

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

Придерживайтесь соглашений пользовательского интерфейса

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

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

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

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

Лучшие инструменты для выбора цветовой палитры

Adobe Color

Будучи ресурсом «хлеба с маслом» для всех цифровых креативщиков, Adobe Color предлагает практически все цветовые палитры. По сравнению с другими генераторами цветовых схем, Adobe Color намного более всеобъемлющий, поэтому не делайте его своим выбором, если вам нужно что-то быстрое и простое. Одной из ключевых функций Adobe Colors является генератор цветовой палитры, который извлекает цвета из загружаемых вами изображений.

Coolors

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