The color property specifies the text color of an element.
Text decorations, such as underlines inherit the same color.
Color values can be hex, rgb, hsl, rgba, hsla, or a color name.
Text and underline, both with the same color.
<div style="color: blueviolet;
text-decoration:underline;">
Text and underline with a color
</div>
color: color | initial | inherit;
| Value | Description |
|---|---|
| color | Sets text color. Accepts color name, hex, rgb, rgba, hsl, hsla |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see different text color values.
<style>
.colored-example {
color: orangered;
}
</style>
<div class="colored-example">color: orangered</div>
The color property also accepts a transparent value.
Transparent text is hidden, but it continues to occupy the same space.
Transparent text can still be selected and highlighted.
To completely hide text use the display, opacity, or visibility properties.
This table shows when color support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
3.0 | Aug 1996 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
