CSS - color Property

Quiz

CSS color property sets the color of the text within an element. The color is applied to the text of all child elements within an element as well, unless the child element has its own color property defined.

Syntax

color: color | initial | inherit;

Property Values

Value	Description
color	It specifies the color of the text. Different color format can be used (color names, hex values, rgb values, hsl values).
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Color Property

The following examples explain the color property with different values.

Color Property with Color Names

To set the color of the text, we can use color names (red, blue, green etc.). The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: red;
      }

      p {
         color: blue;
      }

      div {
         background-color: lightgreen;
         width: 50%;
         padding: 20px;
         color: purple;
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has red color text.
   </h3>
   <p>
      This p tag has blue color text.
   </p>
   <div>
      This div has purple color text.
   </div>
</body>

</html>

Color Property with Hexadecimal Values

To set the color of the text, we can use hexadecimal values (#ff0000, #ffffff etc.). The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: #666699;
      }

      p {
         color: #cc0000;
      }

      div {
         background-color: lightgreen;
         width: 50%;
         padding: 20px;
         color: #cc6600;
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has '#666699' color text.
   </h3>
   <p>
      This p tag has '#cc0000' color text.
   </p>
   <div>
      This div has '#cc6600' color text.
   </div>
</body>

</html>

Color Property with RGB Values

To set the color of the text, we can use Rgb values (rgb(255, 0, 0), rgb(255, 255, 0) etc.). The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: rgb(255, 153, 0);
      }

      p {
         color: rgb(255, 0, 102);
      }

      div {
         background-color: lightgreen;
         width: 50%;
         padding: 20px;
         color: rgb(198, 26, 255);
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has 'rgb(255, 153, 0)' color text.
   </h3>
   <p>
      This p tag has 'rgb(255, 0, 102)' color text.
   </p>
   <div>
      This div has 'rgb(198, 26, 255)' color text.
   </div>
</body>

</html>

Color Property with HSL Values

To set the color of the text, we can use Hsl values (hsl(300, 100%, 90%), hsl(0, 100%, 50%) etc.). The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: hsl(210, 50%, 40%);
      }

      p {
         color: hsl(240, 100%, 20%);
      }

      div {
         background-color: lightgreen;
         width: 50%;
         padding: 20px;
         color: hsl(120, 100%, 20%);
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has 'hsl(210, 50%, 40%)' color text.
   </h3>
   <p>
      This p tag has 'hsl(240, 100%, 20%)' color text.
   </p>
   <div>
      This div has 'hsl(120, 100%, 20%)' color text.
   </div>
</body>

</html>

Color Property with Opacity

To set the color of the text along with adding opacity, we can use the rgba or hsla values (rgba(201, 76, 76, 0.6), hsla(89, 43%, 51%, 0.6) etc.). The fourth value in these formats specifies the opacity. The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: rgba(201, 76, 76, 0.6);
      }

      h4 {
         color: hsla(89, 43%, 51%, 0.4);
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has 'rgba(201, 76, 76, 0.6)'
      color text with opacity.
   </h3>
   <h4>
      This h4 tag has 'hsla(89, 43%, 51%, 0.4)'
      color text with opacity.
   </h4>

</body>

</html>

Supported Browsers

Property
color	1.0	3.0	1.0	1.0	3.5

css_reference.htm

Print Page