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

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

За этой простой практикой и лёгким подбором стоит серьезная теория цвета. Понять ее тяжело, но желательно; иначе при создании сайтов вы столкнетесь с ограниченным кругом вариантов. Человек, который нашел один способ подбора цветов, редко способен абстрагироваться и найти что-то новое. Поэтому я советую пользоваться наработками других, более опытных ваших товарищей. Но вместе с тем, как минимум, почитать известную книгу «Искусство цвета» Йоханнеса Иттена, а как максимум — освоить теоретические сведения о цвете.

Сначала — самое простое решение:

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

Без претензий на пафос, но вроде вполне пристойно, да? Если красный сделать градиентным, от бордового к аккуратному открытому красному цвету, то выглядеть будет уже намного веселее. Но градиент не стоит «пережигать»: он тогда станет непонятным, ну например если вы протянете его от коричневого к синему. Уже будет не то. Я уж молчу о непонятном грязном колере, который появится посередине. Точно так же можно добиться эффекта с фиолетовыми, лиловыми, синими и коричневыми тонами. Но не переборщите, например с жёлтым будет тяжело.

Теперь поинтереснее.

Всё строится на цветовом круге, а круг — на спектре. Мы все знаем, что такое спектр: он состоит из семи цветов. Те, кто возмутятся и скажут, что в спектре бесчисленное множество цветов, тоже будут правы ) но для простоты я говорил о самых-самых знакомых с детства колерах.
Красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый.
Берем спектр и представляем себе, что заворачиваем его в окружность. Получается вот такая картина:

Уже красиво. Радуга, детство, гуси на даче, первый набор фломастеров.

В реальности цветовой круг строится по другой схеме. Но нам важно не его построение (его можно в сети найти), а как с ним работать.

Теперь о том, какие закономерности здесь работают и по каким принципам подбирается цвет.

Если дальше в процессе вспомните о пропорциях, найдете много похожего. Цветовые сочетания строятся на банальных целочисленных пропорциях.

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

2. Триады
Это цвета, расположенные по треугольнику, как логотип мерседеса — под углом 120 градусов один к другому.

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

4. Монохромные сочетания
Помните как пингвин обозвал зебру в мультике «Мадагаскар»? «Мой монохромный друг». В данном же случае имеются в виду цвета,которые имеют один оттенок, одно название (например, синий), но при этом разную светлоту. Они похожи на аналоговые и используются соответственно.

Есть еще множество сочетаний, типа «двойные комплементарные», но используются они редко, особенно начинающими дизайнерами. И это правильно. Я считаю, что пользоваться стоит простыми методами, но пытаться достичь интересных результатов.

Лично я для подбора пользовался некоторое время программкой Adobe Kuler. Она помогает в случае когда вы уже явно в тупике, но для нее обязательно понадобится флеш-плеер.

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

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

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

Уже лучше, явно строже и корпоративнее. И, тем не менее, триады налицо.

И еще пара советов напоследок.

1. Старайтесь в кулере использовать сочетания триад (но аккуратнее, как я уже показал) и аналоговых. С дополнительными поначалу работать сложно, но вы доберетесь и до них, принцип там тот же, что и с триадами. А вот монохромы — вещь сложная, особенно с жёлтым цветом. В нем тёмные оттенки не получаются просто добавлением черного.
2. Если не получается сразу с сочетаниями цветов, попробуйте готовое чужое. Как только вы заходите в Кулер, там можно выбрать схему из уже существующих. Сложность только в том, чтобы потом эти цвета использовать; но я просто смотрю в кулере значение цвета в гексахроме (это запись вида #ff34be;) и его потом дублирую в фотошопе. Такие схемы созданы уже опытными дизайнерами, и их можно использовать в макетах с успехом.

Вы удивитесь, но буржуи их даже на продажу выставляют.

3. Еще раз напомню: начинайте с малого. Попробуйте сделать несколько макетов в черно-бело-красной гамме, потом в черно-серо-зелёной, а потом уже переходите к сочетаниям разных цветов. Градиенты тоже начинайте использовать не сразу, и, умоляю, не пережигайте их!