Рецепты HTML

Подбор гармоничных цветов

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

Контрастные цвета находятся на противоположных сторонах цветового круга или отстоят друг от друга на 180 градусов и образуют белый цвет при их смешении.
Необходимый дополнительный цвет можно построить в модели RGB или HSB. Сначала рассмотрим использование модели RGB для подбора контрастного цвета.

Использование модели RGB
1. Выбираем любой нужный цвет, к которому подберем контрастный, например, оранжевый #FFCC33 (255, 204, 51 в RGB).

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

3. В результате математических операций получаем следующие параметры: 0 (255-255), 51 (255-204) и 204 (255-51). После перевода из десятичной системы в шестнадцатеричную имеем цвет #0033CC.

Использование модели RGB неудобно и приведено лишь для примера. Более простой способ подбора контрастных цветом связан с моделью HSB.

Использование модели HSB
1. Выбираем любой нужный цвет (рис. 1), например, все тот же оранжевый #FFCC33 (45, 80, 100 в HSB).

Рис. 1. Параметры цвета в модели HSB

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

Рис. 2. Изменением одного лишь параметра Hue можно получить контрастный цвет

3. Вводим значение 225 в поле оттенка (45+180) и получаем новый цвет (225, 100, 80 в HSB). Заметьте, что изменяется лишь один параметр, все остальные остаются прежними.

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

Нюансовые сочетания

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

1. Выбираем любой нужный цвет (рис. 3), например, темно-синий #000080 (240, 100, 50 в HSB).

Рис. 3. Оттенки одного цвета можно получать изменяя параметры насыщенности (S) и яркости (B)

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

3. Получится следующее (рис. 4).

Рис. 4. Получение нового нюансового цвета

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

Еще один способ подбора нюансовых сочетаний предоставляют готовые цвета Pantone (рис. 5).

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

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

Рис. 6. Нюансовые цвета можно использовать и в одежде