`<hex-color>` тип CSS

<hex-color> — это CSS тип данных, представляющий собой запись шестнадцатеричного синтаксиса цвета для цвета sRGB с использованием его основных цветовых компонентов (красного, зелёного и синего), записанных в виде шестнадцатеричных чисел, а также его прозрачности.

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

Синтаксис

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax

Значение

R или RR

Красный компонент цвета в виде шестнадцатеричного числа без учёта регистра от 0 до ff (255). Если указана только одна цифра, она дублируется: 1 означает 11.

G или GG

Зелёный компонент цвета в виде шестнадцатеричного числа без учёта регистра от 0 до ff (255). Если указана только одна цифра, она дублируется: c означает cc.

B или BB

Синий компонент цвета в виде шестнадцатеричного числа без учёта регистра от 0 до ff (255). Если указана только одна цифра, она дублируется: 9 означает 99.

A или AA Необязательный

Альфа-компонент цвета, определяющий его прозрачность, в виде шестнадцатеричного числа без учёта регистра от 0 до ff (255). Если указана только одна цифра, она дублируется: e означает ee. 0 или 00 обозначает полностью прозрачный цвет, а f или ff — полностью непрозрачный.

Примеры

Шестнадцатеричная запись ярко-розового цвета

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

HTML

<div>
  #F09
  <div class="c1"></div>
</div>
<div>
  #f09a
  <div class="c2"></div>
</div>
<div>
  #ff0099
  <div class="c3"></div>
</div>
<div>
  #FF0099AA
  <div class="c4"></div>
</div>

CSS

Ярко-розовые цвета фона заданы с помощью трёх-, четырёх-, шести- и восьмизначной шестнадцатеричной записи, содержащей как заглавные, так и строчные буквы.

body {
  display: flex;
  justify-content: space-evenly;
  font-family: monospace;
}
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

[class] {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09a;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099aa;
}

Результат

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

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

См. также

• color — тип данных
• <named-color> — тип данных
• rgb() — функция цвета
• модуль CSS color