CSS3 Colors, TutorialsPoint, CSS3 Colors Tutorial

CSS3 Tutorial

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

Red

Dark Red

CSS3 Tutorial