§2. Цвет

Цвет – базовый материал, фундамент сайта в Web-дизайне.

Тщательно продуманный и сбалансированный набор цветов, переходов, градиентов цвета способен сделать оригинальным даже посредственное во всех прочих элементах произведение.

Необходимо помнить, что восприятие цвета весьма субъективно. Цвет способен создавать у различных людей определенное настроение, порой различное. Однако есть и всеобщие закономерности восприятия, которые необходимо учитывать (например, холодные и теплые цвета, возбуждающие и успокаивающие и т.д.).

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

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

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

Пример: светло-коричневый (бежевый) и темно-зеленый дают примерно ту же степень контраста, что и черный с белым.

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

Цветовой контраст.Для визуализации взаимодействия цветов используются цветовые круги: большой цветовой круг Освальда, цветовой круг Гете (рис. 7) [10]:

к

кф ко

ф о

сф жо

с ж

сз жз

з

Рис. 7

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

Менее гармоничны цвета, расположенные по углам треугольника (синий и желтый).

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

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

Естественный фон: темно-синий, темно-зеленый ; текст: светло-желтый. Это популярная комбинация для графических слайдов деловых презентаций в затемненных помещениях, где светлый фон может быть чрезмерно ярким. Для Web-страницы, когда монитор окружен бумагами и другими элементами светлых оттенков (да еще с настольной лампой!), более приемлем темный текст на светлом фоне.

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

Из трех распространенных систем представления цвета (RGB, CMYK и HSB) ни одна не соответствует физиологии человеческого восприятия.

В соответствии с аддитивной моделью RGB (Red - Green - Blue), описывающей получение цвета на экране монитора, результирующий цвет получается при сложении лучей исходный трех цветовых компонент (красной, зеленой и голубой). Это трехканальная цветовая модель, предусматривающая 8 бит информации на каждый цветовой канал (до 256 оттенков на каждый цвет). В результате получается 24-разрядный (24-битный) цвет, с максимальным числом оттенков 16,7 млн.

Четырехканальная (32-разрядная) субтрактивная модель CMYK также содержит 8 бит (256 оттенков) информации для каждого канала. Цветовые составляющие получаются в результате вычитания соответствующих RGB-компонентов из чистого белого цвета: cyan (голубой) = белый - красный; magenta (пурпурный) = белый - зеленый; yellow (желтый) = белый - синий.

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

Обе эти модели аппаратно-зависимы. Кроме того, различные цвета, как уже отмечалось, обладают различной степенью собственной яркости (плотности в терминологии CMYK).

Для цветокоррекции создана специальная программная система Color Management System (CMS), позволяющая достигать одинакового представления цветов для всех этапов полиграфического процесса.

Аппаратно-независимой и единственной, основанной не на реальных технических процессах, а на восприятии цвета человеческим глазом, является так называемая "чисто математическая" трехканальная модель Lab. В ней канал яркости (Lightness) отделен от цветовых каналов aиb. В этих каналах цвет точки изменяется соответственно от зеленого до красного и от синего до желтого, проходя ахроматическую точку, где оба цвета отсутствуют.

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

Терминология HSB (Hue – Saturation – Brightness) – язык художников, пересевших от мольберта к экрану компьютера. Работа в этом цветовом режиме похожа на традиционную работу художника: для осветления добавляются белила, для затемнения - сажа.

Тон (hue) – единственный собственно цветовой компонент, представляющий один из цветов радуги (вернее, точку цветового круга), обладающий максимальными яркостью и насыщенностью.

Насыщенность (saturation) – соотношение основного тона и равного ему по яркости бесцветного серого.

Максимум насыщенности – без отсутствие серого оттенка вообще. Минимум насыщенности – серый цвет.

Яркость (Brightness) – общая яркость цвета. Максимум яркости предполагает получение белого пятна для любого исходного цвета. Минимум насыщенности дает черный цвет.

Модель HSB математически базируется на режиме RGB с усредненными параметрами. Она неверно трактует яркость пикселов, предполагая, что основные аддитивные цвета имеют одинаковую яркость, поэтому работает некорректно и считается вспомогательной. В этой модели удобно смешивать цвета, но их нельзя присвоитьизображению. Модель поддерживается большинством графических редакторов. Так, в цветовой диаграмме Corel DRAW параметры регулируются следующим образом: по кругу – тон, по радиусу – насыщенность, по дополнительной вертикальной шкале – яркость.

Цветовой круг. Хотя различные цвета и их сочетания получаются вследствие монотонного изменения длины волны света, однако по восприятию цветовой круг неоднороден. Есть участки самостоятельных цветов (основные «компьютерные» - красный, зеленый, синий, и цвета расположенные точно посередине между ними, – фиолетовый, желтый, голубой), есть участки переходов между ними. Глаз разлагает цвет почти на те же составляющие, из которых компьютер его синтезирует. По системе HSV основные тона круга обладают различной «собственной» яркостью (в порядке возрастания: красный – голубой – желтый).

Холодные цвета: синий, голубой, фиолетовый. Теплые: красный, желтый, зеленый.

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

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

Интересен слабонасыщенный цвет металла (сталь, алюминий, хром). Затемнение голубого при сохранении насыщенности дает густой сине-зеленый цвет – цвет морских глубин.

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

Желтый цвет не терпит понижения яркости или насыщенности – становится грязным или болотным.

Чистый красный цвет – считается цветом тревоги и возбуждения. Более темные и разбавленные его оттенки (охра, коричневый) успокаивают, выглядят классически.

Фиолетовый чрезвычайно редок в природе, его почти нет в солнечном спектре. Это почти «в чистом виде переходный» цвет, определяемый замыканием круга, искусственного смешения цветов. При этом он считается цветом философской мысли, медитации и самосозерцания.

Черный, белый и масса серых тонов между ними наиболее употребимы по следующим причинам:

• исходя из простой экономии, требующей не вводить новых цветов без необходимости;

• серая гамма бесконфликтно сочетается с остальными цветами в композиции.

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

То же относится к взаимному влиянию близких по тону цветов (синий в окружении ярко зеленого становится зеленоватым).

Аккуратности требует сочетание различных по яркости цветов. Так, любой насыщенный темный цвет на ярко-белом фоне кажется черным.

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

Требования к тону.Нельзя использовать цвета, расположенные рядом на круге – впечатление «неопрятного диссонанса».

Прямо противоположные цвета могут быть слишком контрастными.

Удобнее всего использовать цвета, расположенные на расстоянии ¼ окружности друг от друга.

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

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

О белом и черном. Отсутствие тона и насыщенности позволяет относить их к модификации одного цвета. Известен простой принцип Блэка, надежно «работающий» в тех случаях, когда трудно подобрать удачную цветовую гамму: первый цвет – белый, второй цвет – черный, третий цвет – красный.

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

Текст и фон должны иметь достаточный контраст для удобочитаемости. Это в первую очередь контраст по яркости. Мелкий текст слабо распознается по параметрам тона и насыщенности.

Для продолжительного чтения максимальную эргономичность обеспечивает черный текст на белом фоне. В Web-дизайне от этого требования часто отступают по эстетическим соображениям.

В целом все Web-страницы представляют две большие группы: с темным текстом на светлом фоне и со светлым текстом на темном фоне (последние популярнее).

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

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

Светлый текст на темном фоне. Светлый текст на темном фоне многие «любители» считают более оригинальным. Ввиду малости штриха шрифта желательно обеспечить тексту светлый и насыщенный цвет.

Цвет фона, если он не черный, должен быть достаточно насыщенным, чтобы тон цвета был различим.

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

Часто применяются холодные насыщенные цвета для фона («синий бархат») и теплые тона для текста, чаще – желтый. Можно построить страницу вовсе без цвета – строгие серые буквы на черном фоне. Но тогда интересно весь цветовой «удар» сосредоточить в логотипе и ссылках (www.blaweb.com)

Перечислим некоторые надежные цветовые композиции:

• фон – если не белый, то светлые цвета типа светло-серого, желтовато-коричневого, светло-синего, светло-зеленого;

• текст на светлом фоне должен быть черным или, по крайней мере, темным;

• красный текст используется очень ограниченно, а лучше вообще от него отказаться;

• следует избегать ярких цветов текста на светлом фоне;

• комбинацию темного фона со светлым шрифтом лучше оставить для спецэффектов, привлекающих внимание, - небольших по площади областей;

• черный фон слишком «заезжен» и недостаточно легок для фона. Лучше – темно-серый, темно-синий, темный бордо, лиловый;

• для текста на темном фоне хорошо работают белый и желтый (но это банально), а также светло-серый, светло-рыжий, светло-синий, светло-зеленый;

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