Color
The color property sets the foreground color of text and influences some related painting behavior. It is one of the most visible styling choices in any interface.
Overview
The color property sets the foreground color of text and influences some related painting behavior. It is one of the most visible styling choices in any interface.
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.
Related links
Powered by web-features