<color>
The <color>
CSS data type represents a color.
A <color>
may also include an alpha-channel transparency value, indicating how the color should composite with its background.
Note: Although <color>
values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' color profiles.
Syntax
css
/* Named colors */
rebeccapurple
aliceblue
/* RGB Hexadecimal */
#f09
#ff0099
/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)
/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 0.8)
/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)
/* LAB (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)
/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)
/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)
/* Oklch (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)
A <color>
value can be specified using one of the methods listed below:
- By keywords:
<named-color>
(such asblue
orpink
),<system-color>
, andcurrentcolor
. - By hexadecimal notations:
<hex-color>
(such as#ff0000
). - By parameters in a color space using functional notations:
- By mixing two colors:
color-mix()
.
currentcolor keyword
The currentcolor
keyword represents the value of an element's color
property. This lets you use the color
value on properties that do not receive it by default.
If currentcolor
is used as the value of the color
property, it instead takes its value from the inherited value of the color
property.
html
<div style="color: blue; border: 1px dashed currentcolor;">
The color of this text is blue.
<div style="background: currentcolor; height:9px;"></div>
This block is surrounded by a blue border.
</div>
Interpolation
Color interpolation happens with gradients, transitions, and animations.
When interpolating <color>
values, they are first converted to a given color space, and then each component of the computed values are interpolated linearly, with interpolation's speed being determined by the timing function in transitions and animations. The interpolation color space defaults to Oklab, but can be overriden through <color-interpolation-method>
in some color-related functional notations.
Accessibility considerations
Some people have difficulty distinguishing colors. The WCAG 2.2 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See color and color contrast for more information.
Formal syntax
<color> =
<absolute-color-base> |
currentcolor |
<system-color>
<absolute-color-base> =
<hex-color> |
<absolute-color-function> |
<named-color> |
transparent
<absolute-color-function> =
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<alpha-value> =
<number> |
<percentage>
<hue> =
<number> |
<angle>
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
Examples
Color value tester
In this example we provide a <div>
and a text input. Entering a valid color into the input causes the <div>
to adopt that color, allowing you to test our color values.
HTML
html
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />
Result
Fully saturated sRGB colors
This example shows fully saturated sRGB colors in the sRGB color space.
HTML
html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
css
div:nth-child(1) {
background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
background-color: hsl(330 100% 50%);
}
Result
Reds of different shades
This example shows reds of different shades in the sRGB color space.
HTML
html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
css
div:nth-child(1) {
background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
background-color: hsl(0 100% 100%);
border: solid;
}
Result
Reds of different saturations
This example shows reds of different saturations in the sRGB color space.
HTML
html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
css
div:nth-child(1) {
background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
background-color: hsl(0 100% 50%);
}
Result
Specifications
Specification |
---|
CSS Color Module Level 4 # color-syntax |
Browser compatibility
BCD tables only load in the browser
See also
opacity
: the property defining transparency at the element level<hue>
: the data type representing the hue angle of a colorcolor
,background-color
,border-color
,box-shadow
,outline-color
,text-shadow
: common properties that use<color>
- Applying color to HTML elements using CSS
- New functions, gradients, and hues in CSS colors (Level 4) on MDN blog (2023)