Как выбрать цветовую палитру для дизайна вашего сайта
25
Наташа Клевер
Веб-дизайн / Статьи
09-06-2011
Цветовая палитра представляет собой набор цветов, используемых при разработке дизайна сайта. К выбору цветовой гаммы сайта предъявляются особые требования, поскольку цвета не только определяют внешний вид вашего сайта, но и будут также ассоциироваться с вашим брендом в интернете. Большинство палитр включает от 2 до 4 цветов, не считая белого и черного цвета. Давайте с помощью Webexpedition18 попробуем разобраться, как наилучшим образом создать цветовую палитру для сайта.
Выбераем основной цвет сайта
Для начала очень важно выбрать основной цвет. Поэтому, если у вас уже есть готовый логотип, то лучше в качестве основного использовать цвет, используемый в логотипе. Если же цвет приходится выбирать с нуля, то можно воспользоваться другим способом. Попробуйте проанализировать аудиторию вашего сайта с точки зрения возрастных или социальных цветовых предпочтений. Или воспользуйтесь информацией о психологии цвета и его воздействию на эмоциональное состояние.
Немного о цветовых моделях
Существует несколько способов описания цвета с помощью количественных характеристик. Однако, цвет – понятие сложное, и поэтому, в зависимости от прикладных нужд, цвет можно описать с помощью нескольких цветовых моделей. Рассмотрим наиболее распространенные из них.
Цветовая модель RGB
Наиболее распространена в веб-дизайне. Аббревиатура RGB означает названия трех цветов: Red (красный), Green (зеленый), Blue (синий). Его исходным цветом является черный (экран монитора). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать белый цвет. В HTML документах цвета задаются символами от 00 до FF в шестнадцатиричном коде перед которыми ставится символ #.
Цветовая модель CMYK
Эта модель характерна для полиграфии и печати. Аббревиатура CMYK означает названия четырех цветов: Cyan (голубой), Magenta (пурпурный), Yellow (желтый), Key (черный). Его исходным цветом является белый (лист бумаги). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать черный цвет.
Поскольку модель RGB охватывает больший цветовой диапазон, чем модель CMYK, то все изображения, предназначенные для печати и полиграфии, должны быть переведены из системы RGB в CMYK. Так, создавая логотип для сайта, используется одна система (RGB). А для печати визиток и фирменных бланков, используется CMYK модель.
Создаем палитру цветов
Как правило, дизайнеры пользуются традиционным цветовым кругом для определения цветовой палитры для сайта. Цветовой круг из 12 цветов был изобретен Исааком Ньютоном еще в 1666 году. Существует ряд цветовых комбинаций, выбираемых с помощью круга, которые практически всегда смотрятся гармонично. Рассмотрим подробнее некоторые из них.
Монохроматическая палитра
В такой палитре используется только один цвет, но с разными значаениями насыщенности и яркости. Такие схемы аккуратны, благородны и действуют успокаивающе.
На приведенных ниже примерах, можно использовать первый цвет, как основной. Второй цвет для текста или бэкграунда. Третий цвет для беграунда или текста. А четвертый и пятый для различных графических элементов и акцентов.
Комплиментарная палитра
В этой гармонии используются два контрастных цвета с круга и из них выбирается один основной цвет. Остальные цвета в палитре – это производные по насыщенности и яркости от двух превоначальных цветов.
Так на приведенных ниже примерах третий и четвертый – это основные контрастные цвета. 1 и 2 – оттенки третьего, а 5 – оттенок четвертого.
Сплит комплиментарная палитра
Это разновидность предыдущей палитры, с той разницей, что один из контрастных цветов разделен на два соседних цвета.
Аналоговая палитра
Аналоговая палитра основана на трех цветах, следующих друг за другом на цветовом круге. Из них один цвет является основным, а два других вспомогательными.
Триадная палитра
Здесь используются три цвета, равноудаленные друг от друга. Из них один основной, а два других вспомогательные.
Палитра прямоугольник
В этой схеме используются две пары противоположных цветов. Эта схема достаточно сложна для использования в дизайне, поскольку требует очень точной настройки.
Палитра квадрат
Эта схема аналогична предыдущей, но все четыре цвета равноудалены друг от друга. Также достаточно сложна для использования в дизайне, поскольку требует очень точной настройки.
Сервисы по работе с цветом
Для выбора цветовой палитры очень помогает цветовой круг онлайн, который собственно и составляет все вышеперечисленные виды палитр на выбор. Также можно воспользоваться различными любопытными сервисами по работе с цветом. А можно использовать мои подборки с уже готовыми цветовыми палитрами, которые я делаю с помощью креативных работ художников и дизайнеров, цветных фотографий, с которых умная техника снимает готовые цветовые гармонии.
Используем контрастные цвета
Еще одно правило, о котором не следует забывать при выборе цветовой палитры для вашего сайта – это правило контраста. Важно выбирать цвета, которые обеспечат хороший контраст между текстом, изображениями и фоном. Например, цвета, наиболее удобные для чтения – это черным по белому или белом по черному. А вот оранжевый текст на коричневом фоне недостаточно контрастный, и скорее всего, создаст неудобства для читателей.
Дополнительные цвета
После того, как вы выбрали цветовую схему, обеспечили хороший контраст между текстом и фоном, осалось лишь выбрать вспомогательные цвета. Как правило, это оттенки ваших основных цветов. Эти цвета могут быть использованы при наведении на объект, в текстовых ссылках или декоративной тени у текста. Не следует перегружать сайт большим количеством цветов, это создаст ненужный хаос и отпугнет посетителей. Оптимально это 4-6 цветов на сайте.
PS. Постовой. А вы знаете, что два два человека : Мария aka Jakkonda и Олег S9 из Санкт-Петербурга ведут очаровательный Blog812 о Дизайне и Креативе. Авторы публикуют иллюстрации, фотографии, подборки уроков, вордпресс советы. Блог находится в стадии развития. Дружеская поддержка приветствуется.
Психология цвета и его воздействие на эмоциональное состояние (17)
Учебник HTML. Урок 7. Создание таблиц и их форматирование (2)
Учебник HTML. Урок 6. Типы списков, создание и форматирование списков (2)
Барокко – стиль в изобразительном искусстве и его особенности (0)
Учебник HTML. Урок 5. Создание и применение стилей, типы и правила (2)
Основные принципы веб-дизайна и их характеристики (0)
Учебник HTML. Урок 4. Связывание текста и документов, гиперссылки (0)
Учебник HTML. Урок 3. Добавление текста, абзацы, спецсимволы, мета данные (2)
Учебник HTML. Урок 2. Создание веб-страницы, обязательные элементы и правила (4)
Написать комментарий с помощью формы ВКонтакте
Написать комментарий с помощью формы Facebook
Комментариев (25)
|
Помню, как я изобретала цвета для своего блога.  Ответить | |
После долгих мучений решила делать в тёмно-красных тонах. Определилась со структурой макета. Почти всё было готово. И тут вдруг я НЕЧАЯННО мазнула по макету сочно-зелёным цветом. И тут же поняла, что я ззздохну, если оставлю дизайн монотонно-красным. Так в макете появились зелёные пятна. 
|
@Faraday: @Княгиня: Ответить | |
|
Спасибо за статью. Повторение – мать учения! Ответить | |
|
@Shershov: Ответить | |
|
Содержательный пост,даже почти всё понял Ответить | |
|
@SwaEgo: Ответить | |
|
Не знаю почему, но я в восторге от сочетания черного-белого-оранжевого. А вообще правильно подобранные цвета – это искусство Ответить | |
|
@Nek: Ответить | |
|
Давно подписана на DesignNonstop, но комментирую, к сожалению, впервые. Ответить | |
|
@Allpa: Ответить | |
|
Большущее спасибо за ссылку на цветовой круг онлайн. Давно знал о подборе палитры по всем описаннным способам (долгое время преподавал компьютерную графику), видел похожие сайты. Но этот меня подкупил дополнительными кнопками типа Random и совсем наповал сразил пунктом Export. Тут тебе и HTML+CSS, и Adobe-шные палитры. Ответить | |
|
@Игорь: Ответить | |
|
Очень полезная статья. Даже не знал, что оказывается палитра каким то образом выбирается)) Ответить | |
|
@Олег: Ответить | |
|
Здравствуйте, Наташа! Ответить | |
|
@Андрей: Смотрим вправо от круга на большое цветовое превью. В центре мы видим два основных цвета (красный и зеленый). А по бокам даны еще по два варианта цвета для данной палитры. Теперь смотрим наверх справа. Мы видим палитру из 4 цветов (два основных и два вспомогательных красных). То есть эта палитра является безопасной для использования. Теперь попробуйте нажать на triad. В большом цветном прямоугольнике вы получите три основных цвета посередине и по два вспомогательных цвета по бокам, которые можно использовать для составления палитры. В вашем случае (красный и синий) Больше подходит модель палитры «Квадрат», но она в данном сервисе не представлена. Попробуйте сделать по другому. Получите сначала compliment модель для синего (10 цветов 2 основных и 8 вспомогательных) и потом отдельно для синего (тоже 10 цветов) и используйте эти цвета в дизайне. Правд, говорят, что палитра квадрат самая капризная… Ну вот как-то так. Если чего не понятно объяснила, спрашивайте )) Ответить | |
|
@Наташа Клевер: Не стоит благодарностей, Ваш блог вполне заслуживает похвалы. Ответить | |
|
@Андрей: То есть получается, что из представленной сервисом палитры придется глазками выбирать подходящие сочетания для сайта. То есть сервис задает рамки, а в пределах этих рамок уже следуют интуитивные решения… Ответить | |
|
@Наташа Клевер: Вот теперь мне стало понятнее! Премного благодарен! Ответить | |
|
@Андрей: Ответить | |
|
Здравствуйте! Просто замечательная статья. Как долго для меня выбор цветов на сайте был проблемой. Огромное спасибо автору сайта.))) Ответить | |
|
@Анжелика: Ответить | |
|
Спасибо большое за статью, я даже раньше не знала, что так легко можно подбирать цвета с помощью разных палитр, я всегда так, на глазок… Больше всего понравились сочетания, которые с помощью аналоговой палитры получаются.. Буду пользоваться, ещё раз спасибо. А можно поподробнее о том, как выбрать цвет для сайта? А то мне так надоел мой блог (точнее, его зелёный цвет), думаю, как бы изменить… Ответить | |
|
@Анна: Ответить | |
Спасибо большое, очень пригодится, раньше понятия не имел как правильно круг с цветами крутить