CSS <color> Data Type

Description

The <color> CSS data type sets the color in css properties and styles, it can be set in a variety of different ways: by hexadecimal value, by name and in the formats RGB, RGBA, HSL, HSLA.

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

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

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); 
}

Browser Support

Desktop
3	12	1	1	3.5	1
Tablets / Mobile
1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 8th December 2019