Цветовой круг: как сделать крутой дизайн

цветовой круг баннер

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

output_Re4zcS

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

Что такое цветовой круг

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

output_Re4zcS

The Scientist

Как и зачем им пользоваться

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

output_Re4zcS

Цветовой круг Canva

output_Re4zcS

Цветовой круг Иттена

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

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

amy-shamblen-pJ_DCj9KswI-unsplash

Unsplash/ Amy Shamblen

paul-gilmore-mqO0Rf-PUMs-unsplash

Unsplash/ Paul Gilmore

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

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

Чтобы найти такую комбинацию:

  1. В первом окне введите HTML-код нужного цвета. Или выберите его курсором на цветовом круге.
  2. Во втором окне выберите из выпадающего снимка цветовую комбинацию Monochromatic.
  3. Двигайте точку, расположенную на внешнем ободке круга, чтобы выбрать более темные или светлые оттенки цвета.

output_Re4zcS

Аналогичные комбинации

output_Re4zcS

Картина Марка Ротко «Оранжевое, красное и желтое»

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

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

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

Чтобы найти такую комбинацию:

  1. В первом окне введите HTML-код нужного цвета. Или выберите его курсором на цветовом круге.
  2. Во втором окне выберите из выпадающего снимка цветовую комбинацию Analogous.
  3. Вы можете двигать любую точку на цветовом круге, если захотите поменять оттенок. Остальные два цвета будут соответственно меняться, и у вас появятся другие варианты аналогичной комбинации.

output_Re4zcS

Комплементарные комбинации

alessandra-caretto-cAY9X4rPG3g-unsplash

Unsplash/ Alessandra Caretto

gemma-evans-S_xVV-l8Q4I-unsplash

Unsplash/ Gemma Evans

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

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

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

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

Чтобы найти такую комбинацию:

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

output_Re4zcS

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

Триадные комбинации

output_Re4zcS

Триадная комбинация цветов в логотипе Burger King

output_Re4zcS

Пример триадного сочетания цветов в постере фильма Inherent Vice

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

Чтобы найти такую комбинацию:

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

output_Re4zcS

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

Тетрадные или четырехугольные комбинации

Screenshot 2019-10-01 at 10.24.32

Сайт креативного коворкинга Plant22 использует тетрадную схему в оформлении главной страницы

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

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

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

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

Подписывайтесь на обновления в Телеграме, Фейсбуке, ВКонтакте и Яндекс Дзене, чтобы всегда быть в курсе трендов графического дизайна и возможностей Canva, которые помогут воплотить их в жизнь!

Ваше секретное средство для потрясающих дизайнов