CSS <hex-color> Data Type

CSS <hex-color> Data Type

The CSS <hex-color> data type represents an sRGB color using hexadecimal notation. A hexadecimal color begins with a number sign (#) followed by three, four, six, or eight hexadecimal digits that define the red, green, blue, and optional alpha components of the color.

Syntax

A <hex-color> value can use three, four, six, or eight hexadecimal digits:

#RGB
#RGBA
#RRGGBB
#RRGGBBAA

The red, green, and blue components define the color. The optional alpha component defines its transparency.

Hexadecimal Digits

Hexadecimal notation uses the digits 0 through 9 and the letters A through F. Each two-digit color component can represent a value from 00 through FF, corresponding to decimal values from 0 through 255.

Hexadecimal letters are case-insensitive, so #0088CC and #0088cc represent the same color.

Six-digit Colors

The six-digit form uses two hexadecimal digits for each red, green, and blue component:

#RRGGBB

Three-digit Colors

The three-digit form is shorthand for a six-digit hexadecimal color. Each digit is duplicated to produce the corresponding two-digit component.

#08c = #0088cc
#f00 = #ff0000
#fff = #ffffff
#000 = #000000

For example, #08c expands to #0088cc.

Alpha Transparency

Four-digit and eight-digit hexadecimal colors include an alpha component that controls transparency. An alpha value of 00 is fully transparent, while FF is fully opaque.

#RGBA
#RRGGBBAA

The four-digit form expands in the same way as the three-digit form. For example, #08c8 expands to #0088cc88.

<hex-color> Example

The following examples use hexadecimal colors to set background colors with and without alpha transparency:

.opaque {
  background-color: #0088cc;
}
.semitransparent {
  background-color: #0088cc80;
}
.transparent {
  background-color: #0088cc00;
}

The eight-digit forms use the final two hexadecimal digits to specify the alpha component.

Related CSS Properties

The <hex-color> data type can be used wherever a CSS property accepts a <color> value, including:

• color
• background-color
• border-color
• outline-color
• text-decoration-color

Specifications

The <hex-color> data type is defined in the CSS Color Module Level 4 .