Введение в теорию цвета для начинающих веб-дизайнеров. Цветовой круг.

Данная статья послужит введением в тему теории цвета и его представления на компьютерах.

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

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

Исторически цвета или тона, делятся на основные, вторичные и третичные.

Основные цвета или Primary Colors

Основные цвета — желтый, красный и синий. Если говорить о представлении цвета на экранах различных гаджетов — это RGB (красный, зеленый и синий соответственно).

Вторичные цвета или Secondary Colors

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

Третичные цвета или Tertiary Colors

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

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

Дополняющие цвета или Complementary Colors

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

Аналогичные цвета или Analogous Colors

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

Триады или Triadic Colors

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

Немного о холодных и теплых оттенках

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

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

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

Использование тени и света

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

А теперь давайте рассмотрим каждый цвет на реальном примере, и оценим какие именно эмоции они вызывают.

Белый

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

Черный

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

Красный

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

Зеленый

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

Синий

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

Желтый

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

Онлайн-сервисы для создания цветовых схем сайта

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

Kuler

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

Color Scheme Designer 3

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

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