#<color>

The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.

A <color> can be defined in any of the following ways:

Using a keyword (such as blue or transparent). Using the RGB cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations). Using the HSL cylindrical-coordinate system (via the hsl() and hsla() functional notations).

#Syntax

The <color> data type is specified using one of the options listed below.

#Named Color

Named colors are case-insensitive identifiers that represent a specific color, such as red, blue, black, or lightseagreen.

#RGB Color Model

RGB colors can be expressed through both hexadecimal (prefixed with #) and functional (rgb(), rgba()) notations.

#Syntax

• hexadecimal: #RGB[A] or #RRGGBB[AA] R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ff. The three-digit notation (#RGB) is a shorter version of the six-digit form (#RRGGBB). For example, #f09 is the same color as #ff0099. Likewise, the four-digit RGB notation (#RGBA) is a shorter version of the eight-digit form (#RRGGBBAA). For example, #0f38 is the same color as #00ff3388.

• rgb() or rgba() R (red), G (green), and B (blue) can be either <number>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

#HSL Color Model

The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.

#Syntax

HSL colors are expressed through the functional hsl() and hsla() notations.

hsl() or hsla():hsl[a](H, S, L[, A])

• H (hue) is an <angle> of the color circle given in degs, rads, grads. When written as a unitless <number>, it is interpreted as degrees. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc.
• S (saturation) and L (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is "normal".
• A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

#Compatibility