<hex-color>

Baseline Широко распространённый

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Тип данных <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, — полностью непрозрачный.

Примечание: Синтаксис нечувствителен к регистру: #00ff00 равно #00FF00.

Примеры

Шестнадцатеричный ярко-розовый

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

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

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

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

Результат

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

Спецификация
CSS Color Module Level 4 # hex-notation

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`hex-color`	1	12	1	3.5	1	18	4	10.1	1	1.0	≤37
`alpha_hexadecimal_notation`	62	79	49	49	10	62	49	47	9.3	8.0	62

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color