The color property of CSS helps to set the color of the HTML element(s). This helps to set the foreground color of text, text decorations, and borders.

Syntax

/* Syntax
selector {
    color: value
} 
*/
selector {
  /* colorname can be any colour, such as red, blue, yellow, purple, green, etc. */
  color: colorname;
}

Note: In CSS we use color, not colour.

Example Code

<!doctype html>
<html>
  <head>
    <style>
      h1 {
        color: red;
      }
      p {
        color: skyblue;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
  </body>
</html>

Output of Example Code

This will set the color of the heading to red and the color of the paragraph to blue. like that

This is a heading

This is a paragraph

Color Values

The color property can take the following values:

Color Name: You can use the name of the color as a value. For example, red, blue, yellow, purple, green, etc.
Hexadecimal: You can use the hexadecimal value of the color. For example, #ff0000, #0000ff, #00ff00, etc.
RGB: You can use the RGB value of the color. For example, rgb(255, 0, 0), rgb(0, 0, 255), rgb(0, 255, 0), etc.
RGBA: You can use the RGBA value of the color. For example, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5), rgba(0, 255, 0, 0.5), etc.
HSL: You can use the HSL value of the color. For example, hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(120, 100%, 50%), etc.
HSLA: You can use the HSLA value of the color. For example, hsla(0, 100%, 50%, 0.5), hsla(240, 100%, 50%, 0.5), hsla(120, 100%, 50%, 0.5), etc.

Let's see an example of each of these values.

Color Name

h1 {
  color: red;
}

Hexadecimal

The hex code consists of a hash(#) symbol followed by six characters. These six characters are arranged into a set of three pairs (RR, GG, and BB).

Each character pair defines the intensity level of the colour, where R stands for red, G stands for green, and B stands for blue.

The intensity value lies between 00 (no intensity) and ff (maximum intensity).

Breaking the Character Set (RRGGBB):

RR: RR defines the intensity of color red, ranging from 00 (no red) to FF (maximum red).
GG: GG defines the intensity of color Green, with values from 00 (no green) to FF (full green).
BB: GG defines the intensity of color Blue, varying from 00 (no blue) to FF (full blue).

Syntax of Hexadecimal

seletor {
  color: #RRGGBB;
}

Example of Hexadecimal

<!doctype html>
<html>
  <head>
    <style>
      h1 {
        color: #ff0000;
        /*Pure Red*/
      }
      h2 {
        color: #00ff00;
        /* Pure Green */
      }
      h3 {
        color: #0000ff;
        /* Pure Blue */
      }
      h4 {
        color: #b700ff;
        /* Custom Color */
      }
    </style>
  </head>
  <body>
    <h1>CoderrShyam</h1>
    <h2>A Developer</h2>
    <h3>Founder Coderrshyam.vercel.app</h3>
    <h4>Hello World</h4>
  </body>
</html>

Output of Hexadecimal

This will set the color of the heading to red, green, blue, and custom color. like that

CoderrShyam

A Developer

Founder Coderrshyam.vercel.app

Hello World

RGB

RGB stands for Red, Green, and Blue. It is a color model that defines colors by the intensity of red, green, and blue.
Each argument value lies between 0 and 255.

Syntax of RGB

selector {
  color: rgb(red, green, blue);
}

Example of RGB

<!doctype html>
<html>
  <head>
    <style>
      body {
        background-color: rgb(152, 152, 152);
      }

      h1 {
        color: rgb(0, 0, 0);
        /* red:0, green:0, blue:0 -> Black */
      }

      h2 {
        color: rgb(255, 255, 255);
        /* red:255, green:255, blue:255 -> white */
      }

      h3 {
        color: rgb(30, 150, 220);
        /* red:30, green:150, blue:220 -> Custom Color */
      }
    </style>
  </head>

  <body>
    <h1>CoderrShyam</h1>
    <h2>A Developer</h2>
    <h3>Coderrshyam.vercel.app founder</h3>
  </body>
</html>

Output of RGB

This will set the color of the heading to black, white, and custom color. like that

CoderrShyam

A Developer

Coderrshyam.vercel.app founder

RGBA stands for Red, Green, Blue, and Alpha. It is a color model that defines colors by the intensity of red, green, and blue, along with the alpha channel.
Each argument value lies between 0 and 255, and the alpha channel lies between 0 and 1.

Syntax of RGBA

selector {
  color: rgba(red, green, blue, alpha);
}

Example of RGBA

<!doctype html>
<html>
  <head>
    <style>
      body {
        background-color: rgb(152, 152, 152);
      }

      h1 {
        color: rgba(0, 0, 0, 0.8);
        /* red:0, green:0, blue:0, Alpha: 0.8 = 80% */
      }

      h2 {
        color: rgb(255, 255, 255, 0.6);
        /* red:255, green:255, blue:255 */
      }

      h3 {
        color: rgba(30 150 220 / 60%);
        /* red:30, green:150, blue:200, alpha:60% */
      }
    </style>
  </head>

  <body>
    <h1>CoderrShyam</h1>
    <h2>A Developer</h2>
    <h3>Coderrshyam.vercel.app founder</h3>
  </body>
</html>

Output of RGBA

This will set the color of the heading to black, white, and custom color. like that

CoderrShyam

A Developer

Coderrshyam.vercel.app founder

HSL

HSL stands for Hue, Saturation, and Lightness. It is a color model that defines colors by the hue, saturation, and lightness.

Hue(h): It defines the type of color. It ranges from 0 to 360.
Saturation(s): It defines the intensity of the color. It ranges from 0% to 100%.
Lightness(l): It defines the brightness of the color. It ranges from 0% to 100%.

Syntax of HSL

selector {
  color: hsl(hue, saturation, lightness);
}

Example of HSL

<!doctype html>
<html>
  <head>
    <style>
      body {
        background-color: rgb(152, 152, 152);
      }

      h1 {
        color: hsl(235, 100%, 50%);
      }
      p {
        color: hsl(0, 0%, 0%);
      }
    </style>
  </head>

  <body>
    <h1>CoderrShyam</h1>
    <p>A Developer</p>
  </body>
</html>

Output of HSL

This will set the color of the heading to blue and the paragraph to black. like that

CoderrShyam

A Developer

HSLA

HSLA is similar to HSL; here, A stands for alpha value, which is used to set the opacity. Alpha values lie between 0 and 1.

Syntax of HSLA

selector {
  color: hsla(hue, saturation, lightness, alpha);
}

Example of HSLA

<!doctype html>
<html>
  <head>
    <style>
      body {
        background-color: rgb(152, 152, 152);
      }

      h1 {
        color: hsla(235, 100%, 50%, 0.8);
      }
      p {
        color: hsla(0, 0%, 0%, 0.6);
      }
    </style>
  </head>

  <body>
    <h1>CoderrShyam</h1>
    <p>A Developer</p>
  </body>
</html>

Output of HSLA

This will set the color of the heading to blue and the paragraph to black. like that

CoderrShyam

A Developer

Conclusion

In this tutorial, we learned about the color property of CSS. We learned how to set the color of the HTML element(s) using the color property. We also learned about the different color values that the color property can take, such as color name, hexadecimal, RGB, RGBA, HSL, and HSLA.

CSS Colors

This is a heading

CoderrShyam

A Developer

Founder Coderrshyam.vercel.app

Hello World

CoderrShyam

A Developer

Coderrshyam.vercel.app founder

CoderrShyam

A Developer

Coderrshyam.vercel.app founder

CoderrShyam

CoderrShyam

On this page