Это наше колесо цветов. Я понимаю, что оно выглядит немного непривычно, но это потому, что мы также будем говорить о насыщенности и оттенках цвета. Если вы имеете опыт работы в Adobe Photoshop или PaintTool SAI, тогда вам знакомо это колесо. (Точно такое же используется в SAI).
Внешнее кольцо колеса цветов – это так называемые оттенки. Квадрат, расположенный внутри, соответствует конкретному оттенку (в данном случае, розовому), а также показывает степень осветления/затемнения/насыщенности определенного цвета.
Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.
Вспомогательные цвета: Они включают остальные цвета, созданные при помощи Первичных и Вторичных цветов. Существует бесконечное множество оттенков, поэтому я не собираюсь демонстрировать их всех. Некоторые из них включают Мадженту, Сине-зеленый, Золотой, Бирюзовый... ну вы понимаете.
Теперь давайте более детально рассмотрим внутренний квадрат. Область в верхней части квадрата - самая светлая, область внизу квадрата – самая темная. Теперь будьте осторожны... Чем ближе цвет находится к правому верхнему углу, тем он будет БОЛЕЕ насыщенным. Чем ближе цвет находится к левому нижнему углу, тем он будет МЕНЕЕ насыщенным. Давайте взглянем на несколько примеров:
Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.
Это важно потому, что многие молодые художники делают эту ошибку (эй, я тоже ее делала), когда выбирают только в темной - светлой шкале, они забывают изменить насыщенность И оттенки. Изменение всех трех параметров вашей палетки делает вашу цветовую схему более интересной. Это основа - МИНИМУМ тех вещей, которые вы должны знать о теории цвета. Давайте продолжим.
Теперь поговорим о дополнительных цветах. Дополнительные цвета – это цвета, которые располагаются друг против друга на цветовом колесе. Обратите внимание на то, что цветовое колесо, которое вы видели до этого, в этом плане было не совсем правильным. Это цветовое колесо - классический вариант, знакомый многим. В большинстве программ по ряду причин цветовые колеса нестандартные... поэтому, если хотите выбрать дополнительные цвета, используйте это.
Дополнительные цвета "дополняют" друг друга - они выделяются, когда располагаются друг против друга - так как они противопоставлены друг другу. Дополнительные цвета на колесе связаны линиями.
Также учтите, что цветовое колесо показывает Первичные (большие кружочки), вторичные (средние кружочки) и вспомогательные цвета (маленькие кружочки).
Аналогичные цвета - это те цвета, которые находятся рядом друг с другом на цветовом колесе. Например, Оранжевый - Красный, Красный и Красный - Розовый в соответствии с колесом считаются аналогичными, так как это цвета одного оттенка, они очень приятны взгляду.
Цвета: Активные против Пассивных.
Теплые цвета (красные, желтые, розовые) относятся к АКТИВНЫМ. Холодные цвета (голубые, зеленые, фиолетовые) относятся к ПАССИВНЫМ. В большинстве случаев (но не всегда) свет на рисунке будет относиться к активному ряду, в то время как тени - к пассивному. Это как минимум то, чего придерживается большинство людей - но это не факт. И мы переходим к следующей теме. АТМОСФЕРА.
Атмосфера: многие художники про нее либо совсем забывают, либо не могут прийти к общему решению по данному вопросу. Вы, конечно, можете предполагать, что всё светлое - "активное", а темное - "пассивное" и даже в этом случае, ваш рисунок получится хорошим. НО вопрос не в простом принятии этого факта. У цветов есть "вес" или атмосферное качество. Например:
Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.
Поэтому, когда будете выбирать цветовую палетку, помните об атмосфере. Если ваша картина изображает влажное подземелье, то вам, возможно, понадобится больше голубых/фиолетовых/розовых/красных оттенков в палетке. Если вы изображаете поле, залитое солнечным светом, вы, возможно, выберете больше зеленых, желтых и оранжевых оттенков. Температура также влияет на палетку. Если ваша "глубокая илистая пещера" не влажная и теплая, а холодная и мокрая, то вы, скорее всего, захотите добавить светло-голубой свет вместо живого красного. Если ваше поле залито ярким светом утреннего солнца, то вы, наверняка, выберете светло-желтый свет вместо глубокого оранжевого, который обычно используется для изображения раннего вечера. Не стоит очень переживать из-за атмосферы и температуры - но нужно их учитывать при выборе цветовой схемы.
Теперь, позвольте дать вам очень полезный совет по выбору вашей цветовой палетки. НАСЫЩЕННОСТЬ - ВАШ ЛУЧШИЙ ДРУГ. Знание всех теорий цвета, существующих в мире, не поможет вам, если ваша палетка слишком насыщенная или слишком тусклая. Трюк заключается в том, чтобы использовать и насыщенные, и ненасыщенные цвета. Самый простой способ сделать это - выбрать разные уровни насыщенности для ваших света и теней.
Вот несколько примеров палеток:
Обратите внимание на то, что они придают палетке совсем другой вид. Неважно, что вы решите использовать, главное, чтобы вы применили эту цветовую палетку ко всему рисунку. Я имею в виду то, что, если свет у вас насыщенный, то тени должны быть ненасыщенными или наоборот. Не делайте так, что одна часть рисунка у вас будет выполнена в одной гамме, а другая – в противоположной, так как в итоге у вас может получиться довольно странный рисунок.
Тем не менее, это не ЕДИНСТВЕННЫЙ способ сочетания разных уровней насыщенности в одной палетке – и на самом деле, этот способ мне не очень нравится. Далее я покажу вам почему.
НО КОГДА ТЫ СОБИРАЕШЬСЯ РАССКАЗАТЬ НАМ КАК ВЫБИРАТЬ ПАЛЕТКУ?!?!?!?! Сейчас.
Предположим, я поняла и запомнила все, что было написано выше о теории цвета (это то, что вы должны сделать) и выбрала цветовую схему для всего рисунка. Хвала мне. Я выбрала множество оттенков синего, фиолетового и зеленого, также немного оранжевого цвета для выделения.. БЛА БЛА БЛА. И это был один из моих цветов:
Не забудьте, что цвет показан только по шкале насыщенности.
Самый светлый – Светлее и менее насыщенный, чем ваш "Более светлый" цвет.
Светлее- Светлее и менее насыщенный, чем ваш "Светлый" цвет.
Светлый – Светлее и БОЛЕЕ насыщенный, чем ваш базовый цвет.
Базовый цвет – Ваш Базовый цвет.
Темный – Темнее и БОЛЕЕ насыщенный, чем ваш базовый цвет.
Темнее – Темнее и менее насыщенный, чем ваш "Темный" цвет.
Самый темный – Темнее и менее насыщенный, чем ваш "Более темный" цвет.
Сейчас вы, наверное, задаетесь вопросом, почему это кажется неупорядоченным. Позвольте мне показать разницу между палетками, которые мы видели раньше и этой палеткой насыщенности.
Ладно – на будущее, никогда не используйте №3. Смотрится отвратительно. Вам, наверное, кажется, что №2 – гораздо лучше. Я с вами согласна. Но проблема в том, что если вы будете рисовать этим цветом, то рисунок у вас получится ненатуральный, неживой, как будто все сделано из пластика. В моей палетке цвета варьируются по насыщенности, что придает рисунку более естественный вид. Важный момент здесь заключается в том, что средние тона в палетке очень насыщенные, в то время как тени и блики – очень тусклые. Это также придает реалистичности.
Но мы еще не закончили. Я показала вам правильную схему расположения насыщенности в вашей цветовой палетке. Теперь давайте взглянем на оттенки.
Нажмите на картинку, чтобы посмотреть изображение в полном размере и 100% качестве.
Вы видите разницу между этими двумя палетками? Первая палетка – это палетка насыщенности, которую я показывала раньше. Вторая – это то, что случается, если вы играете с оттенками. Я окрасила цвета "света" зеленым, а тени – фиолетовым. В результате у меня получилась палетка, где тени – "холоднее", а свет – немного "теплее". Разница едва уловима, но в итоге она очень сильно влияет на палетку. Фишка состоит в том, чтобы таким же образом изменить оттенки. Давайте я вам покажу:
Как вы видите, несмотря на то, что моя палетка осталась аналогичной, я сдвинула блики в "легкую/холодную" часть спектра, а тени – в "тяжелую/холодную" часть спектра. Звучит легко? Так оно и есть. Об оттенках нужно запомнить следующее: всегда располагайте блики вблизи желтого/оранжевого, а тени – вблизи синего/фиолетового.
Я советую вам создавать большинство своих палеток в аналогичном направлении, с дополнительным цветом для выделения определенных объектов. Но, если вы вынуждены рисовать абсолютно разными цветами по всей площади рисунка (возможно, этого требует изображаемый вами персонаж), то лучший способ по сохранению целостности всей цветовой схемы заключается в использовании аналогичных оттенков для света и теней на изображении. Например, вы можете сделать все самые светлые блики теплого желтого или красного цвета, а все самые "темные" тени нарисовать глубоким синим, голубым или фиолетовым. ИЛИ, добавьте подсветку сзади или отражающий свет одного оттенка.
Позвольте показать пример:
Подсветка сзади
"Подсветка сзади" – это второй (более слабый) источник света на вашем рисунке, который объединяет ваш рисунок. В этом случае, я использовала зеленый цвет, так как ее кофта и часть фона также зеленые – это лишь связывает объекты в единое целое. Обычно этот свет находится в противоположном направлении от основного источника света. Как правило, он очень насыщенный, живой и ярко выражен лишь на границах объекта.
Отражающий свет
"Отражающий свет" – это очень тусклый свет, который перемещается на ближайшие объекты. Он может появиться где угодно, но обычно его рисуют в затененных участках. На рисунке, который вы можете увидеть выше, это свечи рядом с ней, сияние цветка в руках и оранжево-голубое свечение ее кожи.
Вот несколько примеров, с которыми вы уже знакомы:
Розовый "мячик" имеет розовую подсветку предположительно от другого источника света. Голубой "мячик" отражает фиолетовый свет, который создается расположенным рядом розовым мячиком.
Ну, вот и все пока что) Продолжайте следить за выходом новых уроков! Надеюсь, он оказался вам полезен:D
Основным инструментом для построения различных комбинаций цвета является . Он не только дает информацию о цвете: первичных, вторичных цветов; холодных, теплых оттенках, но и позволяет геометрически найти удачную пару (или триаду, тепраду и более) каждому цвету. Однако эффективное создание цветовых комбинаций не ограничивается только этим инструментом, хоть от него огромная польза. Чистые сочетания подобранные по принципу круга могут даже пугать своей несуразностью, чтобы довести их до «ума», стоит прибегнуть к понятию контрастов, а так же взять в обиход нейтральные, сложные цвета.
Создание и адаптация комбинаций цвета
Все комбинации цвета, построенные с помощью цветового круга, являются . В большинстве случаев они уже сбалансированы по , хотя резонанс по светлому-темному, яркому-бледному – отсутствует.
Основным параметром адаптации будет углубление основного цвета, добавление контраста по свету и яркости.
А так же любое сочетание можно сгладить, добавив в него нейтральный оттенок: серый или бежевый.
Сделать комбинацию более глубокой можно за счет добавления к любому из цветов его более светлый или темный оттенок или стоящий рядом в цветовом круге (подобные цвет(а)).
Монохромная комбинация цвета
Если вы используете в композиции один цвет, то его оттенки должны быть как темными, так и светлыми, это придает объем, глубину, сочность цветовой гамме.
Комбинация дополнительных цветов
Дополнительные цвета – тона, которые находятся напротив друг друга в цветовом круге. Сочетания дополнительных цветов первого и второго порядка (основные (первый порядок): красный, желтый, синий; второго порядка: оранжевый, пурпурный, зеленый) слишком кричащие, пронзительные, за счет чего кажутся вульгарными, а так же закрадываются сомнения по поводу возможность их использования. Однако такие комбинации цвета оттенков третьего порядка: красно-оранжевого, фиолетового, сине-зеленого, шартреза и. т. д., смотрятся более привлекательными за счет снижения «резкости».
Попробуем снизить интенсивность цветов первого и второго порядка: затемнить, добавить примесь других оттенков, сохраняя основной подтон. Тем самым мы получим более мягкие сочетания, которые за счет понижения навязчивости, откроют свою лучшую сторону. Если же в это сочетание еще добавить контраста по светлоте, насыщенности, то количество вариаций привлекательного сочетания увеличится в несколько раз.
Комбинация предельно удаленных пар
Такие пары так же находят с помощью цветового круга. Они менее пронзительные, чем дополнительные цвета, но, тем не менее, входят в категорию драматичных. Контраст по свету, яркости тонов для них будет более актуальным, чем для дополнительных, а так же добавление похожих и однотонных оттенков.
Добавляя в комбинацию нейтральных или однотонных (более светлых или темных) оттенков позволяет добиться контраста по светлоте, оставляя основные цвета в равной «силе» яркости и светлоте (темноте). Точнее акцент будет на основное сочетание, но баланс по яркости и контраст будет на высоте.
Комбинация подобных цветов
Подобными называют цвета стоящие рядом в цветовом круге.
Такие комбинации похожи на монохромные с одной лишь разницей, что в ней используются оттенки не одного тона, а производных этого цвета. Наличие светотени в таких комбинациях будет очень важным моментом для достижения выразительности, сбалансированности.
Близкие к похожим сочетаниям относятся теплые и холодные комбинации цветов.
О том, какие цвета теплые, а какие холодные так же можно узнать по цветовому кругу разделив его на две части: между зеленым и пурпурным. Желто-красная гамма будет относиться к теплым цветам, а зелено-сине-фиолетовая – к холодным. Подобные сочетания, не выходящие за пределы холодных и теплых цветов, будут считаться соответственно холодными и теплыми.
Контраст светлого-темного в таких комбинациях будет очень важным во избежание пресности.
Триады и более сложные комбинации
Как и сочетания дополнительных цветов, такие комбинации могут показаться с первого взгляда не привлекательными, однако, на практике в «голом» виде они тоже редко используются.
Триады и более – сложные комбинации, они имеют простор для творчества. В одном таком сочетании можно использовать практически все доступные контрасты (учитывая, что баланс теплых-холодных оттенков уже выведен).
В отличие от парных комбинаций в триадах доминантам является 1 цвет, все остальные оттенки – грамотное оформление, усиление центрального тона. Чаще всего это «пятно», значительно обрамленное другими оттенками: яркое и контрастное.
Как мы видим: основой для создания цветовых комбинаций является цветовой круг (который можно приобрести и всегда иметь с собой), но существуют и приемы сделать их лучше.
Цветовые комбинации за гранью цветового круга
Комбинации, подобранные по цветовому кругу эмоциональные и впечатляющие, однако изначальным «учителем» колористки была природа и некоторые сочетания до боли знакомые и «благополучные» для психики выбраны именно ей. Вы можете
Так, комбинация оранжевого + зеленого — цветы, цитрусовые, закатные тона, зелень. Синий (голубой) + зеленый – небо, луга, леса. Желтый + синий (голубой) – солнце, небо. Фуксия + зеленый — цветы, зелень. Фуксия (пурпур) + красный – закатные тона. Розовый + зеленый – цветы, зелень. Холодный + теплый розовый – закатная гамма. Пурпур + синий (голубой) – закат, море. Желтый + зеленый – цветы, цитрусовые, зелень.
Это сочетания ярких оттенков, которые оставили яркое впечатление в сознании человека.
Природные комбинации с коричневым цветом
Основой для мягких комбинаций природного характера – это коричневый цвет. Он является нейтральным (как более темный оттенок бежевого цвета). Коричневый цвет – разнообразный и имеет широкий спектр оттенков. Сочетания с этими оттенками очень разнообразны, но имеют общее сходство: все подобранные оттенки должны быть лишены пронзительности: сложные и тягучие. Задача таких сочетаний нести мир, спокойствие и уравновешенность в нашу жизнь.
Комбинация с черным и белым цветом
Черный и белый цвет также, как и коричневый относятся к нейтральным оттенкам и , но в отличие от предыдущего цвета сочетания с ним имеют повышенный контраст, порой весьма далекий от природного.
И черный, и белый цвет являются холодными оттенками. Они оба подчеркивают основные цвета (их можно добавлять к любой гамме из цветового круга), но эффект от их присутствия разный. Черный концентрирует цвет, сужая пространство, белый же наоборот – расширяет, засветляя рядом стоящие оттенки.
Задача выбора цветовой схемы для сайта может показаться невыполнимой, особенно, если вы не разбираетесь и не очень хорошо ориентируетесь в цветовых сочетаниях:
Если все пойдет хорошо, ваш сайт будет выглядеть гармонично. Если нет, вы получите картину в стиле фильма ужасов!
Если вы вообще откажитесь от использования цвета на вашем сайте, он будет выглядеть невзрачно и быстро забудется. Если вы переборщите с цветом, сайт будет казаться безвкусным.
Нужно правильно подобрать шаблон и цветовую палитру будущего сайта. Две эти задачи могут оказаться едва ли не самыми сложными при создании сайта.
Знание всего нескольких правил позволит сделать выбор цветовых решений не таким тяжелым.
Прочитав эту статью, вы узнаете, как:
- Выбрать наиболее подходящий цвет для сайта и личного бренда;
- Как сочетать тона для достижения гармоничной цветовой гаммы;
- Выбрать наиболее удачный фоновый цвет;
- Использовать цветовые акценты только там, где нужно.
Каким образом цвет влияет на восприятие вашего сайта и бренда?
Если я попрошу вас подумать о Кока-Коле, что первым придет вам на ум? Скорее всего, в вашем воображении всплывёт красный логотип Кока-Колы:
Довольно сложно думать об этом напитке, и не ассоциировать его с красным цветом. Красный настолько прочно связан с брендом, что так же важен, как и сам знаменитый напиток.
Красный в цветовой схеме несет в себе два важных послания:
- Ярко-красные этикетки сильно выделяются на фоне остальных на прилавках с газировкой.
- Каждый цвет вызывает определенные эмоции. Когда мы видим красный, у нас на подсознательном уровне возникает чувство возбуждения, любви и страсти. Именно эти чувства Кока-Кола хочет вызвать своими напитками:
Если вы выберете правильное цветовое оформление для своего сайта, вы не только сделаете его визуально привлекательным, но и создадите запоминающийся бренд.
85% покупателей признают, что основной причиной покупки товара явился его цвет.
Узнаваемость бренда увеличивается на 80% при использовании цвета.
3 шага к правильному использованию цвета на вашем сайте
При разработке дизайна сайта нужно:
- Выбрать преобладающего цвета для вашего бренда;
- Выбрать несколько акцентных оттенков для создания цветовой схемы;
- Выбор фонового цвета для создания законченного дизайна.
1. Выбор преобладающего цвета
Преобладающий цвет вашего бренда красный, как у Кока-колы? Он поможет вызвать у посетителей ресурса нужные эмоции, провоцирует у людей чувство возбуждения, любви и страсти.
Этот цвет – первое, что должно приходить людям на ум, когда они думают о вашей компании. Если у вас уже есть логотип, убедитесь, что он содержит основной цвет вашего бренда.
Как выбрать правильный цвет
Крупные компании не случайно выбирают ту или иную цветовую схему для сайта. Это осознанный выбор, являющийся частью брендинга и маркетинга.
Каждый цвет привлекает свою группу покупателей, и даже может повлиять на их выбор :
Красно-оранжевый, черный и ярко-синий привлекают импульсивных покупателей. Такие цветовые решения зачастую можно встретить в сетях быстрого питания, магазинах одежды и на дешевых распродажах.
Тёмно-синий и бирюзовый привлекают покупателей с ограниченной суммой денег. Эти цвета можно встретить в банках и больших универмагах.
Малиновый, лазурный и розовый привлекают классических покупателей. Распространены в магазинах одежды.
Чтобы привлечь нужных вам покупателей, используйте комбинации различных цветов.
Мы специально создали наглядную инфографику подбора цветовых схем, чтобы вам было проще выбрать преобладающий цвет для вашего бренда:
Какой цвет использовать для вашего сайта?
Зеленый олицетворяет богатство, здоровье, спокойствие и природу. Этот цвет легче всего воспринимается глазами и, как следствие, расслабляет. Зелёный цвет стоит на втором месте среди самых любимых и для мужчин, и для женщин.
Желтый – символ молодости, оптимизма и жизнерадостности. Часто используется, чтобы привлечь внимание. Также желтый может вызвать напряжение, так что используйте его в небольших количествах.
Оранжевый ассоциируется с дружелюбностью, восторгом и творчеством. Стимулирует в людях активность. Например, побуждает купить продукт или подписаться на рассылку. Этот цвет привлекает импульсивных покупателей.
Красный символизирует страсть, волнение, энергию и опасность. Часто используется, чтобы создать в восприятии людей срочную необходимость покупки. Вызывает сильные эмоциональные реакции. В ресторанах используется для поднятия аппетита.
Розовый – женственный, сладкий, невинный и романтичный. Часто используется в предложении частных услуг и товаров для девочек и женщин.
Фиолетовый – символ величия, богатства, успеха и мудрости. Часто присутствует в косметике. Влияет на людей успокаивающе.
Синий – показатель надежности, безопасности, стабильности, умиротворенности и спокойствия. Часто применяется банками и крупным компаниями. Синий цвет наиболее приятен как мужчинам, так и женщинам.
Серый в цветовой схеме олицетворяет нейтральность, простоту, спокойствие и логичность. Он ассоциируется с технологиями, производством, аккуратностью, контролем, компетентностью и даже опытностью.
Чёрный – цвет влияния, роскоши, опытности и элегантности. Часто используется для продвижения товаров класса люкс и ассоциируется с профессионализмом, силой и аккуратностью.
Ваша целевая аудитория – молодые и энергичные покупатели? Или более опытные люди с солидным заработком? Ваш продукт (сервис ) нацелен в большей степени на мужчин или на женщин? Подходит ли он только для определенной возрастной группы?
Не каждый цвет подходит для представления вашего бизнеса. Например, если вы продаете коврики для йоги, фиолетовый (богатство и величие ) и черный (сила и роскошь ) – не самые лучшие варианты. Вам подойдет зеленый (здоровье, умиротворенность ), серый (простота, спокойствие ), синий (покой, спокойствие ), или может быть даже красный (страсть, энергия ).
Разница в цветовом восприятии мужчин и женщин
На кого преимущественно рассчитан ваш сайт, на мужчин или на женщин? А может и на тех, и на других?
Яркие и приглушенные цветовые схемы для сайта
Мужчины предпочитают яркие цвета, а женщины приглушенные.
Эксперимент показал, что в целом мужчины и женщины одинаково реагируют на светлые и темные оттенки. Но выяснилось, что женщины больше тяготеют к приглушенным оттенкам, а мужчины — к ярким.
Ахроматические цвета
Как правило, мужчинам больше чем женщинам нравятся ахроматические цвета. Ахроматические цвета – это белый, черный и все оттенки серого.
Светлые и темные оттенки
Женщинам больше нравятся светлые оттенки. Причиной этого является их усиленное восприятие определённых цветов.
Женщины
Синий, фиолетовый, зеленый.
Оранжевый, коричневый, серый.
Мужчины
Наиболее предпочтительные цвета: синий, зеленый, черный.
Наименее предпочтительные цвета: коричневый, оранжевый, фиолетовый.
Комбинируя и используя цвета, которые больше нравятся мужчинам, женщинам, или и тем, и другим, можно влиять на их подсознательное восприятие бренда.
Согласно результатам исследований цветовых схем, и мужчинам, и женщинам, нравятся зеленый и синий. И тем, и другим, не по душе оранжевый и коричневый. Если вы хотите привлечь внимание и мужчин, и женщин, нужно использовать в качестве главного цвета синий или зеленый.
Выбор цвета вашего бренда или продукта также может зависеть от того, какое впечатление на других хотят произвести ваши клиенты.
Часто люди покупают определенные товары или услуги, чтобы произвести конкретное впечатление на других.
Многие решения являются отражением того, что человек думает о себе, и как хочет выглядеть в глазах других. Это то, что будет приходить на ум другим людям при мыслях об этом человеке:
Так что если вы хотите, чтобы ваш продукт покупали люди, которые любят природу – используйте зеленый в цветовой схеме HTML . Хотите привлечь людей, чувствующих себя молодыми и уверенными в себе? Используйте желтый. Если вас интересуют люди, которым хочется выглядеть солидно и богато, используйте черный.
Теперь ясно?
Подумайте об идеальном представителе целевой аудитории. Каким он хочет казаться другим людям?
Да, это затрагивает психологию. Но вам необходимо в этом разбираться, чтобы создать успешный бренд.
Как использовать главный цвет на вашем сайте
Теперь, когда вы определились с главным цветом своего сайта, вам нужно понять, как правильно его использовать. Цвет привлекает много внимания, так что не нужно пытаться использовать его везде, где только можно.
Используйте преобладающий цвет только в тех местах, на которые хотите обратить внимание пользователей, либо побудить их на определенное действие.
Например, позвонить по телефонному номеру, заполнить форму, подписаться на обновления и т.п.
Преобладающий цвет должен бросаться в глаза, выделяя те детали, на которые вы хотите обратить внимание пользователей:
Где использовать преобладающий цвет на сайте?
- Логотип;
- Вкладки меню;
- Кнопка «Позвонить»;
- Важная информация;
- Заголовки и названия;
- Кнопки.
2. Выбор акцентных цветов
Чтобы ваш дизайн был более интересным и профессиональным, нужно использовать акцентные готовые цветовые схемы для сайта. Ими можно выделять стоящие внимания части вашего сайта: цитаты, кнопки или подзаголовки.
Многие боятся использовать сразу несколько цветов, потому что не всегда интуитивно понятно, хорошо ли они сочетаются. Люди думают, что для того, чтобы научиться их сочетать, надо не только досконально изучить теорию цвета, но и наделать множество ошибок.
Существует более легкий путь, доступный каждому. Это программа по подбору цветов, которая поможет подобрать цветовые схемы точно так же, как это делают профессионалы!
Как использовать программу для подбора акцентных цветов
Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool :
Вот короткая инструкция, которая покажет вам, как создать цветовую схему одним из двух способов:
- На основе преобладающего цвета
Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com . Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.
Скопировав код с ColorPicker.com , вставьте его в поле «НЕХ » инструмента Adobe Color . Убедитесь, что вы вставили код в колонку посередине:
Вставьте код преобладающего цвета вашего сайта в прямоугольник ПОСЕРЕДИНЕ.
Как только вы зададите цвет, Adobe Color отобразит его на экране вместе с другими комплементарными цветами.
Шаг 2 . В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:
- Последовательная;
- Монохромная;
- Треугольная;
- Комплементарная;
- Составная;
- Оттенки.
Выберите цветовую схему
Поэкспериментируйте с разными цветовыми схемами, чтобы понять, какая из них подходит именно вам. Все цвета, предложенные программой, хорошо сочетаются друг с другом.
Шаг 3 . Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета.
Важно не перемещать короткий указатель, расположенный посередине, чтобы ваш преобладающий цвет оставался постоянным:
CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX ) для выделения любой части вашего сайта:
Скопируйте цветовые коды (HEX ) для вашей цветовой схемы для сайта.
- На основе понравившейся фотографии
Порой проще искать цветовые решения на просторах интернета и вдохновляться ими.
Вы можете загрузить любую понравившуюся фотографию в Adobe Color и программа автоматически сгенерирует цветовую схему, созданную на ее основе.
Шаг 1. Загрузите фотографию:
Нажмите на значок камеры, чтобы загрузить изображение.
Шаг 2. Выберите одно из пяти цветовых настроений:
- Красочное;
- Яркое;
- Приглушенное;
- Насыщенное;
- Темное.
Поэкспериментируйте с цветовыми настроениями, чтобы понять, какое вам ближе:
Выберите цветовое настроение.
Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета по изображению:
Перемещайте указатели, если хотите выбрать другие комплементарные цвета.
Шаг 4. Предложенная цветовая палитра расположена под изображением. Вот как можно подобрать цветовую схему для вашего веб-дизайна.
Чтобы увидеть коды (HEX ) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:
Нажмите на цветное колесико, чтобы увидеть коды цветов:
Скопируйте цветовые коды (HEX ) для вашей цветовой схемы.
Где размещать вспомогательные цвета
Детали сайта, выделенные вспомогательными цветами, не являются основными акцентами. Но они все равно выделяются. Например, вспомогательными цветами можно выделять подзаголовки, дополнительные кнопки, диалоговые окна, заливать фон и т.д.
Выбирайте один или два дополнительных цвета. Если их будет больше, пользователям будет сложно сфокусироваться на чем-то одном:
Где использовать вспомогательные цвета на вашем сайте?
- Активная кнопка меню;
- Подзаголовки;
- Выделение второстепенной информации.
- Выбор фонового цвета
Вам когда-нибудь приходилось красить стены в своем доме?
Если да, значит, у вас есть какой-то опыт, и вы знаете, что подбор цветовых схем – дело нелегкое.
Цвет должен быть достаточно спокойным, чтобы вы могли находиться в комнате часами и цвет на вас не давил. В то же время, вы не хотите, чтобы цвет был скучным, и комната выглядела больничной.
Выбор фонового цвета для вашего сайта не сильно отличается от выбора краски для вашей комнаты!
Как правильно выбрать цвет фона
Если бы вы выбирали краску для современного магазина одежды и для загородного дома, то выбрали бы один и тот же цвет?
Очевидно – нет. Эти два помещения служат для разных целей.
Например, для магазина одежды лучше использовать яркие тона, чтобы привлечь внимание покупателей к стеллажам с одеждой. Нужно, чтобы цвет стен контрастировал с цветом полок с одеждой, и покупатели, войдя в магазин, сразу понимали, на что обратить свое внимание.
И для сравнения: приезжая в свой загородный дом, вы наверняка планируете расслабиться. Вы хотите, чтобы цвет стен и устройство дома оказывало успокоительный и расслабляющий эффект.
Фоновый цвет вашего сайта зависит от того, на что вы хотите обратить внимание пользователей.
Проще говоря, фоновый цвет напрямую зависит от цели, которую вы преследуете, создавая сайт.
Тип 1 – Ресурсы с большим количеством контента или интернет-коммерция
Замечали ли вы, что информационные ресурсы и интернет-магазины часто используют белые или нейтральные цветовые схемы для сайта?
Это все потому, что целью данных ресурсов является продвижение идей или продуктов.
В таких случаях центром внимания должны являться продукты или услуги, а не дизайн сайта. Фоновый цвет является всего лишь основой для того, чтобы сделать контент более наглядным и читаемым.
Для информационных ресурсов и интернет-коммерции лучше всего использовать светлый фон, яркие преобладающий и вспомогательные цвета. Яркость преобладающего и акцентных цветов гарантирует уникальность сайта, и позволяет выделить детали. В то же время, нейтральный фон в цветовой схеме для сайта продаж помогает пользователю фокусироваться только на контенте или продуктах.
Тип 2 – Корпоративные сайты и сервисы
При создании корпоративного ресурса преследуется одна цель – продвижение товаров или услуг.
В зависимости от того, какова цель вашего сайта, фоновый цвет должен отличаться.
Продвижение бренда
Если вы хотите создать запоминающийся образ компании, используйте для фона различные оттенки преобладающего цвета или цвета бренда.
Все потому, что цвет напрямую влияет на узнаваемость бренда (помните пример про Кока-Колу? ) Когда вы используете различные оттенки цвета своего бренда в качестве фона, вы усиливаете его и делаете более запоминающимся для клиентов.
Если преобладающий цвет вашего сайта вызывающий, то его использование в качестве фона может негативно повлиять на восприятие пользователей. В таких случаях, используйте оттенки с наименьшей интенсивностью:
Продвижение сервиса
Если вашей целью является привлечение внимания к сервису или к портфолио с вашими работами, используйте белый или нейтральный цвет фона.
Как и в случае с информационными ресурсами, не нужно перегружать сайт и отвлекать внимание пользователей от контента, который вы хотите донести. Использовав белый или светлый фон в цветовой схеме для сайта, вы заострите внимание на контенте:
Тип 3 – Стильные и креативные сайты с большим количеством графики
Если вы собираетесь создать сайт, связанной с творчеством (мода, дизайн, ресторанный бизнес, красота и т.д. ), для вас нет никаких ограничений.
Для сайтов такого типа не существует правил использования фонового цвета. Вы можете сделать панель меню черной, чтобы добавить драматизма. Или создать фон, используя все цвета радуги, чтобы взбодрить посетителей ресурса:
Старайтесь всегда придерживаться одного правила: никогда не выбирайте такой фоновый цвет, который сделает затруднительным прочтение текста на нем.
Идеальный фоновый цвет позволяет контенту выделяться и гармонично сочетается с преобладающим и вспомогательными цветами. Правильный фоновый цвет делает нахождение пользователей на сайте приятным.
Если вы сомневаетесь, используйте белый или светло-серый фон. Возможно, они не самые вдохновляющие, но вы будете уверены, что ваш контент четко виден.
Заключение и итоги
Не стоит руководствоваться персональными пристрастиями или чутьем при выборе цветовой схемы для сайта.
Используйте цвета, которые нравятся вашей потенциальной аудитории, и тогда ресурс надолго засядет у людей в памяти. Это выделит вас среди конкурентов.
Выбор цветовой палитры ни в коем случае не должен быть случайным. Это набор действий, которые необходимо предпринять:
- Выбрать для сайта правильный преобладающий цвет;
- Выбрать для преобладающего цвета правильные вспомогательные цвета;
- Выбрать соответствующий фоновый цвет.
Данная публикация представляет собой перевод статьи «How to Choose a Good Color Scheme For Your Website » , подготовленной дружной командой проекта
Цель этого поста изложить именно основные принципы подбора цветов одежды и аксессуаров к ней. Здесь описаны правила колористики, которые работают на 100 %.
Есть много других рекомендаций от разных дизайнеров одежды и стилистов, но они зачастую противоречат друг другу. Поэтому мы не стали вносить путаницу в и без того сложную тему утончённого стиля и вкуса, а ограничиться азбукой колористики. Но и этой азбуки вполне достаточно, чтобы одеваться изысканно, ведь согласно общеизвестному "принципу Парето", обладая 20 % информации, можно получить 80 % результата. ..А там уже и до совершенства недалеко:)
Колористика в одежде
основные правила с примерами
- Белый, чёрный и серый разной насыщенности можно сочетать между собой, с другими цветами или использовать их сами по себе.
- Один и тот же цвет разной насыщенности - беспроигрышный вариант:
- Близкие тона на круге Иттена - аналоговая, или родственная гамма:
- - когда основной цвет сильно разбавлен белым. При любых комбинациях не создают контрастных сочетаний, поэтому с ними можно смело экспериментировать в отличие от ярких тонов. То есть, чем меньше яркость и насыщенность, тем с большим количеством других оттенков он будет гармонировать. Такая слегка блёклая палитра придаёт нежности и женственности:
- Комплементарное сочетание - на круге Иттена два диаметрально противоположных цвета. Лучше (хотя и не обязательно), если одного из них будет больше, чем другого. То есть, противоположный работает как акцент - это может быть элемент в одежде, рисунок, узор, нитка или что-то из аксессуаров - обувь, шляпка, сумочка, шарфик, перчатки, бижутерия..
- - получается если взять близкие по кругу цвета и добавить к ним для акцента абсолютно противоположный. Количество близких тонов здесь может варьироваться. Это то же самое комплементарное сочетание , но основной компонент дополнен близкими составляющими для придания разнообразия ансамблю.
- Три ярких цвета - триада. На круге Иттена это равносторонний или равнобедренный треугольник. Приблизительно равное по количеству их сочетание характерно для моды 70-х годов, но необязательно, ведь в расчёт идёт ещё и фасон и всё остальное.
- - пёстрый ансамбль, яркий, вызывающий образ.. очень легко ошибиться с выбором сочетания. Здесь правила немного отходят на второй план, уступая место чувству вкуса. Есть даже направление в дизайне одежды под названием "color blocking" в котором дизайнеры и стилисты экспериментируют с самыми неожиданными комбинациями:
Ахроматические сочетания
 |
 |
||
 |
 |
 |
В частности, можно добавить серый чтобы уменьшить общую яркость образа, при использовании ярких элементов в одежде:
 |
 |
Что касается серого, белого и чёрного - это бесцветные, или ахроматические тона, с ними всё просто. Разве что, можно добавить ещё такое правило - чёрный и белый хорошо сочетаются с яркими, а серый лучше смотрится с приглушёнными тонами.
К счастью, кроме довольно скучных ахроматических градаций наши глаза способны различать тысячи оттенков, что делает нашу жизнь гораздо интересней, в частности, позволяет каждому человеку создавать свой неповторимый образ.
Схема конструкции цветового круга
Сторона дизайнера
Сторона художника
|
Нас, в данной статье, интересует только сторона дизайнера. Рядом с примерами ниже показано как данная схема отображается на стороне дизайнера круга Иттена (в чёрно-белом виде, так как имеется в виду именно схема, а не конкретное сочетание) Итак..
Монохромная гамма
 |
 |
Родственная гамма
 |
 |
 |
 |
||
Сочетания ярких цветов - с ними нужна особая внимательность. Они привлекают всеобщее внимание, создают неординарный сексуальный образ. Но если переборщить или ошибиться, то эффект будет противоположный - безвкусный, режущий глаз клоунский наряд.
Без знания правил колористики тут не обойтись. А правила такие:
Комплементарная пара
 |
 |
 |
Триада
Посмотрите вполне современные примеры:
Здесь опять же, один цвет лучше взять за основной, остальные - дополняющие, акцентирующие.
Тетрада - многообразие красок
Когда речь идёт о четырёх или более тонах в одежде, чаще подразумеваются вещи с многоцветным узором. Естественно, пёстрый наряд не будет хорошо смотреться, если в нём намешан без разбора весь спектр радуги:
В коллекциях лучших мировых брендов, если используется разноцветная ткань, то её оттенки всегда строго сбалансированы (если конечно это не дерзкие опыты эпатажных модельеров с целью ошеломить публику). Все цвета сгруппированы из наборов схожих оттенков, группы оттенков назначаются по одной из схем. Самые сочные и яркие полихроматические сочетания получаются если взять тона, расположенные на круге по углам квадрата или прямоугольника. Это две комплементарные пары - Тетрада и квадрат.
Комплементарная пара контрастна сама по себе, здесь эффект контраста умножается на два - богатое поле для фантазии и экспериментов с тем, какой тон выбрать основным, а какие дополнительными или акцентирующими.
Рекомендуем так же ознакомиться с онлайн-сервисом по подбору цвета в одежде.
 |
 |
||
 |
 |
 |
Заключение
Это были основные правила колористики в одежде, соблюдая которые вы "не промахнётесь" при покупке новых вещей или аксессуаров в свой гардероб. Применить их на практике можно например так: посмотрите одежда каких цветов преобладает в вашем шкафу, теперь выбрав одну из вышеизложенных комбинаций вы легко определите что и какого цвета нужно искать в магазинах. Или наоборот: у вас есть вещь, которая вам нравится, но вы её не носите так как непонятно с чем её надеть, всё просто - читайте правила, смотрите таблицу.
Конечно для создания стильного образа одной колористики мало, нужно знать какие модели одежды модны в этом сезоне. Ещё есть психология цвета, которая объясняет каким образом то или иное сочетание влияет на восприятие, и соответственно помогает управлять впечатлением, производимым вашим внешним образом на окружающих. Так же, есть различные цветотипы людей в зависимости от оттенка их кожи, волос и глаз. Конечно же, каждый из нас индивидуален, и у каждого свой набор предпочтительных гамм.
А как же понятие безупречного вкуса? Ведь он может заменить знание правил и других тонкостей! Да, так и есть. Но на пустом месте он не возникает. В начале всегда идёт теория, потом практика, потом ещё больше практики, а потом глядишь - не нужно ничего читать, никуда подглядывать - смотрите на вещь и сразу видите, что с ней будет хорошо смотреться, что не очень, а что вообще никак. Это и есть безупречный вкус. Наверное, это то, к чему и надо стремиться.
Надеемся, этот пост будет полезен вам на практике при выборе одежды и/или аксессуаров к ней.
Если вы ещё не ознакомились, то рекомендуем вам ознакомиться с полезным практическим инструментом, в котором заложены все описанные здесь и не описанные комбинации тонов - это цветовой круг колориста (дизайнера, художника). Им очень удобно пользоваться как шпаргалкой, так как все сочетания запомнить трудно, а данный инструмент можно держать в руках и открывать в окошках те комбинации которые вам нужны.
Заказать данное изделие можно на нашем сайте из Каталога товаров, или через быстрый заказ в один клик по кнопке:
Таблица цветовых сочетаний
В качестве приложения к посту приводим таблицу, в которой показаны удачные, максимально гармоничные сочетания, составленные по основным схемам круга.
В таблице представлены 6 из 12 основных цветов, с которыми составлены 8 самых используемых стилистами комбинаций (то есть 6 х 8 = 48 контрастных сочетаний без оттенков). Чтобы иметь возможность в любой момент получить все комбинации всех 12 тонов с оттенками, рекомендуем приобрести цветовой круг дизайнера и художника. Подробное описание его устройства, а так же инструкция по использованию - на главной странице сайта.| чёрный, белый, серые тона | монохромное (оттенки одного цвета) | аналоговое (близкие по кругу) | (максимально контрастное) |
тетрада (прямоугольник или квадрат) |
|||
|---|---|---|---|---|---|---|---|
| ------ | |||||||