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

Ребята, мы вкладываем душу в сайт. Cпасибо за то,
что открываете эту красоту. Спасибо за вдохновение и мурашки.
Присоединяйтесь к нам в Facebook и ВКонтакте

Схема № 1. Комплементарное сочетание

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

Схема № 2. Триада - сочетание 3 цветов

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

Схема № 3. Аналогичное сочетание

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

Схема № 4. Раздельно-комплементарное сочетание

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

Схема № 5. Тетрада - сочетание 4 цветов

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

Схема № 6. Квадрат

Сочетания отдельных цветов

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

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

1. Использовать известную гамму

На сайте brandcolors.net собрано более 500 сочетаний цветов известных брендов. Яндекс, Google, Burger King используют одну палитру во всех своих продуктах. Эти бренды и их цвета знакомы и любимы многими. Наберите название в строке поиска или полистайте страницу, нажмите на нужный бренд и цвет: его код скопируется в буфер обмена.

2. Выбрать готовую профессиональную палитру

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

Кроме этого, сервис содержит готовую подборку из 24 цветов плоского дизайна. Нажмите слева под названием «Flat Colours» и берите код понравившегося оттенка.

3. Определить палитру цветов понравившейся фотографии или картинки

Этот способ чуть сложнее. Но и эффектнее.

• На сайте coolors.co в верхней панели слева найдите значок фотоаппарата, нажмите на него. Откроется окно загрузки изображения.
• Можно выбрать фото или картинку с понравившейся цветовой гаммой с компьютера или скопировать ссылку в пустую графу.
• Сервис определит сочетание цветов (внизу под загруженной картинкой).
• Изменять отдельные цвета этой палитры можно, отмечая их и выбирая точку на фото, с которой нужно взять цвет.
• Кнопка «Collage» сохраняет получившуюся палитру с кодами цветов на компьютере.
• Кнопка «Auto» генерирует новые сочетания на основе того же фото.
• Нажмите «Ок» и перейдете на главную страницу сайта для дальнейшей работы с палитрой.

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

4. Создать свою цветовую гамму онлайн

Загрузив фото на тот же сайт coolors.co , можно не только определить код цвета, но и создать собственные сочетания. Для этого нажмите пробел - сервис автоматически создает сочетание из 5-ти цветов.

На каждом цвете 4 значка-кнопки :

• Alternative shades - Оттенки цвета (темнее и светлее),
• Drag (Передвинуть цвет вправо или влево по палитре),
• Adjust (Настроить тон, насыщенность, яркость и др.),
• Lock (зафиксировать цвет).

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

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

Kuler

Adobe Kuler содержит большую библиотеку готовых цветовых схем. Вы можете просмотреть схему онлайн и загрузить ее для использования в продуктах серии Adobe Creative Suite.

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

ColoRotate имеет библиотеку готовых цветовых схем. Также вы можете создать свою собственную схему с помощью уникального 3D инструмента. Цветовую схему можно использовать напрямую в Photoshop и Fireworks с помощью плагина ColoRotate .

Color Scheme Designer позволяет выбрать тип цветовой схемы (моно, комплиментарную, триада, тетрада, аналоговая). Затем можно будет настроить цвета и посмотреть действие схемы на примере.

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

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

Color Spire

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

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

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

Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь.

С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.

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

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

Для этого надо нажать кнопку в левом верхнем меню «Смотреть». И перед вами откроется галерея всевозможных цветовых сочетаний.

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

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

Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic:)

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

На этот сайт нужно загрузить картинку со своего компьютера.

Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».

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

Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.

И напоследок снова user interface. Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.

Вот такие инструменты есть у меня в закладках.

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

Нужен сайт с правильными цветами? , сделаем:)

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

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

Что это такое?

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

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

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

Устройство цветового круга

Купить

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

Рекомендуем так же ознакомиться с онлайн-сервисом по подбору цвета в одежде.

Круг для подбора цветовых комбинаций

Предшественником данного устройства в его современном виде является цветовое кольцо Иттена (смотрите рисунок ниже).

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

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

Рассмотрим этот момент немного подробнее..

Почему основных цветов двенадцать?

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

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

Гид по смешению красок

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

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

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

Шкала насыщенности

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

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

Чтобы понять как это делается практически, посмотрите это видео:

Схемы цветовых сочетаний

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

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

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

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

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