CSS Colors

CSS Colors

CSS Colors are defined using Color Names, RGB values, HEX values, RGBA values, HSL values and HSLA values. With these CSS Color names or values, you can apply colors to any HTML element.

Table of Contents

CSS Color Names

We can specify color for any HTML element using it's name. For example Red, Blue, Orange, Cyan etc. There are over 140 standard color names supported by CSS and HTML.

In below examples we will use CSS Color Names.

CSS Background Color

With background-color property we can set Background Color of any HTML element. Look at the examples below.

Green Red Orange Blue Gray

HTML Code

<!DOCTYPE html>
<html>
<body>
<span title = 'Green Color' class='green'>Green</span>
<span title = 'Red Color' class='red'>Red</span>
<span title = 'Orange Color' class='orange'>Orange</span>
<span title = 'Blue Color' class='blue'>Blue</span>
<span title = 'Gray Color' class='gray'>Gray</span>
</body>
</html>

CSS Code

<style>
.green
{
color:white;
background-color:green;
display:inline-block;padding:10px;
}
.red
{
color:white;
background-color:red;
display:inline-block;
padding:10px;
}
.orange
{
color:white;
background-color:orange;
display:inline-block;
padding:10px;
}
.blue
{
color:white;
background-color:blue;
display:inline-block;
padding:10px;
}
.gray
{
color:white;
background-color:gray;
display:inline-block;
padding:10px;
}
</style>

CSS Text Color

With color property we can set Text Color of HTML elements. Look at the example below.

Hello, My Text Color is White!

HTML Code

<!DOCTYPE html>
<html>
<body>
<p>Hello, My Text Color is White!</p>
</body>
</html>

CSS Code

<style>
p
{
background-color:red; 
color:white;
padding:20px 0px; 
text-align: center;
}
</style>

CSS Border Color

With border property we can set Border of HTML elements. We can set border color, border width and border type. Look at the example below.

Hello, My Border Color is Black!

HTML Code

<!DOCTYPE html>
<html>
<body>
<p>Hello, My Border Color is Black!</p>
</body>
</html>

CSS Code

<style>
p
{
background-color:cornflowerblue;
border:4px solid black;
color:white;
padding: 20px 0px;
text-align:center;
}
</style>

In all above examples, we used CSS Color Names with different CSS properties. There are other ways as well to specify the color of elements.

CSS RGB Colors

Colors of HTML element can also be set using RGB values. RGB values are 3 digit decimal values for Red, Green and Blue.

The range of values are from 0 to 255. The higher the value of a particular color, higher would be it's intensity.

For white, all three values are set to 255. For Black, all three values are set to 0.

RGB value for Red we used earlier would be like this. 

<style>
p
{
background-color: rgb(255, 0, 0);
}
</style>

Output

rgb(255, 0, 0)

More Examples

rgb(0, 255, 0)

rgb(0, 0, 255)

rgb(255, 255, 20)

CSS HEX Colors

Colors of HTML element can also be set using HEX values. HEX values are 2 digit hexadecimal values for Red, Green and Blue.

The range of values are from 00 to FF. The higher the value of a particular color, higher would be its intensity.

For white, all three values are set to FF. For Black, all three values are set to 00.

Hex value for Red we used earlier would be like this. Pound sign or Hash tag is used with Hex values.

<style>
p
{
background-color: #FF0000;
}
</style>

Output

#FF0000

More Examples

#00FF00

#0000FF

#FFFF14

CSS HSL Colors

CSS Colors can also be set using HSL values.

H is for Hue, It's value ranges from 0 to 360. 0 is for Red, 120 is for Green, 240 is for Blue.

S is for Saturation, It's value is in percentage. 0% would be a shade of gray while 100% is full Color.

L is for Lightness, It's value is also in percentage. 0% is Black while 100% is white.

HSL value of Red color we used earlier would be like this.

<style>
p
{
background-color: hsl(0, 100%, 50%);
}
</style>

Output

hsl(0, 100%, 50%)

CSS RGBA Colors

RGBA is like RGB Colors but with additional value of Alpha. Alpha specifies the opacity of the Color.

Alpha value varies from 0 to 1. 0 means fully transparent while 1 means opaque or not transparent at all.

<style>
p
{
background-color: rgba(255, 0, 0, 0.5);
}
</style>

Output

rgba(255, 0, 0, 0.5)

CSS HSLA Colors

HSLA is like HSL Colors but with additional value of Alpha. Alpha specifies the opacity of the Color.

Alpha value varies from 0 to 1. 0 means fully transparent while 1 means opaque or not transparent at all.

<style>
p
{
background-color: hsla(0, 100%, 50%,0.5);
}
</style>

Output

hsla(0, 100%, 50%,0.5)

Tags