How to Understand and Use CSS Colors?

In this lesson, we will understand the CSS colors. What are the different ways to use colours in CSS? Also, we will see how to change the background colour of an element, text colour and so on.

CSS Colors:

In CSS, we specify colors by the following four methods:

1. CSS Color Names

We can specify colors in CSS simply by their names. So, how do we do it? Let’s see:

Example 1: We want to set different text colors for headings. So, let’s see.

<!-- Text Color By Color Names -->
<h1 style="color: red;">
 This is heading with Text Color Red 
</h1>
<h1 style="color: blue;">
 This is heading with Text Color blue
</h1>
<h1 style="color: green;">
 This is heading with Text Color Green
</h1>

This is how CSS code will be displayed in your browser:

css text color

Example 2: To set the background color of a paragraph:

Code:

<!-- Background color -->
<p style="background-color: lightblue;">
This is how it looks in the browser 
when we change the background color 
of an element
</p>

Displays in Browser:

This is how it looks in the browser
when we change the background colour
of an element

2. CSS Colors HEX value

HEX stands for Hexadecimal value, we can specify colors also by hexadecimal values. It is very easy to understand. We write a hex value of a color by including a hash (#) sign before it. Like hex value of white color is #ffffff.

Syntax: #rrggbb

where RR (red), gg (green), and bb (blue) are hexadecimal values between 00 and ff

Example 1: If we want to set the background color of an element using the HEX value.

Code:

<!-- HEX value Colors Example -->
<div style="background-color: #3cb371; padding: 20px;">
 div element with #3cb371 background-color 
</div> <br>
<div style="background-color: #ff6347; padding: 20px">
 div element with #ff6347 background-color 
</div> <br>
<div style="background-color: #6a5acd; padding: 20px">
 div element with #6a5acd background-color 
</div>

This is how it will display in a browser:

element #3cb371 background-color

div #ff6347 background-color

div element #6a5acd background-color

3. Colors RGB value

Don’t worry this is not so complicated. We can specify colors as an RGB value in CSS.

Syntax: rgb(red, green, blue)

Every parameter defines the intensity of the color between 0 and 255.

Example 1: If we want to set the background color of a p element to green.

RGB (0, 255, 0) will display as green because green is set to its highest value.

Code:

<!-- RGB value css colors example -->
<p style="background-color: rgb(0, 255, 0); padding: 20px">
This is a div element with background colour green
</p>

It will display in your browser like this:

This is a p element with background color green

Tip: If you don’t know what is CSS, then see this complete guide about what is CSS?.

4. CSS Colors HSL value

HSL stands for Hue Saturation and Lightness. In CSS, we can specify colors by HSL values. However, RGB and HSL value syntax are the same but in coding a little bit different due to percentage sign.

So, as you will see that we use the % sign with the values.

Syntax: hsl(hue, saturation, lightness)

The % sign represents the intensity of color. Moreover, as we saw the example of RGB value above a p element with a green background. If we write the green color in HSL value so it will be:

Code:

<!-- CSS Colors HSL value -->
<p style="background-color: hsl(120, 100%, 100%); padding: 20px">
This is a div element with background colour green
</p>

It will display in your browser like this:

This is a p element with background color green

Tip: Best color codes, gradients, and color combinations for websites.

I hope you have been understood how we use colors in CSS. If you have any questions please feel free to ask. And If you liked this article then, give us your valuable feedback in the comment section below.

Leave a Comment