Home » Learn Code » CSS3 » How to Understand and Use CSS Colors?

How to Understand and Use CSS Colors?

  • CSS3
  • 4 min read
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 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 colours also by hexadecimal values. It is very easy to understand. We write a hex value of a colour by including a hash (#) sign before it. Like hex value of white colour 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 colour of an element using 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 a 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 colour 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 colour green

Tip: If you don’t know what is css? then click to see.

4. CSS Colors HSL value

HSL stands for Hue Saturation and Lightness. In CSS, we can specify colours 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 % sign with the values.

Syntax: hsl(hue, saturation, lightness)

The % sign represents the intensity of colour. Moreover, as we saw the example of RGB value above a p element with a green background. If we write the green colour 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 colour green

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

I hope you have been understood that how we use colours 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 Reply

Your email address will not be published. Required fields are marked *