Гамма страницы
Какое минимальное количество цветов достаточно для создания цветовой гаммы страницы?
При этом должны соблюдаться условия выделения логических частей страницы (основной текст, заголовки, шапка, подвал) и контрастности ссылок и текста.
Их семь (7) и к цветам радуги они не имеют никакого отношения, просто так получилось.
При этом должны соблюдаться условия выделения логических частей страницы (основной текст, заголовки, шапка, подвал) и контрастности ссылок и текста.
Их семь (7) и к цветам радуги они не имеют никакого отношения, просто так получилось.
1) Первая пара цветов - это цвета основного текста страницы, цвет фона ЦФ и цвет текста ЦТ.
Даже в самой простой странице они присутствуют.
Естественно, для комфортного чтения текста, цвета должны быть контрастны по отношению друг к другу.
Обозначив операцию контрастности К , получаем: ЦТ K ЦФ (1).
Дело вкуса каждого, но лично я предпочитаю ЦФ более светлым, чем ЦТ.
А все из-за школьной привычки писать чем-нибудь темным по белой бумаге...
И, наверное, из-за того, что я не застал «черно-зеленых» мониторов...
2) Ссылки в своих трёх состояниях неразрывно связаны друг с другом:
* Ссылка a:link - просто ссылка - представляет собой ссылку в первозданном состоянии.
По умолчанию обычно бывает ярко-синего цвета #00F.
* Посещенная ссылка a:visited - является ссылкой, на которую уже нажали, пусть даже и случайно. Для удобства пользователя, ссылка меняет свой цвет. По умолчанию это сиреневый #808. В отличие от еще не посещенной, данной ссылке ни к чему яркость, куда теперь спешить-то?
* Активная ссылка a:active - ссылка на момент перехода от Link к Visited link, которую сейчас нажимают. Поэтому обычно она красная, как #F00.
Обозвав цвета ссылок, соответственно, ЦС, ЦВ, ЦА , делаем для них правило: ЦС,ЦВ,ЦА K ЦФ (2). Ссылки должны четко выделяться на фоне ЦФ и отличаться от цвета текста ЦТ (но не настолько, чтобы затруднить чтение текста). Забегая вперед, уточню, что описанные выше ссылки находятся внутри основного текста, в отличие от навигационных ссылок.
3) Пяти описанных цветов достаточно для создания страницы в «академическом» стиле.
Однако, для страницы в других стилях потребуется еще 2 цвета: ЦФ2 и ЦТ2.
Вкратце, ЦФ2 - это дополнительный цвет фона (плюс к ЦФ), а ЦТ2 - дополнительный цвет текста (плюс к ЦТ). Эти цвета контрастны друг к другу, то есть: ЦФ2 K ЦТ2 (3).
ЦФ2, ЦТ2 нужны для выделения заголовков, шапки, подвала, в качестве альтернативного цвета текста, границ, линий, других оформительских элементах. ЦТ2 используется в качестве цвета текста для фона ЦФ2.
В случае, при котором основной текст (цвет ЦТ по фону ЦФ) заключен в некий контейнер (с границами цвета ЦТ2 или без границ), цвет ЦФ2 можно использовать в качестве подложки для контейнера.
Цвета ЦФ2, ЦТ2 и ЦФ можно применять для навигационных ссылок. Данные ссылки используются для навигации страницы и расположены в навигационном блоке или в основном тексте. Так как текстовые навигационные ссылки являются заменой/дополнением графических навигационных ссылок, - эффект посещенных ссылок у них отсутствует. Зато часто применяется эффект hover (эмуляция графических ссылок), при котором требуется два цвета текста - основной и выделенный.
Цветов ЦФ2, ЦТ2 и ЦФ вполне достаточно, при условии, что хотя бы один из цветов ЦФ, ЦТ2 (а лучше оба) контрастирует с ЦФ: ЦФ2 K ЦФ || ЦТ2 K ЦФ (4), где «||» - операция «или» (OR).
Вкратце, ЦФ2 - это дополнительный цвет фона (плюс к ЦФ), а ЦТ2 - дополнительный цвет текста (плюс к ЦТ). Эти цвета контрастны друг к другу, то есть: ЦФ2 K ЦТ2 (3).
ЦФ2, ЦТ2 нужны для выделения заголовков, шапки, подвала, в качестве альтернативного цвета текста, границ, линий, других оформительских элементах. ЦТ2 используется в качестве цвета текста для фона ЦФ2.
В случае, при котором основной текст (цвет ЦТ по фону ЦФ) заключен в некий контейнер (с границами цвета ЦТ2 или без границ), цвет ЦФ2 можно использовать в качестве подложки для контейнера.
Цвета ЦФ2, ЦТ2 и ЦФ можно применять для навигационных ссылок. Данные ссылки используются для навигации страницы и расположены в навигационном блоке или в основном тексте. Так как текстовые навигационные ссылки являются заменой/дополнением графических навигационных ссылок, - эффект посещенных ссылок у них отсутствует. Зато часто применяется эффект hover (эмуляция графических ссылок), при котором требуется два цвета текста - основной и выделенный.
Цветов ЦФ2, ЦТ2 и ЦФ вполне достаточно, при условии, что хотя бы один из цветов ЦФ, ЦТ2 (а лучше оба) контрастирует с ЦФ: ЦФ2 K ЦФ || ЦТ2 K ЦФ (4), где «||» - операция «или» (OR).
Сформированы следующие правила:
ЦТ K ЦФЦС,ЦВ,ЦА K ЦФ
ЦФ2 K ЦТ2
ЦФ2 K ЦФ || ЦТ2 K ЦТ
Как видно, практически все цвета контрастируют с цветом основного фона ЦФ, поэтому желательно выбирать его ближе к краю палитры (белому или черному).
Цвет ЦТ можно выбрать ближе к противоположному краю, относительно ЦФ; остальные цвета - между ЦФ и ЦТ.
Конечно, описанная семерка цветов - не догма, и каждый веб-мастер вправе создавать свои правила. Жизнь часто бывает сложнее теории и семи цветами бывает не обойтись, в этом случае можно добавить оттенок уже использованного цвета. Самое главное, вовремя остановиться.
Конечно, описанная семерка цветов - не догма, и каждый веб-мастер вправе создавать свои правила. Жизнь часто бывает сложнее теории и семи цветами бывает не обойтись, в этом случае можно добавить оттенок уже использованного цвета. Самое главное, вовремя остановиться.
