Как выбирать цветовую гамму сайта

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

• Гамма сайта должна соответствовать его тематике.
• Цвета должны быть согласованы друг с другом.

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

          Три примера применения вместе совершенно несовместимых, неудобных и болезненных для глаз цветов

Еще недавно, каких-то десять лет назад, все дизайнеры подбирали цвета на глаз и результаты этого зачастую были весьма плачевны (причем, в прямом смысле слова), однако, спрос породил предложение и с некоторых пор в Интернете появилось великое множество абсолютно бесплатных инструментов, призванных серьезнейшим образом облегчить процесс подбора гаммы для чего угодно, начиная с web-сайтов и заканчивая печатной продукцией. Какой же инструмент выбрать? Давайте рассмотрим три самые типичные ситуации.

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

В таких случаях вам поможет достаточно простой в использовании сервис Colorscheme.ru. Стоит лишь определиться с одним единственным основным цветом, а остальные, идеально сочетающиеся с основным цвета система вам подскажет сама. Основной цвет вы можете выбрать либо произвольно, кликнув на подходящем вам цвете в большой круговой палитре слева, либо задав для него уже к тому моменту известный вам так называемый hex-код (показан справа снизу от палитры и, кликнув по нему, вы сможете задать свое собственное значение). После выбора основного цвета можно попробовать «поиграть» с шестью имеющимися режимами программы (они выстроены в ряд сверху от круговой палитры). Каждый из этих режимов покажет вам новый набор цветов и оттенков, на основе которых вы можете безбоязненно построить свой сайт. Скажем, режим «Моно» покажет вам ваш только что выбранный основной цвет + еще четыре его оттенка, режим «Контраст» добавит к этому набору один контрастный выбранному цвет с четырьмя оттенками, «Триада» удалит контрастный цвет, но добавит в набор три родственных основному цвета + оттенки, и так далее.

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

Сохранить результат своих трудов в сервисе Colorscheme.ru можно в любом удобном виде. Опытные в работе с Adobe Photoshop пользователи могут сохранить гамму в формате .aco, тогда как остальные могут просто сделать скриншот содержания вкладки «Список цветов», открыть его в своем любимом графическом редакторе и в процессе работы над графикой для сайта копировать цвета со скриншота с помощью инструмента «Пипетка» («Eyedropper Tool»).

2. У вас есть изображение (иллюстрация или фотография), на основе которой вы бы хотели построить дизайн

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

3. Вам хотелось бы увидеть уже готовые удачные примеры гамм и, возможно, выбрать что-нибудь из них.

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

Статья взята с сайта ru.jimdo.com

[line]

Цвета в разных культурах: символизм

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

Красный

Китай: цвет невесты, удачи, торжества
Индия: чистота
Южная Африка: траурные цвета
Восток: радость (в сочетании с белым)
Запад: возбуждение, любовь, страсть
США: рождество (с зеленым), день святого Валентина (с белым)
Иврит: жертва, грех
Япония: жизнь
Христианство: жертва, страсть, любовь
Фэн-шуй: Янь, огонь, удача, уважение, защита, живучесть, деньги, признание

Голубой

Европа: успокоение
Иран: траур, цвет неба и духовность
Китай: бессмертие
Индуизм: цвет Кришны
Иудаизм: святость
Христианство: цвет Христа
Католицизм: цвета одежды Марии
Ближний Восток: защита
В мире: цвет безопасности
Фэн-шуй: Инь, вода, спокойствие, любовь, исцеление, релаксация, доверие, приключения
Запад: печаль, депрессия

Желтый

Европа: счастье, надежда, радость, трусость в опасностях, слабость
Азия: цвет имперского
Египет: траур
Япония: мужество
Индия: торговцы
Буддизм: мудрость
Фэн-шуй: Янь, Земля, благоприятный, солнечные лучи, тепло, движение

Оранжевый

Европа: осень, урожай, творчество
Ирландия: протестанты (религиозные)
США: Хэллоуин (с черным), дешевые товары
Индуизм: шафран (персиковый оранжевый) священный цвет
Фэн-шуй: Янь, Земля, цели, усиливает концентрацию

Коричневый

Колумбия: препятствие продажам
Австралийские аборигены: цвета земли, торжественное охра
Фэн-шуй: Янь, Земля, промышленность

Зеленый

Япония: жизнь
Ислам: надежда, добродетель
Ирландия: символ всей страны
Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным)
США: деньги
Индия: Ислам
Фэн-шуй: Инь, дерево, исцеление, здоровье, успокаивающее

Фиолетовый

Таиланд: траур (вдовы)
Католицизм: смерть, траур, распятие
Фэн-шуй: Инь, цвет физического и психического исцеления

Белый

Европа: брак, ангелы, врачи, больница, мир
Япония: траур, белая гвоздика символизирует смерть
Китай: траур, смерть,
Индия: несчастья
Восток: похороны
Фэн-шуй: Янь, металл, смерть, призраки, траур, равновесие, уверенность

Черный

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

Заключение

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

Полезные ссылки по теме:
en.wikipedia.org/wiki/Color_theory
joehallock.com/edu/COM498/index.html
www.sibagraphics.com/colour.php
www.bwwsociety.org/feature/color.htm
colortheory.liquisoft.com/
webdesign.about.com/od/color/Designing_With_Color.htm
www.webdesign.org/web-design-basics/color-theory/

Взято из статьи на Хабре. Там же можно посмотреть примеры нескольких цветовых решений на сайтах.

[share facebook=»true» twitter=»true» google_plus=»true»  email=»true»]