<!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