`<named-color>` тип CSS

<named-color> CSS — это тип данных, представляющий собой название цвета, например red, blue, black или lightseagreen. Синтаксически <named-color> является <ident>.

Значение <named-color> можно использовать везде, где можно использовать color.

Синтаксис

color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

Значение

Именованные цвета включают стандартные цвета, ключевые слова transparent и currentColor.

Стандартные цвета

Основные цвета имеют стандартные, легко запоминающиеся названия:

Помимо этих 16 цветов, ещё около 150 цветов имеют соответствующее ключевое слово:

Изначально в CSS уровня 1 были определены только 16 основных цветов; в CSS уровня 2 к ним добавили orange. Веб-дизайнеры сочли этот список слишком коротким, и разработчики браузеров добавили множество названий цветов на основе названий цветов X11. В SVG 1, а затем в CSS Colors уровня 3 эти названия были стандартизированы, формально определены и приведены к единому виду (некоторые из них имели разные варианты написания, которые теперь считаются псевдонимами). Их называют расширенными ключевыми словами цветов, цветами X11 или цветами SVG.

В CSS Colors уровня 4 был добавлен ещё один цвет — rebeccapurple — в честь пионера веба Эрика Мейера.

transparent

Ключевое слово transparent обозначает полностью прозрачный цвет. Это позволяет видеть фон позади окрашенного элемента. Технически transparent — это сокращение для rgb(0 0 0 / 0%).

Чтобы избежать неожиданного поведения, например в <gradient>, текущая спецификация CSS указывает, что transparent следует вычислять в цветовом пространстве с предварительно умноженной альфа-компонентой. Однако имейте в виду, что старые браузеры могут интерпретировать это значение как чёрный цвет с альфа-значением 0.

В CSS уровня 2 (редакция 1) ключевое слово transparent не являлось настоящим цветом. Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: background и border. По сути, оно было добавлено, чтобы позволить разработчикам переопределять унаследованный сплошной цвет. С появлением альфа-каналов в CSS Colors уровня 3 transparent было переопределено как настоящий цвет. Теперь его можно использовать везде, где можно использовать значение <color>.

Описание

Все названия задают цвет в цветовом пространстве sRGB. Хотя названия в той или иной степени описывают соответствующие цвета, по сути, они условны и не имеют строгого обоснования.

Все ключевые слова цветов обозначают обычные сплошные цвета без прозрачности.

Некоторые ключевые слова являются псевдонимами друг друга:

• aqua / cyan
• fuchsia / magenta
• darkgray / darkgrey
• darkslategray / darkslategrey
• dimgray / dimgrey
• lightgray / lightgrey
• lightslategray / lightslategrey
• gray / grey
• slategray / slategrey

Хотя многие ключевые слова были заимствованы из X11, их значения RGB могут отличаться от значений соответствующих цветов в системах X11, поскольку производители иногда адаптируют цвета X11 под конкретное оборудование.

Примеры

Использование именованных цветов

HTML

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

CSS

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• color: тип данных, в определении которого <named-color> является составной частью.