<hex-color>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The <hex-color> CSS data type is a notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency.

A <hex-color> value can be used everywhere where a <color> can be used.

Syntax

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

Value

R or RR: The red component of the color, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: 1 means 11.
G or GG: The green component of the color, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: c means cc.
B or BB: The blue component of the color, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: 9 means 99.
A or AA Optional: The alpha component of the color, indicating its transparency, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: e means ee. 0, or 00, represents a fully transparent color, and f, or ff, a fully opaque one.

Note: The syntax is case-insensitive: #00ff00 is the same as #00FF00.

Examples

Hexadecimal hot pink

This example includes four hot pink squares, with fully opaque or semi-transparent backgrounds created using four different-length case-insensitive hex-color syntaxes.

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

The hot pink background colors are created using the three-, four-, six-, and eight-value hex notations, using both uppercase and lowercase letters.

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

Result

Specifications

Specification
CSS Color Module Level 4 # hex-notation

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on 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