color

Anonymous contributor's avatar
Anonymous contributor
Published Jul 7, 2021Updated Jan 6, 2024
Contribute to Docs

To set color property values for an element. color sets the color of an element’s textual and decorative parts and text.

Syntax

color: value;

The value of the color property can be any of the following:

  • Name of the color (e.g., aqua, khaki, red)
  • RGB (red, green, and blue) colors (e.g., rgb(249, 2, 171))
  • Hexadecimal colors (e.g., #ff0000)

Example

The h1 tag is set to be orange in color, and the p tag is set as pink in color. The background color, black/#000000/rgb(0,0,0), is only set for context:

body {
  background-color: black;
}
h1 {
  color: orange;
}
p {
  color: pink;
}


body {
  background-color: #000000;
}
h1 {
  color: #ffa500;
}
p {
  color: #ffc0cb;
}


body {
  background-color: rgb(0, 0, 0);
}
h1 {
  color: rgb(255, 165, 0);
}
p {
  color: rgb(255, 192, 203);
}

Three examples were given in the example block above, each of them would yield or translate to the same output:

Shows how the color property responds to different elements

All contributors

Contribute to Docs

Learn CSS on Codecademy