Как подобрать цвета: по шагам

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

Почему важно правильно выбрать цвета?

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

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

Итак, если вы веб-дизайнер, ваша задача — донести до заказчика следующие мысли:

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

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

3. Каждый цвет вызывает определенную эмоциональную реакцию. Ярко-красный — энергию, силу, страсть. Бледно-розовый — нежность, мягкость. Фиолетово-черный наводит на мистические, загадочные ассоциации.

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

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

6. Если у клиента уже есть фирменный стиль — отлично. Тогда сайт тоже должен быть выдержан в корпоративных цветах.

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

Выбираем цветовую гамму: пошаговая инструкция

Шаг 1. Выбираем основной цвет

Анализируем целевую аудиторию сайта. Составляем ее портрет. Лучше всего, если это будет рисованный персонаж: например, женщина по имени Ольга, 25 лет. Высшее образование. Проживает в крупном российском городе. Ожидает или планирует малыша. Готова тратить на покупки 10 тысяч рублей в месяц.

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

Возьмем другой пример: сайт по продаже спортивных товаров.

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

Скорее всего, такой человек любит скорость, драйв, адреналин. Можно сделать ставку на основной красный или зеленый цвет.

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

Где будет использоваться основной цвет?

Доминирующий цвет — не обязательно фон главного экрана.

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

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

Шаг 2. Выбираем акцентные цвета

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

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

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

Где используются акцентные цвета?

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

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

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

Adobe Color CC

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

Color Safe

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

Check my Colours

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

Paletton

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

Adobe Kuler

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

The Color App

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

Contrast-A

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

Color Hunter

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

ColorZilla

Это даже не сервис, а плагин для Chrome и Firefox. С его помощью можно прямо в браузере решить разнообразные задачи по подбору цвета: например, определить значения цветов, отличия между ними, создать нужную цветовую гамму. А еще можно выбрать используемые цвета на странице, которая открыта в браузере.

Colorotate

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

ColorScheme

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

Чем еще хорош ресурс — здесь много полезных материалов для веб-дизайнера по выбору цвета. Можно существенно повысить уровень знаний!

Colourcode

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

Palettr

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

Material Design Palette

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

Что такое цветовой круг Иттена и как дизайнеры подбирают цвета с его помощью

 vlada_maestro / shutterstock

Круг Иттена — это схема из 12 цветов. Все оттенки во внешнем круге получены из трёх цветов, расположенных в центре.

Так выглядит эта схема

Давайте разберёмся, из чего состоит круг Иттена и для чего он нужен художникам и дизайнерам.

Дарья Тамилина

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

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

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

Жёлтый с синим при смешении дают зелёный, жёлтый с красным — оранжевый, а синий с красным — фиолетовый.

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

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

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

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

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

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

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

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

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

1. Если провести через центр круга прямую линию, получится комплементарное сочетание — оно максимально контрастное.

Контрастные цвета, которые соединяет прямая линия на круге, называются дополнительными

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

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

Контрастная триада получается при наложении равнобедренного треугольника на круг

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

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

Это сочетание смотрится более пёстрым, чем контрастная триада

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

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

Вот пример одного из таких сочетаний

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

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

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

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

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

Такая схема даёт много вариантов сочетаний

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

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

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

Так будут размещаться эти цветовые оттенки на схеме

А уж какой именно оттенок бирюзового и красно-оранжевого выбрать — это работа дизайнера. Кстати, есть ещё два параметра: насыщенность и яркость. Цвет может быть бледным или сочным, тёмным или светлым. Например, красный бывает совсем ненасыщенным, то есть розовым. Или очень тёмным, бордовым. Это тоже влияет на восприятие картинки.

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

В теории Иттена есть много интересного и кроме цветового круга: как работать с цветовым воздействием и субъективными цветами, какие бывают контрасты и как, например, связаны форма и цвет. Читайте об этом в нашем обзоре книги «Искусство цвета».

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

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

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

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

Хотите поупражняться в колористике под руководством опытных преподавателей? Записывайтесь на наш курс графического дизайна.

Как подобрать цвета, которые идут именно вам: безошибочный способ — BurdaStyle.ru

Pantone

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

Ваша уникальная палитра

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

Далее вам понадобится любая программа (например, Photoshop), приложение на смартфон или онлайн-сервис, которые содержат инструмент под названием «Пипетка» — он позволяет взять образец цвета.

Тут необходимо небольшое техническое пояснение: одна из ключевых цветовых моделей, которые используются сегодня для создания цветных изображений, называется RGB (Red, Green, Blue).

Инструмент «Пипетка» не просто выделяет конкретный цвет, но и показывает его уникальный RGB-код.

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

Далее мы будем использовать официальный и бесплатный онлайн-сервис Adobe Color CC.

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

Рассмотрим на конкретном примере: допустим, что мы взяли образец цвета волос и его RGB-код — #D1B38C. Указываем этот код в поле основного цвета (на картинке поле отмечено стрелочкой):

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

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

Сортируем и доводим до совершенства

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

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

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

Также можно убрать цвета, которые вы просто не любите.

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

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

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

seamwork

Крутая шпаргалка по сочетанию цветов

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

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

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

Сочетание от 2 до 5 цветов, расположенных рядом друг с другом на цветовом круге (в идеале — 2—3 цвета). Впечатление: спокойное, располагающее. Пример сочетания аналогичных приглушенных цветов: желто-оранжевый, желтый, желто-зеленый, зеленый, сине-зеленый.

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

Цветовая схема, где один цвет — основной, два — дополняющие, а еще один выделяет акценты. Пример: сине-зеленый, сине-фиолетовый, красно-оранжевый, желто-оранжевый.

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

• Белый: сочетается со всем. Наилучшее сочетание с синим, красным и черным.
• Бежевый: с голубым, коричневым, изумрудным, черным, красным, белым.
• Серый: с цветом фуксии, красным, фиолетовым, розовым, синим.
• Розовый: с коричневым, белым, цветом зеленой мяты, оливковым, серым, бирюзовым, нежно-голубым.
• Фуксия (темно-розовый): с серым, желто-коричневым, цветом лайма, зеленой мяты, коричневым.
• Красный: с желтым, белым, бурым, зеленым, синим и черным.
• Томатно-красный: голубой, цвет зеленой мяты, песчаный, сливочно-белый, серый.
• Вишнево-красный: лазурный, серый, светло-оранжевый, песчаный, бледно-желтый, бежевый.
• Малиново-красный: белый, черный, цвет дамасской розы.
• Коричневый: ярко-голубой, кремовый, розовый, палевый, зеленый, бежевый.
• Светло-коричневый: бледно-желтый, кремово-белый, синий, зеленый, пурпурный, красный.
• Темно-коричневый: лимонно-желтый, голубой, цвет зеленой мяты, пурпурно-розовый, цветом лайма.
• Рыжевато-коричневый: розовый, темно-коричневый, синий, зеленый, пурпурный.
• Оранжевый: голубой, синий, лиловый, фиолетовый, белый, черный.
• Светло-оранжевый: серый, коричневый, оливковый.
• Темно-оранжевый: бледно-желтый, оливковый, коричневый, вишневый.
• Желтый: синий, лиловый, светло-голубой, фиолетовый, серый, черный.
• Лимонно-желтый: вишнево-красный, коричневый, синий, серый.
• Бледно-желтый: цвет фуксии, серый, коричневый, оттенки красного, желтовато-коричневый, синий, пурпурный.
• Золотисто-желтый: серый, коричневый, лазурный, красный, черный.
• Оливковый: апельсиновый, светло-коричневый, коричневый.
• Зеленый: золотисто-коричневый, оранжевый, салатный, желтый, коричневый, серый, кремовый, черный, сливочно-белый.
• Салатный цвет: коричневый, желтовато-коричневый, палевый, серый, темно-синий, красный, серый.
• Бирюзовый: цвет фуксии, вишнево-красный, желтый, коричневый, кремовый, темно-фиолетовый.
• Электрик красив в сочетании с золотисто-желтым, коричневым, светло-коричневым, серым или серебряным.
• Голубой: красный, серый, коричневый, оранжевый, розовый, белый, желтый.
• Темно-синий: светло-лиловый, голубой, желтовато-зеленый, коричневый, серый, бледно-желтый, оранжевый, зеленый, красный, белый.
• Лиловый: оранжевый, розовый, темно-фиолетовый, оливковый, серый, желтый, белый.
• Темно-фиолетовый: золотисто-коричневый, бледно-желтый, серый, бирюзовый, цвет зеленой мяты, светло-оранжевый.
• Черный универсален, элегантен, смотрится во всех сочетаниях, лучше всего с оранжевым, розовым, салатным, белым, красным, сиреневатым или желтым.

По материалам decor-design

Как выбрать цветовую палитру за 3 простых шага — Дизайн на vc.ru

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

{«id»:127515}

Какими бы не были цвета, им подвластно привлекать наше внимание или же отталкивать его.

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

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

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

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

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

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

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

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

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

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

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

Используйте цвета в пропорции 60% + 30% + 10% — вы никогда не ошибётесь. 60% принадлежит вашему доминирующему оттенку, 30% — второстепенному и 10% — акцентам. Всегда лучше использовать это правило, чтобы держать вещи визуально убедительными и сбалансированными.

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

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

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

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

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

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

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

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

Оставайтесь любопытными и продолжайте творить вместе с нами!

{«contentId»:127515,»count»:0,»isReposted»:false}

{«id»:127515}

· Инструмент для подбора цветов и генерации цветовых схем ·

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

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

Также монохроматические вариации сделаны для каждого цвета в других схемах.

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

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

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

Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.

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

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

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

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

Модель акцентированной аналогии. Это аналогичная модель с добавлением дополнительного (контрастного) цвета.

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

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

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

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

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

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

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

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

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

Значение оттенка основного цвета. Кликните для ввода числового значения.

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

Значение RGB основного цвета. Кликните для ввода числового значения.

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

Значения RGB основного цвета.

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

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

Контрастность цветовой схемы. Перетаскивайте ползунок по квадрату для регулировки контрастности вариантов цвета в схеме (вверх/вниз для темного варианта, влево/вправо для светлого варианта).

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

Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.

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

Схема палитры. Представлены четыре основных цвета, для легкого составления впечатления о схеме.

URL адрес цветовой схемы. Для каждой схемы существует уникальный ID. Вы можете сохранить эту ссылку в закладки, и вернуться к редактированию своей цветовой схемы в любой момент времени.

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

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

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

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

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

Рандомизация. Служит для создания случайной палитры согласно настройкам рандомизации.

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

Подбор цветовой гаммы за 7 шагов

Succinct — обрезание текста

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

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

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

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

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

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

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

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

ПОГРУЖЕНИЕ В КНИЖНУЮ ИЛЛЮСТРАЦИЮ И СОЗДАНИЕ СОБСТВЕННОГО СТИЛЯ

Александра Балашова, автор курса

«Как выделить главное в сюжете? Как усилить и акцентировать важное, например, характер героя? Какие приемы и техники использовать?

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

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

• Без проверки
• Доступ на 3 месяца

• Доступ к основным видеоурокам
• Длительность курса — 1,5 месяца
• Проверка заданий педагогом
• Чат учеников

• Бонусные уроки
• 30 дней дополнительного доступа к видеоурокам
• Приоритетная проверка заданий
• Персональный разбор работ педагогом после завершения курса