CSS <color> Data Type

CSS <color> Data Type

The CSS <color> data type represents a color value. Colors can be specified using keywords, hexadecimal notation, color functions, system colors, and other color formats supported by CSS.

<color> Values

CSS provides several ways to represent colors. The <color> data type can represent colors using predefined keywords, numeric notation, color functions, and values based on the user's system or other colors.

Named Colors

CSS defines named color keywords such as red, blue, green, white, and black. Named colors provide readable alternatives to numeric color values.

.example {
  color: blue;
}

Hexadecimal Colors

Hexadecimal color notation represents red, green, and blue channels using hexadecimal digits. An optional alpha channel can also specify transparency.

color: #0088cc;
color: #08c;
color: #0088cc80;
color: #08c8;

Color Functions

CSS color functions provide additional ways to define colors. Common functions include rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), and color().

rgb(0 136 204)
hsl(200 100% 40%)
hwb(200 0% 20%)
lab(53% -10 -45)
lch(53% 46 257)
oklab(60% -0.07 -0.13)
oklch(60% 0.15 245)
color(display-p3 0 0.5 0.8)

Modern CSS also provides functions that can calculate or modify colors, including color-mix(), light-dark(), and contrast-color(). The exact color syntax accepted by a property depends on the CSS specification and browser support for the particular color feature.

Special Color Keywords

The <color> data type also includes special keywords. The transparent keyword represents a fully transparent color, while currentColor uses the computed value of the element's color property.

border-color: currentColor;
background-color: transparent;

CSS also defines system color keywords whose values are determined by the user's operating system or browser environment. These colors can help user interface components adapt to system appearance and accessibility settings.

<color> Example

The following example uses the same blue color expressed with several CSS color formats:

.named {
  background-color: deepskyblue;
}
.hex {
  background-color: #00bfff;
}
.rgb {
  background-color: rgb(0 191 255);
}
.hsl {
  background-color: hsl(195 100% 50%);
}

Related CSS Properties

The <color> data type is used by many CSS properties, including:

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

Specifications

The <color> data type and CSS color syntax are defined in the CSS Color Module Level 4 and extended by later CSS Color specifications.