8. Теория цвета
Рассмотрены основы цвета и три простые цветовые схемы, помогающие при выборе цвета для сайта. В последующих материалах будет рассказано, как упростить этот выбор цветов
Введение
При отсутствии большого количества цвета или графики каждый сайт станет сайтом мечты Джекоба Нильсена (http://www.useit.com/). Хотя философия Нильсена об упрощенной архитектуре Web имеет определенные достоинства с точки зрения доступности и юзабилити, большинство дизайнеров Web хотят добавить сайтам авторское своеобразие с помощью различных элементов дизайна. К счастью дизайнер может добавить на сайт цвет, не теряя доступность и юзабилити, если сайт создается с учетом этих возможностей. Хотя многие дизайнеры чувствуют себя вполне спокойно при проектировании сайта для множества пользователей, эти же самые дизайнеры могут чувствовать себя неуверенно, когда речь идет о выборе цвета и графики.
В этой лекции рассмотрены основы цвета и три простые цветовые схемы, чтобы вы не испытывали затруднений при выборе цвета для сайта. Эта лекция будет продолжена еще одной публикацией о том, как упростить этот выбор цветов. В конце концов, приятнее получать комплименты по поводу дизайна Web-сайта, чем корпеть над выбором цвета.
Лекция имеет следующее содержание:
Цвет, оттенки, и тени
Монохроматические цветовые схемы
Дополнительные цветовые схемы
Теплые и холодные цвета
Триадические цветовые схемы
Тетрадические цветовые схемы
Заключение
Контрольные вопросы
Цвет, оттенки, и тени
Цвет, или тон, исторически делится на первичные, вторичные, и третичные цвета. Первичными цветами называют красный, желтый и синий цвета, так как для получения трех этих цветов не требуется смешивать другие цвета. Если требуется перевести эти цвета в цвета Web, то можно воссоздать их с помощью шестнадцатеричных эквивалентов #ff0000, #ffff00, и #0033cc, как показано на рисунке 8.1:
Рис. 8.1. Первичные и вторичные цвета, и их шестнадцатеричные эквиваленты
Вторичные цвета смешиваются из первичных цветов следующим образом:
Красный + Желтый = Оранжевый (#ff9900)
Желтый + Синий = Зеленый (#00cc00)
Синий + Красный = Фиолетовый (#660099)
Третичные цвета смешиваются из вторичных цветов, и они находятся между первичными и вторичными цветами, показанными на цветовом круге выше. Хотя цвета Web отличаются от обычных цветов "художников", может быть полезно держать под рукой цветовой круг (http://colorwheelco.com/) (как показано на рисунке 8.2) во время изучения различных цветовых схем. Кроме того, цветовой круг покажет все оттенки, тональности и тени, так что вы начнете понимать имеющиеся цветовые возможности. В дальнейшем будем придерживаться следующей терминологии:
Оттенок (Tint) - Результат смешивания цвета с белым цветом
Тональность (Tone) - Результат смешивания цвета с серым цветом
Тень (Shade) - Результат смешивания цвета с черным цветом
Рис. 8.2. Реальный цветовой круг
Стрелки на рисунке 8.2 показывают примеры этих понятий следующим образом:
Самая внешняя полоса - третичный желто-оранжевый цвет (желтый + оранжевый)
Вторая полоса - оттенок третичного цвета (добавлен белый)
Третья полоса - тональность цвета (добавлен серый)
Самая внутренняя полоса - тень на цветовом круге (добавлен черный)
Как можно видеть на показанном выше цветовом круге, количество добавленного к цвету белого, серого и черного минимально — только чтобы изменить исходный цвет и создать так называемую монохроматическую цветовую схему.