CSS color Property

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.

Example

#

Text and underline, both with the same color.

Text and underline with a color
<div style="color: blueviolet;
     text-decoration:underline;">
  Text and underline with a color
</div>

Syntax

color: color | initial | inherit;

Values

#

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.

More Examples

Click the buttons to see different text color values.

color: orangered
<style>
  .colored-example {
    color: orangered;
  }
</style>

<div class="colored-example">color: orangered</div>

Did you know?

Did you know?

Setting a transparent color

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.


Browser support

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

You may also like

Guides