<!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>
Red
Green
Blue
<!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>
Green
Light Green
Dark Green
Blue
Light Blue
Dark Blue
<!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>
Green
Light Green
Dark Green
<!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>
Light Red
Light Red
Light Red
Light Red
Red
Dark Red
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.