CSS/Properties/color
< CSS | Properties
color
The color property describes the foreground color of an element's text content.
Description
| Values | <color value> | <color keyword> | currentColor | transparent | inherit |
|---|---|
| Initial value | Depends on user agent. HTML5 indicates that the initial value for the 'color' property is expected to be black, but users can easily change it in their user agent settings. |
| Applies to | All elements |
| Inherited | Yes |
Values
<color value>
The color can be specified as- a hexadecimal RGB value: #faf or #ffaaff
- a RGB value: rgb(255, 160, 255) or rgb(100%, 62.5%, 100%)
Each value is from 0 to 255, or from 0% to 100%. - a RGBA value: rgba(255, 160, 255, 1) or rgba(100%, 62.5%, 100%, 1)
This variant includes an “alpha” component to allow specification of the opacity of a color. Values are in the range 0.0 (fully transparent) to 1.0 (fully opaque). - a HSL value: hsl(0, 100%, 50%)
A triple (hue, saturation, lightness). hue is an angle in degrees. saturation and lightness are percentages (0-100%). - a HSLA value: hsla(0, 100%, 50%, 1)
This variant includes an “alpha” component to allow specification of the opacity of a color. Values are in the range 0.0 (fully transparent) to 1.0 (fully opaque).
<color keyword>
One of the pre-defined color keywords.
currentColor
Same as ‘inherit’.
transparent
Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.
inherit
Takes the same specified value as the property for the element's parent.
Example
Example A
[style.css]
body {
color: #fff;
background-color: #666;
}
[index.html]
<body>
<h1>CSS color property example</h1>
</body>
Considerations
Separating foreground from background
In order to make it easier for users to see and hear content including separating foreground from background, [WCAG] indicates the following:
- color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. [Guideline 1.4.1] (Level A)
- The visual presentation of text and images of text has a minimum contrast ratio of at least 4.5:1, with some exceptions. [Contrast Minimum Guideline 1.4.3] (Level AA)
- The visual presentation of text and images of text has an enhanced contrast ratio of at least 7:1 [Guideline 1.4.6] (Level AAA)
CSS Reference
CSS defines the color property in CSS Color, 3.1. Foreground color: the ‘color’ property.