Color
The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentColor value. currentColor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.
For an overview of using color in HTML, see Applying color to HTML elements using CSS.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The CSS data type represents a color. A may also include an alpha-channel transparency value, indicating how the color should composite with its background. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS type | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
body {
color: #333333;
}
a {
color: oklch(0.5 0.2 240);
}Live demo
Use cases
-
Text hierarchy
Differentiate headings, body text, metadata, and muted content with consistent foreground colors.
-
State support
Use color as one layer of meaning for links, alerts, and status messaging.
Cautions
- Foreground color alone should not carry important meaning without supporting labels or iconography.
- Theme systems need deliberate token choices so color changes stay coherent across components.
Accessibility
- Check contrast for all text sizes and states, especially muted copy and interactive controls.