<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
orRR
-
The red component of the color, as a case-insensitive hexadecimal number between
0
andff
(255). If there is only one number, it is duplicated:1
means11
. G
orGG
-
The green component of the color, as a case-insensitive hexadecimal number between
0
andff
(255). If there is only one number, it is duplicated:c
meanscc
. B
orBB
-
The blue component of the color, as a case-insensitive hexadecimal number between
0
andff
(255). If there is only one number, it is duplicated:9
means99
. A
orAA
Optional-
The alpha component of the color, indicating its transparency, as a case-insensitive hexadecimal number between
0
andff
(255). If there is only one number, it is duplicated:e
meansee
.0
, or00
, represents a fully transparent color, andf
, orff
, 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
BCD tables only load in the browser
See also
<color>
data type<named-color>
data-typergb()
color function- CSS color module