CSS <color> Data Type
The CSS <color>
data type represents a color value. It can be either a keyword or a numerical specification.
When you see <color>
(including the <
and >
) anywhere in the CSS specifications, this refers to the fact that the value can be any valid color data type.
So the spec might write it like this:
And your code could look like this:
Possible <color>
Values
A <color>
is either a keyword or a numerical specification. A valid color can be specified using any of the following.
- rgb()
-
Example:
rgb(255,0,0)
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 of100%
. - rgba()
-
Example:
rgb(255,0,0,0.5)
This works just like the rgb() function, except this function accepts a fourth value — the alpha channel.
- hsl()
-
Example:
hsla(0,100%,50%)
This function allows you to specify a color value by specifying the hue, saturation, and light components of the color.
- hsla()
-
Example:
hsla(0,100%,50%,.5)
Same as the hsl() function, except with a fourth value which represents the alpha channel.
- hwb()
-
Example:
hwb(30,50%,0%)
.This function allows you to specify a color value by specifying the hue, whiteness, and blackness components of the color, as well as an alpha value.
- gray()
-
Examples:
gray(50%)
,gray(50%, 0.8)
.This is a proposed function in CSS Color Module Level 4 that allows you to specify a shade of gray.
- device-cmyk()
-
Example:
device-cmyk(0, 81%, 81%, 30%)
.This is a proposed function in CSS Color Module Level 4 that allows you to specify colors by specifying the cyan, magenta, yellow, and black components. CMYK is the most common method of representing colors in printed media.
- color-mod()
-
This is a proposed function in CSS Color Module Level 4 that allows you to take a base color and modify it. This could be useful for creating color schemes based on an existing color.
- hex-color
-
Examples:
#ff9045
,#f8c
,#f94c011
,#f941
.You can use hexadecimal values to specify the color. This includes 6-digit hex values, 3-digit hex values, 8-digit hex values, and 4-digit hex values.
- named-color
-
Examples:
red
,blue
,limegreen
,goldenrod
, etc.CSS supports 147 named colors. Named colors are an easy to remember set of color names that can be used as an alternative to other the methods.
- currentColor
-
Example:
border-color: currentColor
.This keyword allows you to set a property to use the current color — whatever it is. It can save you from typing the same color multiple times throughout your style sheet, and you need only update it in one place.
- deprecated-system-color
-
Examples:
ButtonFace
,MenuText
,Scrollbar
, etc.CSS2 allowed authors to specify colors in a manner that integrated them into the user's graphic environment. So the spec allowed various system colors to be declared in the CSS. This has now been deprecated in CSS3.
Official Specification
The CSS Color Module Level 4 specification provides the following definition for <color>
:
This basically means that a <color>
can be any one of the color specifications listed above.
Examples of Valid <color>
Values
Here are some examples of valid colors:
So when the spec says that the background-color
property accepts a <color>
, any of the following declarations are valid:
Here's a working example: