Ways to Use CSS Font / Text Color property

The font color property of CSS

The CSS font color property is used to set the text color. You can specify the font color of each element’s text separately.

For example, if you need to set the color of heading in red and paragraph in blue then you can use the font color property in each element separately.

An example of font color property

Following is the syntax to use the font color property which is followed by an example to use it.

PS: You may also learn the color property by the video of this tutorial

Syntax of setting font color in CSS

This is how you can set the color of text by color property:



color: red;


color: rgb(33,45,55)

Ways to set font color

These are the ways to set the font color values:

  1. By Hexadecimal value: This value is given by using a hash sign (#) and up to 6 HEX values (0-F) in font color CSS property.
  2. Using the color name: By using the color name like black, green, blue etc. This is not the recommended way.
  3. Using RGB value: RGB stands for Red, Green, and Blue. It defines the values of red, green and blue at the range of 0-255 for each.

CSS font color property example

This example uses all three ways to set the font color of different elements. The h1 tag is given the HEX value. In the h2, we used a color name for demonstration purpose. While a paragraph is given an RGB value. See the example and code  by clicking the link or image below:

CSS color

Experience this example online

As you can see, the <h1> color is set by HEX color code in font color. While h2 by color name and paragraph by RGB value.

Further Reading: CSS font