Названия цветов CSS

Название цвета — это понятное человеку ключевое слово, например red, tomato или rebeccapurple, которое можно использовать везде, где CSS ожидает значение цвета, вместо числовой нотации вроде #FF0000 или rgb(255 0 0). Названия — самый простой способ указать цвет: они самодокументированы и не допускают опечаток, которые превратили бы значение в другой допустимый цвет, как это может произойти с HEX-кодами.

В этой главе перечислены все именованные цвета, объясняется, когда стоит использовать название вместо HEX или значения rgb(), а также рассматриваются специальные ключевые слова (transparent, currentColor), которых нет в таблице.

Использование названия цвета

Достаточно вставить ключевое слово в любое свойство цвета. Названия нечувствительны к регистру, поэтому Tomato, tomato и TOMATO — одно и то же:

h1 {
  color: tomato;
}

button {
  background-color: SeaGreen;
  border: 2px solid darkslategray;
}

Они взаимозаменяемы с форматами HEX и rgb() — color: tomato рисует те же самые пиксели, что color: #FF6347 или color: rgb(255 99 71). Используйте названия для удобочитаемости при разработке; обращайтесь к HEX, когда нужен точный фирменный цвет, у которого нет ключевого слова.

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

Все 147 названий цветов ниже поддерживаются каждым современным браузером. В каждой строке указано ключевое слово и его эквивалентное HEX-значение:

Как HEX-значения связаны с названиями

Каждое название в таблице — лишь сокращение для цвета RGB — смеси красного, зелёного и синего света. CSS записывает эту смесь в виде шестнадцатеричного (HEX) значения: символ # и шесть цифр, по два на каждый канал. Минимальное значение канала — 0 (hex 00), максимальное — 255 (hex FF).

#FF6347   →   FF = red 255   63 = green 99   47 = blue 71   →   "tomato"

HEX нечувствителен к регистру, поэтому #FFFFFF и #ffffff — один и тот же цвет (белый). Когда все три канала имеют одинаковые обе цифры, можно использовать трёхсимвольное сокращение — #FFF разворачивается в #FFFFFF, а #F00 — в #FF0000.

Знание этого соответствия полезно, когда дизайнерский инструмент выдаёт HEX-код, почти совпадающий с ключевым словом: замену на читаемое название можно делать только при точном совпадении значений.

Специальные ключевые слова цвета

Два ключевых слова ведут себя как названия цветов, но в таблице отсутствуют:

• transparent — полностью прозрачный цвет, эквивалентный rgba(0, 0, 0, 0). Используйте его, чтобы скрыть рамку или фон, не удаляя само свойство.
• currentColor — принимает текущее значение свойства color элемента. Удобно для автоматической синхронизации цвета рамки или заливки SVG с цветом текста.

.ghost-button {
  color: royalblue;
  background-color: transparent;
  border: 2px solid currentColor; /* follows the royalblue text color */
}

Связанные главы

• Свойство CSS color — задаёт цвет текста элемента.
• Свойство CSS background-color — заливает фон элемента.
• Цвета HTML — объяснение цветовых моделей RGB / HEX / HSL.

Практика