Именованные цвета в CSS

Цвета в CSS можно задавать не только в форматах RGB, HEX или HSL, но и с помощью именованных цветов. Такие названия, как red, limegreen, blue или rebeccapurple, упрощают стилизацию, делая код более читаемым и интуитивным. Этот подход особенно полезен для быстрого прототипирования и учебных проектов.

Именованные цвета были введены в спецификации CSS1 (1996 год) и основаны на палитре X11, используемой в оконной системе UNIX. Названия вроде aliceblue, papayawhip или moccasin пришли именно из этой палитры. В CSS Color Level 4 (2022 год) стандарт закрепил 147 именованных цветов, включая transparent и currentcolor. Эти цвета поддерживаются во всех современных браузерах и могут использоваться для задания фона, текста, границ, теней и других свойств.

Простой пример

div {
  background-color: limegreen;
  color: white;
}

В данном примере элементу div задаётся ярко-зелёный фон и белый текст. Такой подход упрощает начальную стилизацию, особенно когда точные оттенки не критичны.

Все именованные цвета

Все именованные цвета — это очень-очень длинная таблица, поэтому разверните её, если нужно.

Преимущества читаемости

Именованные цвета делают код более понятным, особенно для начинающих разработчиков:

button {
  background-color: tomato;
  border: 2px solid darkgray;
  color: white;
}

Название tomato сразу указывает на красно-оранжевый оттенок, тогда как HEX-код #ff6347 требует проверки в палитре.

Менее интуитивные названия

Некоторые имена цветов могут быть неожиданными:

• rebeccapurple (#663399) — цвет, добавленный в CSS в честь Ребекки Мейер, дочери Эрика Мейера, известного специалиста по веб-стандартам.
• papayawhip и peachpuff — пастельные оттенки, менее распространённые в современных интерфейсах, но доступные для декоративных решений.
• slategray и lightsteelblue — названия, заимствованные из палитры X11, часто используемые для нейтральных тонов.

.fun-box {
  background-color: rebeccapurple;
  color: papayawhip;
  border: 3px solid peachpuff;
}

Когда использовать именованные цвета

Именованные цвета оптимальны для:

• быстрого создания прототипов интерфейсов;
• учебных проектов, где важна читаемость и простота кода;
• декоративных решений, не связанных с жёсткими бренд-гайдами.

Однако в проектах, требующих точного соответствия фирменным цветам или поддержки альфа-канала (прозрачности), предпочтительнее использовать HEX, RGB или HSL. Кроме того, именованные цвета не интегрируются с CSS-переменными (--custom-color), что может быть ограничением в крупных проектах.

Именованные цвета не поддерживают настройку прозрачности (в отличие от rgba() или hsla()) и могут быть менее гибкими в системах дизайна. Также стоит учитывать, что в редких случаях старые браузеры (до 2015 года) могут некорректно обрабатывать некоторые имена, хотя это не актуально для современных приложений. В CSS Color Level 5 и новее могут появляться дополнительные цвета или улучшенные механизмы их использования.

Именованные цвета в CSS — это удобный инструмент с богатой историей, который остаётся актуальным для быстрой стилизации и прототипирования. Они не заменяют современные форматы задания цветов, такие как HSL или CSS-переменные, но эффективно дополняют их, особенно в комбинации с продуманными дизайн-системами.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.