CSS color Property

The color property describes the color of the text content and text decorations. You can find web colors in our HTML colors section and try to choose your preferred colors with our Color Picker tool. The default value of this property varies from one browser to another.

Initial Value Varies from one browser to another.
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes. The color is animatable.
Version CSS1
DOM Syntax object.style.color = "#1c87c9";

Syntax

color: color | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blue {
      color: #1c87c9;
      }                
    </style>
  </head>
  <body>
    <h2>Color property example</h2>
    <p>This is some paragraph for example.</p>
    <p class="blue">This is some paragraph with blue color.</p>
    <p>This is some paragraph for example.</p>
  </body>
</html>

You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the color property.

Look at a CSS color example where the value is a named color:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blue {
      color: blue;
      }                
    </style>
  </head>
  <body>
    <h2>Color property example</h2>
    <p>This is some paragraph for example.</p>
    <p class="blue">This is some paragraph with a named blue color.</p>
    <p>This is some paragraph for example.</p>
  </body>
</html>

See an example where a hexadecimal value is set for the color property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .color {
      color: #8ebf42;
      }                
    </style>
  </head>
  <body>
    <h2>Color property example.</h2>
    <p>This is some paragraph for example</p>
    <p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
    <p>This is some paragraph for example.</p>
  </body>
</html>

See an example with the colorproperty using an RGB value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .color {
      color: rgb(142, 191, 66);
      }                
    </style>
  </head>
  <body>
    <h2>Color property example.</h2>
    <p>This is some paragraph for example</p>
    <p class="color">This is some paragraph with a RGB color value.</p>
    <p>This is some paragraph for example.</p>
  </body>
</html>

See an example with the color property using an HSL value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .color{
      color: hsl(89, 43%, 51%);
      }                
    </style>
  </head>
  <body>
    <h2>Color property example.</h2>
    <p>This is some paragraph for example</p>
    <p class="color">This is some paragraph with an HSL color value.</p>
    <p>This is some paragraph for example.</p>
  </body>
</html>

Values

Value Description
color Describes the color of the text and text decorations. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ v v

Practice Your Knowledge

What property is used to change the text color of an element?




Related articles