Введение

Цвета, используемые при проектировании веб-страниц.

Веб-цвета – это цвета, используемые для отображения веб-страниц в World Wide Web. Они могут быть описаны тремя способами: цвет может быть задан как RGB-триплет, в шестнадцатеричном формате (шестнадцатеричный триплет) или, в некоторых случаях, по его общепринятому английскому названию. Для генерации цветовых значений часто используются инструменты для работы с цветом или другое графическое программное обеспечение. В некоторых случаях шестнадцатеричные цветовые коды указываются с использованием знака решётки (#) в начале. Цвет определяется интенсивностью его красного, зелёного и синего компонентов, каждый из которых представлен восемью битами. Таким образом, для указания веб-цвета в цветовом пространстве sRGB используется 24 бита, что позволяет задать 16 777 216 различных цветов. Цвета, выходящие за пределы гаммы sRGB, могут быть указаны в каскадных таблицах стилей (CSS), делая один или несколько из красного, зелёного и синего компонентов отрицательными или превышающими 100%, в результате чего цветовое пространство теоретически становится неограниченным расширением sRGB, аналогичным scRGB. Для указания цвета, не относящегося к sRGB, требуется функция RGB. Это невозможно при использовании шестнадцатеричного синтаксиса (и, следовательно, невозможно в устаревших HTML-документах, не использующих CSS). Первые версии Mosaic и Netscape Navigator использовали названия цветов X11 в качестве основы для своих цветовых списков, поскольку изначально обе программы были приложениями X Window System. Веб-цвета имеют однозначное колориметрическое определение – sRGB, которое связывает хроматичность конкретного набора люминофоров, заданную передаточную функцию, адаптивную белую точку и условия просмотра. Эти параметры были выбраны таким образом, чтобы соответствовать многим реальным мониторам и условиям просмотра, что позволяет добиться достаточно точного отображения цветов даже без управления цветом. Пользовательские агенты различаются по точности воспроизведения указанных цветов. Более продвинутые пользовательские агенты используют управление цветом для обеспечения лучшей цветопередачи, что особенно важно для веб-приложений, предназначенных для печати.

Скромная шестоудесятеричная форма

Можно использовать сокращенную форму с тремя (шестнадцатеричными) цифрами или четырьмя цифрами, но это может привести к ошибкам, если программное обеспечение или скрипты обслуживания ожидают только полную форму. Преобразование этой формы в шестизначную так же просто, как повторение каждой цифры: 09C становится 0099CC, как показано в следующем примере CSS:
threedigit { color: #09C; } sixdigit { color: #0099CC; } /* тот же цвет, что и выше */

Эта сокращенная форма уменьшает палитру до 4096 цветов, что эквивалентно 12-битному цвету, в отличие от 24-битного цвета при использовании полной шестизначной формы (16 777 216 цветов). Этого ограничения достаточно для многих текстовых документов.

Преобразование RGB в гексадецимальный

Значения RGB обычно задаются в диапазоне от 0 до 255; если они заданы в диапазоне от 0 до 1, то перед преобразованием значения умножаются на 255. Это число, разделенное на шестнадцать (целочисленное деление; остаток от деления игнорируется), дает первую шестнадцатеричную цифру (от 0 до F, где буквы от A до F представляют числа от 10 до 15. Подробнее о шестнадцатеричной системе можно узнать в соответствующей статье). Остаток от деления дает вторую шестнадцатеричную цифру. Например, значение RGB 58 делится на 3 группы по 16, следовательно, первая цифра равна 3. Остаток от деления равен десяти, что дает шестнадцатеричное число 3A. Аналогично, значение RGB 201 делится на 12 групп по 16, следовательно, первая цифра равна C. Остаток от деления равен девяти, что дает шестнадцатеричное число C9. Этот процесс повторяется для каждого из трех цветовых значений. Преобразование между системами счисления – распространенная функция калькуляторов, включая как портативные модели, так и программные калькуляторы, поставляемые с большинством современных операционных систем. Также доступны веб-инструменты, специально предназначенные для преобразования цветовых значений.

Имена цветов HTML

Недавние спецификации W3C по названиям цветов различают базовые и расширенные цвета. В HTML и XHTML цвета могут использоваться для текста, фона, границ фреймов, таблиц и отдельных ячеек таблиц.

Основные цвета

Основные цвета — это 16 цветов, определенных в спецификации HTML 4.01, утвержденной в 1999 году, а именно (названия в данном контексте нечувствительны к регистру):

Эти 16 цветов были обозначены как sRGB и включены в спецификацию HTML 3.0, где отмечалось, что они представляют собой "стандартный набор из 16 цветов, поддерживаемых палитрой Windows VGA".

Расширенные цвета

Расширенные цвета являются результатом объединения спецификаций HTML 4.01, CSS 2.0, SVG 1.0 и CSS3 пользовательских интерфейсов (CSS3 UI). Ниже представлен список веб-цветов "X11" из спецификации CSS3 с их шестнадцатеричными и десятичными эквивалентами. Сравните алфавитные списки в стандартах W3C. В этот список включены общепринятые синонимы: aqua (стандартное название в HTML4/CSS 1.0) и cyan (общепринятое название в sRGB), фуксия (стандартное название в HTML4/CSS 1.0) и маджента (общепринятое название в sRGB), gray (стандартное название в HTML4/CSS 1.0) и grey.

Выбор цвета

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

Цветовой контраст

Руководство по обеспечению доступности веб-контента рекомендует контрастность не менее 4,5:1 между относительной яркостью текста и цветом фона, или не менее 3:1 для крупного текста. Для улучшения доступности требуются значения контрастности выше 7:1. Однако обеспечение доступности – это не только вопрос увеличения контрастности. Как показано в отчете инициативы Web Accessibility Initiative, читателям с дислексией лучше подходят значения контрастности ниже максимальных. Рекомендованные ими сочетания – тёмно-серый (#0A0A0A) на почти белом (#FFFFE5) и чёрный (#000000) на кремовом (#FAFAC8) – имеют контрастность 11,7:1 и 20,3:1 соответственно. Среди других цветовых пар, коричневый (#282800) на тёмно-зелёном (#A0A000) имеет контрастность 3,24:1, что ниже рекомендованного значения WCAG, тёмно-коричневый (#1E1E00) на светло-зелёном (#B9B900) – 4,54:1, а синий (#00007D) на жёлтом (#FFFF00) – 11,4:1. Цвета, указанные в отчете, используют иные цветовые значения, чем веб-цвета с тем же названием.