Семь цветов страницы

Введение

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

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

Первые ласточки

Первая пара цветов — это цвета основного текста страницы(цвет фона Ц1 и цвет текста Ц2). Без них — никуда. Даже в самой простой странице они присутствуют. Естественно, для комфортного чтения текста, цвета должны быть контрастны по отношению друг к другу. Обозначив операцию контрастности К , получаем: Ц2 K Ц1 (1).

Дело вкуса каждого, но лично я предпочитаю Ц1 более светлым, чем Ц2. А все из-за школьной привычки писать чем-нибудь темным по белой бумаге... И, наверное, из-за того, что я не застал «черно-зеленых» мониторов...

Тройка ссылок

Словно три богатыря, три мушкетера, три танкиста и трое в лодке (не считая собак) ссылки в своих трех состояниях неразрывно связаны друг с другом:

• «Ссылка, просто ссылка» (Link) представляет собой ссылку в первозданном состоянии. По умолчанию обычно бывает ярко-синего цвета #0000FF.
• Посещенная ссылка (Visited link) является ссылкой, на которую уже нажали, пусть даже и случайно. Для удобства пользователя, ссылка меняет свой цвет. По умолчанию это сиреневый #800080. В отличие от еще не посещенной, данной ссылке ни к чему яркость, куда теперь спешить-то?
• Активная ссылка (Active link) — cсылка на момент перехода от Link к Visited link, которую сейчас нажимают. Поэтому обычно она красная, как #FF0000.

Обозвав цвета ссылок, соответственно, Ц3, Ц4, Ц5 , делаем для них правило: Ц3,Ц4,Ц5 K Ц1 (2). Ссылки должны четко выделяться на фоне Ц1 и отличаться от цвета текста Ц2 (но не настолько, чтобы затруднить чтение текста). Забегая вперед, уточню, что описанные выше ссылки находятся внутри основного текста, в отличие от навигационных ссылок.

Последние, но не по значению

Пяти описанных цветов достаточно для создания страницы в «академическом» стиле. Однако, для страницы в других стилях потребуется еще 2 цвета: Ц6 и Ц7. Вкратце, Ц6 — это дополнительный цвет фона (плюс к Ц1), а Ц7 — дополнительный цвет текста (плюс к Ц2). Эти цвета контрастны друг к другу, то есть: Ц6 K Ц7 (3).

Ц6 , Ц7 нужны для выделения заголовков, шапки, подвала, в качестве альтернативного цвета текста, границ, линий, других оформительских элементах. Ц7 используется в качестве цвета текста для фона Ц6. В случае, при котором основной текст (цвет Ц2 по фону Ц1) заключен в некий контейнер (с границами цвета Ц7 или без границ), цвет Ц6 можно использовать в качестве подложки для контейнера.

Цвета Ц6, Ц7 и Ц1 можно применять для навигационных ссылок. Данные ссылки используются для навигации страницы и расположены в навигационном блоке или в основном тексте. Так как текстовые навигационные ссылки являются заменой/дополнением графических навигационных ссылок, — эффект посещенных ссылок у них отсутствует. Зато часто применяется эффект hover (эмуляция графических ссылок), при котором требуется два цвета текста — основной и выделенный. Цветов Ц6, Ц7 и Ц1 вполне достаточно, при условии, что хотя бы один из цветов Ц1, Ц7 (а лучше оба) контрастирует с Ц1: Ц6 K Ц1 || Ц7 K Ц1 (4), где «||» — операция «или».

Заключение

Итак, были сформированы следующие правила:

1. Ц2 K Ц1
2. Ц3,Ц4,Ц5 K Ц1
3. Ц6 K Ц7
4. Ц6 K Ц1 || Ц7 K Ц1

Как видно, практически все цвета контрастируют с цветом основного фона Ц1, поэтому желательно выбирать его ближе к краю палитры (белому или черному). Цвет Ц2 можно выбрать ближе к противоположному краю, относительно Ц1; остальные цвета — между Ц1 и Ц2.

Конечно, описанная семерка цветов — не догма, и каждый веб-мастер вправе создавать свои правила. Жизнь часто бывает сложнее теории и семи цветами бывает не обойтись, в этом случае можно добавить оттенок уже использованного цвета. Самое главное, вовремя остановиться.