Слишком большое число цветов

Опытные дизайнеры ограничивают цветовой спектр страницы очень небольшим набором цветов (не больше четырех).

Что понимать под цветом (тоном), а что под оттенком?

Давайте посмотрим на тоновую палитру, склеенную в кольцо:

Тоновая палитра, склеенная в кольцо

Можно заметить, что в радуге преобладают 6 цветов: три RGB-цвета — красный, зелёный, синий и три CMY-цвета, расположенные точно между ними — голубой, пурпурный, жёлтый. Соотношения между этими цветами:

синий + зелёный = голубой
красный + синий = пурпурный
красный + зелёный = жёлтый

Таким образом, можно говорить о 8 основных цветах (тонах), рассматривая остальные, как оттенки.

Цвета RGB-палитры (красный, зелёный, синий):

RGB-цвета

Цвета CMY-палитры (голубой, пурпурный, жёлтый):

CMY-цвета

Чёрный и белый:

Чёрный и белый

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

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

В одной из конкурсных работ “Сквозь огонь и воду” фон страниц был выполнен в виде цветовой растяжки от жёлтого к синему:

Растяжка от жёлтого к синему

Возникает вопрос: сколько цветов здесь использовано?

Три цвета. Посмотрите на тоновую палитру: растяжка захватывает три базовых цвета: желтый, зелёный, синий.

Ниже показана растяжка от белого к синему:

Растяжка от белого к синему

Здесь использовано два базовых цвета (хотя, на самом деле, цвет один, и он “растянут” по яркости).

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

Дополнительные рекомендации

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

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

При подборе цветов нужно исходить из двух важнейших принципов: единства и контраста. Единство — это фундамент композиции, скелет страницы. Контраст — это способ расстановки акцентов, выделений.

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

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

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

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

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

Вам трудно оценить сочетаемость цветов? И вам не хочется рисковать? Вот вам совет дизайнера Роджера Блэка:

Первый цвет — белый.
Второй цвет — черный.
Третий цвет — красный.

Прогулка

Папа пошел в лес за грибами.

 

Белый цвет — для фона, черный — для текста, красный — для заголовков.

Этот джентельменский набор дополняет классический набор для ссылок:

синий — цвет неотработанной ссылки
красный — цвет активной ссылки
пурпурный — цвет отработанной ссылки

<BODY bgcolor=white text=black
      link=blue alink=red vlink=purple>

Давайте ещё раз посмотрим на тоновую палитру, склеенную в кольцо:

Тоновая палитра, склеенная в кольцо

Цвета, расположенные в верхней половине кольца, относятся к тёплым цветам, а в нижней — к холодным.

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

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

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

Оттенки зависят от площади

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

Рекомендации по выбору цветов

Чёрные и белые цвета “не терпят” примесей в небольших количествах. Лучше использовать их в “натуральном” виде. К белому можно добавлять немного “синьки”:

Чёрные и белые цвета не терпят примесей

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

Если вы чувствуете себя не совсем уверенно в цветовом пространстве — возьмите за основу чёрный и белый цвета, добавьте к ним красный — эта палитра вас не подведёт:

Чёрный+белый+красный

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

Например, маленький объект тускло-синего цвета внутри большого ярко-зелёного приобретает зелёный оттенок:

Вид цвета зависит от цвета соседа и площади

На границах цвета меняют свой вид. Тёмный цвет рядом со светлым становится ещё темнее, а светлый — ярче:

На границах цвета меняют свой вид