CSS3 Colors
CSS3 has Supported color properties :

1. RGBA colors :  Red Green Blue Alpha

2. HSL colors   : Hue, Saturation, Lightness

3. HSLA colors : Hue, Saturation, Lightness and Alpha

4. Opacity         : Opacity is a thinner paints need black added to increase opacity.
CSS3 RGBA Colors :
It is an extension of CSS2,Alpha specifies the opacity of a color and parameter number is a numerical between 0.0 to 1.0.
<!DOCTYPE html>
<html>
<head>
<title>RGBA Colors</title>
 
<style type="text/css">
 
.rgba_red{background-color:rgba(255,0,0,0.3);}
.rgba_green{background-color:rgba(0,255,0,0.3);}
.rgba_blue{background-color:rgba(0,0,255,0.3);}
 
</style>
 
</head>

<body>
 
<h4>RGBA colors:</h4>
 
<p class="rgba_red">Red</p>
<p class="rgba_green">Green</p>
<p class="rgba_blue">Blue</p>
 
</body>
</html>
Output :

RGBA colors:

Red

Green

Blue

CSS3 HSL Colors :
Here Huge is a degree on the color wheel, saturation and lightness are percentage values between 0 to 100%.
<!DOCTYPE html>
<html>
<head>
<title>HSL Colors</title>
 
<style type="text/css">
 
.hsl_green{background-color:hsl(120,100%,50%);}
.hsl_green_1{background-color:hsl(120,100%,75%);}
.hsl_green_2{background-color:hsl(120,100%,25%);}
 
.hsl_blue{background-color:hsl(240,100%,50%);}
.hsl_blue_1{background-color:hsl(240,100%,75%);}
.hsl_blue_2{background-color:hsl(240,100%,25%);}
 
</style>
 
</head>
<body>
 
<h4>HSL colors:</h4>
 
<p class="hsl_green">Green</p>
<p class="hsl_green_1">Light Green</p>
<p class="hsl_green_2">Dark Green</p>
 
<p class="hsl_blue">Blue</p>
<p class="hsl_blue_1">Light Blue</p>
<p class="hsl_blue_2">Dark Blue</p>
 
</body>
</html>
Output :

HSL colors:

Green

Light Green

Dark Green

Blue

Light Blue

Dark Blue

CSS3 HSLA Colors :
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
<!DOCTYPE html>
<html>
<head>
<title>HSLA Colors</title>
 
<style type="text/css">
 
.hsla_green{background-color:hsla(120,100%,50%,0.5);}
.hsla_green_2{background-color:hsla(120,100%,75%,0.5);}
.hsla_green_3{background-color:hsla(120,100%,25%,0.5);}
 
</style>
 
</head>
<body>
 
<h4>HSLA colors:</h4>
 
<p class="hsla_green">Green</p>
<p class="hsla_green_2">Light Green</p>
<p class="hsla_green_3">Dark Green</p>
 
</body>
</html>
Output :

HSLA colors:

Green

Light Green

Dark Green

CSS3 Opacity :
The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).
<!DOCTYPE html>
<html>
<head>
<title>Opacity Elements</title>

<style type="text/css">
#p1{background-color:rgb(255,0,0);opacity:0.1;}
#p2{background-color:rgb(255,0,0);opacity:0.3;}
#p3{background-color:rgb(255,0,0);opacity:0.5;}
#p4{background-color:rgb(255,0,0);opacity:0.7;}
#p5{background-color:rgb(255,0,0);opacity:0.9;}
#p6{background-color:rgb(255,0,0);opacity:1;}
</style>

</head>
<body>
 
<h4>CSS3 Opacity Elements</h4>
 
<p id="p1">Light Red</p>
<p id="p2">Light Red</p>
<p id="p3">Light Red</p>
<p id="p4">Light Red</p>
<p id="p5">Red</p>
<p id="p6">Dark Red</p>
 
</body>
</html>
Output :

CSS3 Opacity Elements

Light Red

Light Red

Light Red

Light Red

Red

Dark Red

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.