Text Color Property in CSS

CSS Font Color Property
Text Color Property in CSS

CSS Font Color Property

Today we are going to discuss Text Color Property in CSS with you. In the previous post we have explained the CSS background property to you. Now we are going to discuss another very important part of the website designing and it is the CSS font color property. There will be no website on the internet that has no text in it. In fact without text you can’t make a website. The text is that important for a website and styling the text is very important as well. The colors are set for three different properties. The CSS border-color property and the CSS background-color property we have discussed them earlier.

CSS Font Color Property

Text Color Property in CSS

CSS Color Syntax


border-color: #efefef;//color set for the border

background-color: red;//color for the background

color: rgb(255, 230, 0);//the text color property in CSS


The third line of code is used for the color of the contents of an element. Some people refer them as foreground colors. The CSS font color property or text color property in CSS can be set in various ways. You can set the color values by the color names that are more than 150 color key words supported by the CSS. It was limited to about 16 color key words in the older CSS. It is the CSS3 that has the extended color support. It has the SVG 1.0 color key word support added now.

Hexadecimal Notation for color

The color key word hasn’t got a very wide variety of colors options. The hexadecimal notation has got a very wide variety of colors to select. It is another way of defining the rgb colors. These are represented with three pairs of values for red, green and blue values.

color: #3aef5b;

In the above color representation we have used the hexadecimal representation. The representation has 3a for red color, ef for the green color value and 5b for the blue color value. The representation can be expressed in short notation as well. The rule for the short notation for hexadecimal is that the pairs should be made of similar values. The code #cccccc can be written as #ccc in shorthand notation.

CSS Color Property Values With rgb

The other notation that can be used to define a color in CSS is the rgb value. See the following line of code that how we can set the rgb values.

color: rgb(233, 245, 255);

color: rgb(20%, 40%, 100%);

As you see that the values can be set with simple integer values from 0-255 or you can use the percentage value using the % sign.

HSL Model for CSS Color Property Values

This is the new method introduced in CSS3. HSL stands for Hue, Saturation and Lightness. The Hue of a color is represented as an angle on the color wheel and it ranges from 0-360. The red is 360, green is 120 and blue is 240 and other colors are found in between these values. The saturation is represents the amount of the color. The value 100% means that it is fully saturated and the 0% means the gray scale. The lightness tells that how much bright or dark the color is and it ranges from 0% to 100%. The 0% is the black and 100% means full bright. The browser support for the method is not widely supported as it is new to CSS.

How to use HSL Color Scheme

The HSL color scheme is used as the rgb scheme. See the code below:

background-color: hsl(120,100%,50%);/* green color for background */

See list of HTML color codes with HSL, HSV, RGB and HEX codes.

Related Posts