Text Color Property
Last updated: 2026-09-13
color Text Color Property
The color property sets the foreground color of an element's text and is one of the most frequently used CSS properties. It accepts color keywords, hex values, RGB, HSL, and many other color formats. The property is inherited by child elements, so it is usually set on a parent to unify the color of a whole block of text.
| Category | |
|---|---|
| Initial Value | canvastext |
| Inherited | Yes |
| Applies To | all |
| Animation Type | color |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
color: <color>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<color> | Type | Text foreground color |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： The color property is inherited by children, so setting it on body unifies the default text color across the whole site.
Warning： Never convey information by color alone — color-blind users may not distinguish it. Pair color with text or icons.
❓ FAQ
QWhat color formats does the CSS color property support?
AIt supports color keywords (red, transparent), hex codes (#ff0000, #f00), rgb()/rgba(), and hsl()/hsla(). CSS Color 4 adds lch(), oklch(), and space-separated syntax like rgb(255 0 0 / 50%). Hex and rgb() are the most common in daily work, while hsl() is convenient for adjusting hue and lightness.
QWhat is the difference between color and background-color?
Acolor sets the text (foreground) color, is inherited by children, and acts as currentcolor for elements whose color is not explicitly set, such as borders and underlines. background-color sets the element's background and is not inherited. Together they determine text readability, so ensure sufficient contrast — WCAG AA requires at least 4.5:1 for normal text.
QIs there a difference between #f00 and #ff0000?
ANo. #f00 is the shorthand for #ff0000: when the two hex digits of a channel are the same (such as 00, ff, aa), it can be compressed to one digit. The 4-digit and 8-digit forms add an alpha channel — for example, #ff000080 means red at 50% opacity, with the first three/six digits for color and the last one/two for alpha.
QHow do I manage a site's color theme with CSS variables?
ADefine variables in :root, such as --primary: #2c7be5; --text: #333;, then reference them with color: var(--primary);. Centralizing them makes theming easy, and color-mix() (supported by modern browsers) can derive lighter and darker variants from a variable. Provide fallback values for older browsers that lack color-mix().
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
