Цвета в HTML и CSS¶
Цвета HTML — это способы задания цвета элементов веб-страницы средствами языка гипертекстовой разметки HTML и связанных с ним технологий, прежде всего каскадных таблиц стилей (CSS). Цвет в веб-документе описывается формальными моделями, которые преобразуются браузером в значения для устройств вывода — мониторов, принтеров, экранов мобильных устройств. Система цветов HTML не является самостоятельным стандартом: она определяется спецификациями Консорциума Всемирной паутины (W3C) в рамках CSS Color Module и исторически связана с ранними версиями HTML.
¶Историческая справка
Возможность задавать цвет появилась уже в первых версиях HTML начала 1990-х годов. Атрибуты bgcolor, text, link, vlink и alink тега <body> позволяли указывать цвета фона, текста и гиперссылок. Значения задавались либо шестнадцатеричным кодом, либо одним из 16 базовых имён (black, white, red, green, blue, yellow, aqua, fuchsia, lime, maroon, navy, olive, purple, silver, teal, gray), унаследованных от стандартной палитры операционной системы Windows.
По мере развития CSS управление цветом перешло к таблицам стилей, а презентационные атрибуты HTML были объявлены устаревшими. В CSS1 (1996) появились свойства color, background-color и функция rgb(). CSS2 добавила системные цвета, CSS3 — модель HSL, альфа-канал и функцию rgba(). Современный уровень CSS Color Module Level 4 и Level 5 расширил набор моделей (LAB, LCH, OKLCH) и ввёл поддержку широкого цветового охвата.
¶Способы задания цвета
¶Именованные цвета
Спецификация CSS определяет 140 именованных цветов, включая 16 базовых. Имена вроде crimson, tomato, steelblue, rebeccapurple удобны для чтения кода, но ограничены фиксированным набором. Значения нечувствительны к регистру.
¶Шестнадцатеричная запись
Наиболее распространённый формат — #RRGGBB, где каждая пара символов задаёт интенсивность красного, зелёного и синего каналов в диапазоне от 00 до FF (0–255 в десятичной системе). Сокращённая форма #RGB дублирует каждый символ: #f00 эквивалентно #ff0000. Восьмизначная запись #RRGGBBAA добавляет альфа-канал.
¶Функциональные модели
| Функция | Пример | Описание |
|---|---|---|
rgb() | rgb(255, 0, 0) | Красный, зелёный, синий (0–255) |
rgba() | rgba(255, 0, 0, 0.5) | То же с прозрачностью 0–1 |
hsl() | hsl(0, 100%, 50%) | Тон, насыщенность, светлота |
hsla() | hsla(0, 100%, 50%, 0.5) | HSL с альфа-каналом |
oklch() | oklch(0.7 0.15 30) | Перцептивно равномерная модель |
Модель HSL интуитивнее для дизайнеров: тон задаётся углом на цветовом круге (0–360°), насыщенность и светлота — процентами.
¶Ключевое слово transparent
Значение transparent соответствует полностью прозрачному цвету и эквивалентно rgba(0, 0, 0, 0).
¶Цветовые модели и их связь
RGB — аддитивная модель, в которой смешение красного, зелёного и синего даёт белый цвет; применяется в излучающих устройствах. CMYK — субтрактивная модель для печати. При выводе веб-страницы на печать браузер выполняет преобразование цветовых пространств, при этом часть оттенков может выходить за пределы охвата принтера.
HSL и HSV — производные от RGB представления, удобные для ручного подбора. Модели LAB, LCH и OKLCH разработаны для перцептивной равномерности: одинаковые числовые изменения воспринимаются глазом как одинаковые.
¶Прозрачность и наложение
Альфа-канал задаёт степень непрозрачности элемента. Значение 0 — полная прозрачность, 1 — полная непрозрачность. При наложении полупрозрачных слоёв браузер выполняет альфа-композитинг: итоговый цвет вычисляется как взвешенная смесь цвета переднего плана и фона. Отдельное свойство opacity действует на элемент целиком, включая дочерние узлы, тогда как альфа-канал в rgba() влияет только на конкретное значение цвета.
¶Наследование и каскад
Свойство color наследуется дочерними элементами, background-color — нет. Значение currentColor позволяет ссылаться на текущий цвет текста, что упрощает оформление границ и иконок. Каскад и специфичность определяют, какое из конкурирующих правил применится к элементу.
¶Доступность и контраст
Руководство по доступности веб-контента (WCAG) устанавливает минимальные требования к контрасту текста и фона. Для обычного текста рекомендуется соотношение не ниже 4,5:1, для крупного — 3:1. Контраст вычисляется по относительной яркости цветов, определяемой через линеаризацию значений sRGB. Недостаточный контраст затрудняет чтение для людей с нарушениями зрения и при ярком внешнем освещении.
¶Цветовые схемы
Свойство color-scheme сообщает браузеру о поддержке светлой или тёмной темы. Медиазапрос prefers-color-scheme позволяет применять разные наборы цветов в зависимости от системных настроек пользователя. CSS-переменные (пользовательские свойства) дают возможность централизованно хранить палитру и переключать её без дублирования правил.
¶Практические замечания
Разные браузеры и операционные системы могут отображать один и тот же код с небольшими отклонениями из-за цветовых профилей монитора. Для критичных к точности задач применяют управление цветом и профили ICC. Широкий охват (Display P3) поддерживается современными дисплеями, но требует явного указания цветового пространства в CSS.
При указании цвета без явного пространства браузер использует sRGB — исторический стандарт веба, обеспечивающий предсказуемость отображения на большинстве устройств.
Источники: спецификации W3C CSS Color Module Level 3–5, документация MDN Web Docs, руководство WCAG 2.2, материалы по истории HTML.