CSS <color> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS <color> data type represents a color. It can be used to set the color of text, backgrounds, borders, and other CSS properties.

There are several different ways to specify a <color> value in CSS:

Named colors: These are predefined colors with names such as red, blue, green, and yellow.
Hexadecimal colors: These are colors specified using a six-digit hexadecimal code, such as #ffffff for white and #000000 for black.
RGB and RGBA colors: These are colors specified using the rgb() and rgba() functions, respectively. The rgb() function takes three arguments, representing the red, green, and blue components of the color. The rgba() function takes four arguments, including an alpha channel value that specifies the transparency of the color.
HSL and HSLA colors: These are colors specified using the hsl() and hsla() functions, respectively. The hsl() function takes three arguments: hue, saturation, and lightness. The hsla() function takes four arguments, including an alpha channel value.
Other color spaces: CSS also supports other color spaces, such as CIELAB and Oklab. These color spaces can be used to specify colors more precisely than the RGB and HSL color spaces, but they are not as widely supported by browsers.

To use a <color> value in CSS, simply set the property you want to change to the desired color. For example, to set the text color of a paragraph element to red, you would use the following CSS:

p {
  color: red;
}

You can also use <color> values in CSS functions. For example, the background-image property can be used to set the background image of an element to a gradient. Gradients are made up of two or more colors that blend together. To specify a gradient using the background-image property, you would use the linear-gradient() function. The linear-gradient() function takes two or more color arguments, as well as other options such as the direction of the gradient.

For example, the following CSS would create a background gradient that goes from red to yellow:

body {
  background-image: linear-gradient(to right, red, yellow);
}

The CSS <color> data type is a powerful tool for styling web pages. By understanding how to use <color> values, you can create beautiful and engaging websites.

Syntax

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

Values

<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>

Example

HTML

<h2>Color Example</h2> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.!</p> <div>End Example</div>

CSS

body { 
   background-color: #F9F2E3; 
} 
h2 { 
   background-color: rgb(214,86,43); 
   color: rgba(255,255,255,0.9); 
   padding: 10px; 
} 
p { 
   color: green; 
} 
div { 
   background-color: hsl(60,100%,25%); 
   color: hsla(120,100%,50%,0.5); 
}

Result

Editor