The <color> CSS data type represents a color value that can be applied to various visual aspects of elements, such as text, borders, backgrounds, and shadows. It is one of the most commonly used data types in CSS because it defines how elements appear visually and how they interact with other content on a page. Colors can be expressed in multiple ways, including named colors like red or blue, hexadecimal values such as #ff0000, functional notations like rgb(), rgba(), hsl(), and hsla(), and even modern formats like lab() or lch(). Using the <color> data type effectively allows designers and developers to convey visual hierarchy, emphasis, and thematic consistency throughout a web page.

One key aspect of the <color> data type is its flexibility in combining with opacity and transparency. For instance, the rgba() and hsla() notations allow you to set an alpha channel to make a color partially transparent, which can be useful when layering elements or creating overlays. Many CSS properties accept values, including color, background-color, border-color, and box-shadow. This makes it a versatile type for both text styling and box model effects.

The <color> data type also interacts with other CSS data types, such as <length> in gradients and shadows. Gradients, for example, can transition smoothly between multiple <color> values, enabling visually appealing backgrounds without using images. Additionally, the <color> type is integral in dynamic styling, including CSS variables and animations, allowing developers to create responsive designs that adapt to user interaction or theme changes.

Examples:

/* Named color */
p {
  color: red;
}

/* Hexadecimal color */
h1 {
  color: #1e90ff;
}

/* RGB with transparency */
div {
  background-color: rgba(255, 0, 0, 0.5);
}

/* HSL color */
span {
  color: hsl(120, 100%, 50%);
}

/* Gradient using multiple colors */
header {
  background: linear-gradient(to right, red, blue, yellow);
}

This data type forms the backbone of CSS styling for visual elements, providing precise control over how elements appear and interact with other parts of a web page.

property: <color>
where
<color> = <hex-color> | <named-color> | currentcolor | transparent
          <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> |
          <lab()> | <lch()> | <gray()> |
          <color()> | <device-cmyk()> |
          <system-color>

• <hex-color>You can use hexadecimal values to specify the color. There are a variety of formats that can be used to define hex colors, they are: 3 digits, 6 digits, 4 digits and 8 digits.
  Syntax: #RGB, #RRGGBB, #RGBA, #RRGGBBAA (Where 'A' stands for alpha transparency.)
• <named-color>CSS defines a large set of named colors, so that common colors can be written and read more easily. Click CSS Color Names to view the range of named-colors.
• currentcolorThe currentColor keyword matches the value of the color property for the current item. This allows you to use a color value for properties that do not receive it by default.
• transparentThe transparent keyword represents a fully transparent color. This makes the background behind the colored item completely visible.
• <rgb()>This function accepts a comma-separated list of three values - providing the red, green, and blue hues respectively. Each of the three values can be provided as an integer or as a percentage. The integer value 255 corresponds with a percentage value of 100%.
• <rgba()>This works the same as the rgb() function, except it uses a fourth value to set the alpha transparency.
• <hsl()>This function allows you to specify a color value by specifying the hue, saturation, and light components of the color.
• <hsla()>This works the same as the hsl() function, except it uses a fourth value to set the alpha transparency.
• <hwb()>This function allows you to specify a color value by specifying the hue, whiteness (as a percentage) and blackness (as a percentage). 0% is no whiteness or blackness and 100% is fully white and black.
• <lab()>This function is as follows: The first argument specifies the CIE Lightness. This is typically a number between 0% (representing black) and 100% (representing white). The second and third arguments are the distances along the "a" and "b" axises in the Lab colorspace, these values are signed (allow both positive and negative values) and theoretically unbounded (but in practice do not exceed ±160).
• <lch()>This function is as follows: The first argument specifies the CIE Lightness, interpreted identically to the Lightness argument of lab(). The second argument is the chroma (roughly representing the "amount of color"). Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed 230). The third argument is the hue angle.
• <gray()>
• <color()>
• <device-cmyk()>
• <system-color>

The following information will show you the current browser support for the CSS color data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.

This data type is supported by all modern browsers.

Desktop

Tablets & Mobile