Именованные цвета CSS: когда имя полезнее HEX

Именованный цвет — точное значение CSS

CSS Color 4 определяет большой набор именованных цветов. Браузер принимает идентификатор named-color везде, где разрешён цвет, и приводит его к стандартизированным каналам sRGB. Например, red точно равен #FF0000, blue — #0000FF, а rebeccapurple — #663399.

css

.notice {
  color: white;              /* #FFFFFF */
  background: rebeccapurple; /* #663399 */
  border-color: black;       /* #000000 */
}

Написание и регистр букв

Идентификаторы именованных цветов нечувствительны к регистру ASCII. red, RED и ReD дают одно значение. Составные имена пишутся одним идентификатором без пробелов и дефисов: например, cornflowerblue, darkslategray и lightgoldenrodyellow.

Используйте точный стандартизированный идентификатор: выдуманное brandblue не станет цветом без отдельного механизма.
В исходном коде лучше придерживаться нижнего регистра ради единообразного поиска и ревью.
Не переводите идентификатор: CSS использует white, а не русское слово для белого.
Длинное имя проверяйте по спецификации или детерминированному справочнику, а не собирайте по памяти.

css

.same-result {
  color: red;
  border-color: RED;
  outline-color: ReD;
}

Разные имена могут обозначать один цвет

В списке есть алиасы из старых палитр и варианты написания. aqua и cyan приводятся к #00FFFF. fuchsia и magenta — к #FF00FF. gray и grey равны #808080; варианты с gray и grey встречаются и в нескольких составных серых названиях.

aqua = cyan = #00FFFF
fuchsia = magenta = #FF00FF
gray = grey = #808080
darkgray = darkgrey = #A9A9A9
slategray = slategrey = #708090

Почему названия не образуют надёжную цветовую систему

Стандарт сохраняет имена, накопленные в истории VGA, HTML, X11 и SVG. Спецификация прямо предупреждает, что набор распределён неравномерно и внутренне несогласован. Слова работают как идентификаторы, но не являются упорядоченными координатами или профессионально выстроенной палитрой.

green равен #008000, а максимальный зелёный sRGB #00FF00 называется lime.
darkgray равен #A9A9A9 и светлее gray #808080, несмотря на приставку.
purple равен #800080, а rebeccapurple — другое значение #663399.
Похожие естественные названия не гарантируют равных шагов тона, насыщенности или светлоты.
Набор неравномерно покрывает sRGB и не выражает произвольные брендовые или широкогамутные Display P3 цвета.

Поэтому одно имя плохо документирует дизайнерское решение. Фиксируйте точное значение, рассчитывайте контраст по нему и сравнивайте итоговые каналы, а не предполагайте, что слова dark, light, pale или medium задают измеримую связь.

Когда имя делает код понятнее

Короткое знакомое слово может быть самым ясным вариантом, если нужен именно стандартный цвет, а код используется локально. black и white узнаются сразу. red, blue и lime удобны в демонстрациях синтаксиса CSS или при изоляции поведения браузера.

Используйте знакомые имена в минимальных примерах, где сам оттенок не является предметом теста.
Берите ключевое слово, если его стандартное значение прямо указано в требовании.
Имена подходят для временных отладочных рамок, которые не станут стилями продукта.
Для редкого ключевого слова подписывайте числовое значение, чтобы пример оставался проверяемым.

Когда понятнее HEX или семантическое custom property

Production-интерфейсу обычно нужна стабильная палитра с ролями текста, поверхности, действия, предупреждения и границы. Сырое цветовое слово не выражает эти роли, а менять каждое использование blue сложнее, чем один семантический токен. CSS custom properties позволяют создавать авторские имена с двумя дефисами и хранить в них проверенное значение цвета.

css

:root {
  --color-text: #111827;
  --color-surface: #FFFFFF;
  --color-action: #4F46E5;
  --color-warning: #B45309;
}

.button {
  color: var(--color-surface);
  background: var(--color-action);
}

Выбирайте HEX, когда на ревью важно видеть компактное точное значение sRGB.
Выбирайте rgb(), когда нужны явные каналы или читаемая прозрачность.
Помещайте любое значение в семантическое custom property, если роль используется во многих компонентах.
Не используйте red или green как единственный сигнал ошибки или успеха: всё ещё нужны текст, значок и доступный контраст.
Считайте имя токена семантикой продукта, а числовое значение — заменяемыми данными реализации.

Практический чек-лист именованного цвета

Проверьте, что слово присутствует в стандартизированной таблице named-color.
Найдите точные HEX- или RGB-каналы вместо оценки цвета по названию.
Проверьте наличие точного алиаса и храните одну каноническую ссылку.
Не выводите порядок цветов из приставок dark или light.
Помните, что непрозрачные именованные цвета приводятся к sRGB, а не к более широкой гамме.
Для поддерживаемой палитры продукта используйте семантические custom properties.
Рассчитывайте контраст по итоговому значению и реальному фону.
Отделяйте специальные значения transparent и currentcolor от таблицы непрозрачных имён.

Color Atlas следует этим правилам: хранит одну каноническую запись цвета и вычисляет его форматы и контраст. Стандартный алиас можно описать в этой записи, не создавая вторую почти одинаковую SEO-страницу.

Первоисточники

Фактические утверждения статьи проверены по этим опубликованным спецификациям.