Colors make the webpage meaningful. The page will look plain and boring without different colors. You can use two types of color properties with CSS in a webpage. One is foreground color (generally as color) to change the color of the text or font. Second is background color to add background color to different HTML elements. In this tutorial let us explore how to use CSS color properties with various attributes.

Changing Text Color in CSS

Let us take an example of changing the color of a paragraph element <p> to red. You can do this with the below style definition in CSS:

p {
color: red;
}

It will produce the following result on the browser:

This is a red color paragraph.

Changing Background Colors in CSS

You can change the background color any HTML element using the below CSS style definition:

p {
background-color:red;color:white;
}

It will produce the following result:

This is a red color paragraph.

Note we have used, white text color so that it is clearly readable with red background.

Defining Colors in CSS

In the above examples, we have used red and white colors with the name. You can create millions of colors by combining the three basics colors of red, blue and green. It is not possible to remember the name of the colors and also most of the colors have no actual name. In order to make the usage simple, CSS allows the following ways to define the color value:

• Names for colors like red, green or white
• Using combination of red, green and blue decimal values like rgb(20,50,200)
• Using hexadecimal values for red, green and blue like #ffffff
• Percentage value for red, blue and green colors like rgb(10%,80%,25%)
• Using hue, saturation and lightness like hsl(0,80%,70%)
• Adding opacity to RGB values like rgba(0,0,0,0.8)
• Adding opacity to HSL values like hsla(200,75%90%0.6)

Using Color Names in CSS

We have already seen how to use name in color and background CSS properties. There are only around 150 color names browsers can identify. We recommend you to use numbers instead of names for colors. You can also check out the color codes for popular social networking site in this article.

Using RGB Colors in CSS

In RGB method red, blue and green colors are indicated with the decimal numbers ranging from 0 to 255. For example, tomato color is indicated as rgb(255,99,71).

<div style="background-color: rgb(255,99,71);">
This text will have a tomato color background with the RGB value as rgb(255,99,71).
</div>

It will produce the following result on the browser:

This text will have a tomato color background with the RGB value as rgb(255,99,71).

You can create more than 16 million colors by varying the three base color values. However, make sure to use proper text color so that it is easy to read. The best option is to choose web safe colors like flat UI colors for your website.

Using Hexadecimal Color Values

The tomato color rgb(255,99,71) can be converted into an equivalent hexadecimal value as FF6347. This is a mere conversion of 255 into FF, 99 into 63 and 71 to 47. You can use color converter tools to convert between RGB to hex codes.

You can use hexadecimal color values in CSS like below:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF">
This text will have a tomato color background with the hex code value as #FF6347.
Remember to use # symbol in front the hex code value. 
Also both small case #ff6347 and capital case #FF6347 will produce the same result.
</div>

The “padding:15px;” is used to add padding to the text content inside the <div> element. It will produce the following result on the browser:

This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value and use text color as #FFFFFF. Also, both small case #ff6347 and capital case #FF6347 will produce the same result.

Using RGB Values as Percentage

Instead of decimal number ranges from 0 to 255, you can also mention the percentage value for red, green and blue.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF">
This text will have a tomato color background with the hex code value as #FF6347.
Remember to use # symbol in front the hex code value.
Also both small case #ff6347 and capital case #FF6347 will produce the same result.
</div>

It will produce the below result:

This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result.

Adding Opacity to RGB Colors

In CSS3, you have the ability to mention the alpha or opacity value for the colors. The alpha value is added as a decimal number between 0.0 to 1.0 as a fourth value. The value 0 represents completely transparent which is 0% opacity and 1.0 indicates opaque with 100% opacity.

Below is the syntax of using alpha value in rgb color with 20% opacity:

<div style="background-color: rgba(255,0,0,0.2);">
Content Here......
</div>

Let us show the red color with 20%, 40%, 60%, 800% and 100% of opacity values to make it more understandable.

Remember, there is also a separate CSS property called “opacity: which can also be used for the same purpose. The advantage with opacity is that it can be used on images as well. But it is not supported by all the browsers. Below is how you can use opacity property separately:

p {
background-color: rgb(255,0,0);
opacity: 0.5;
}

Using HSL Colors in CSS

CSS3 has additional option to define a color using HSL method. HSL stands for hue, saturation, lightness and has three values:

• Hue is a degree indicated in a color wheel with references as 0 = red, 120 = green, 240 is blue.
• Saturation is a percentage value of gray in a color.
• Lightness is a percentage value of light or dark where 0% is dark (black) and 100% is light (white).

Below is an example of making green background with HSL color in CSS:

<div style="background-color: hsl(120,100%,50%,0.2);">
Content Here......
</div>

HSL with Opacity

Similar to RGBA, you can also add opacity to HSL color as fourth value. The opacity or alpha is indicated in a decimal number between 0.0 to 1.0 where 0.0 indicates fully transparent and 1.0 indicates opaque. Below is an example of creating green color with 50% opacity using HSLA declaration in CSS.

<div style="background-color: hsla(120,100%,50%,0.6);">
Content Here......
</div>

The following boxes showcase green color at different alpha levels:

Complete Example of Using Colors in CSS

As of now we have seen different ways to define colors in CSS. Let us show a full length example of creating foreground and background colors:

<!-- This is CSS -->
<style>
div {background-color:tomato; padding:10px;}
p {color: rgba(50,90,20,0.8);}
p {color: #ffffff;} /* This will be the final paragraph color */
h1 {color: yellow;}
div > h1 {color:#008754;} /* This will be the final h1 color */
h2 {background:hsla(10,20%,30%,0.8);}
h2 {color:#ffffff;}
em {color: #4500aa;}
p > em {background-color: rgba(60,43,78,0.7); color:yellow;}
</style>

<!-- This is HTML -->
<div> <!-- Background Tomato -->
<h1>This is a H1 heading.</h1> <!-- Color #008754 -->
<p>Here is a paragraph element.</p> <!-- Color #ffffff -->
<h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) -->
<p>Here is another paragraph. <!-- Color #ffffff -->
<em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow -->
</p>
<em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa -->
</div>

The final result will be shown like below:

• If you define multiple colors in CSS for the same element then the latest will take precedence over all previous declaration. In the above example, the paragraph will have #ffffff color due to this reason.
• Specific styles will take precedence over the parent or generic style. The h1 color will be #008754 and not yellow.
• You can also use the background shorthand property to define the background color.

If the background color is not mentioned then the element will have transparent background. Since browsers uses white background you will see most of the pages on the web are having white background. Actually the <body> element of the pages are declared with white background to ensure proper display as users can change the background color of the browser.