Подбор цвета для сайта — простые правила сочетания

Что первое бросается нам в глаза, когда мы открываем какой-либо сайт? Цвет. Точнее, цветовая палитра. Однозначно, это не решающий фактор, обеспечивающий успешность проекта, но это та составляющая, о которой в пословице говорится: «встречают по одежке». Потому, сегодня поговорим о подборе цвета для сайта.

Вряд ли вы воспримете всерьез магазин, где вам предлагают купить товары бирюзовым и малиновым текстом на желтом фоне. Скорее всего, у вас просто заболит голова, и вы поспешно закроете этот сайт. Да и у дизайнера, с красным текстом по розовому фону проект ремонта квартиры вы не будете заказывать, не так ли?

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

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

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

Ахроматические цвета

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

Разберемся, как влияют эти цвета на восприятие.

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

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

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

Хроматические цвета

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

Хроматические цвета имеют цветовой тон — собственно, это всем понятные и привычные красный, синий, желтый и так далее.

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

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

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

Если смешать их между собой – получатся  три вторичных цвета – зеленый, оранжевый и фиолетовыйПодбор цвета для сайта

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

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

Теплые и холодные цвета

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

Сочетание цвета для сайта

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

  • Монохромные цвета

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

  • Контрастные цвета

У каждого цвета в круге есть контрастный — он располагается ровно напротив. Такие пары цветов будут привлекать наибольшее внимание.

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

  • Предельно удаленные контрастные цвета

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

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

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

  • Аналогия с акцентом

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

  • Триада

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

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

Принципы композиции цвета для создания сайта

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

  • Количество цветов

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

  • Фон и текст

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

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

  • Цвет и размер

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

  • Теплый или холодный?

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

  • Целевая аудитория

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

Подбор цвета для сайта онлайн

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.

Пролистать наверх

Быстрая заявка на консультацию

  1. Заполняем поля (можно просто имя и любой удобный для Вас контакт: почта и/или страница vk и/или ватсап);
  2. Очень хорошо, если вы сможете заполнить и отправить бриф (скачать)
  3. Жмём «Отправить» ;
  4. В течении 24 часов (обычно намного быстрее) – я с Вами свяжусь, а далее всё обсудим и спланируем.
Всегда рад сотрудничеству! C уважением, Николай.