Wednesday, February 15, 2017

CSS3 - Colors

CSS3 has Supported additional color properties as follows −
  • RGBA colors
  • HSL colors
  • HSLA colors
  • Opacity
RGBA stands for Red Green Blue Alpha.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. A Sample syntax of RGBA as shown below −
#d1 {background-color: rgba(255, 0, 0, 0.5);} 
#d2 {background-color: rgba(0, 255, 0, 0.5);}  
#d3 {background-color: rgba(0, 0, 255, 0.5);}
HSL stands for hue, saturation, lightness.Here Huge is a degree on the color wheel, saturation and lightness are percentage values between 0 to 100%. A Sample syntax of HSL as shown below −
#g1 {background-color: hsl(120, 100%, 50%);}  
#g2 {background-color: hsl(120, 100%, 75%);}  
#g3 {background-color: hsl(120, 100%, 25%);}
HSLA stands for hue, saturation, lightness and alpha. Alpha value specifies the opacity as shown RGBA. A Sample syntax of HSLA as shown below −
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}  
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}  
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}
opacity is a thinner paints need black added to increase opacity. A sample syntax of opacity is as shown below −
#g1 {background-color:rgb(255,0,0);opacity:0.6;}  
#g2 {background-color:rgb(0,255,0);opacity:0.6;}  
#g3 {background-color:rgb(0,0,255);opacity:0.6;}
The following example shows rgba color property
<html>
   <head>
      <style>
         #p1 {background-color:rgba(255,0,0,0.3);}
         #p2 {background-color:rgba(0,255,0,0.3);}
         #p3 {background-color:rgba(0,0,255,0.3);}
      </style>
   </head>
   <body>
      <p>RGBA colors:</p>
      <p id="p1">Red</p>
      <p id="p2">Green</p>
      <p id="p3">Blue</p>
   </body>
</html>
It will produce the following result −
The following example shows HSL color property
<html>
   <head>
      <style>
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      </style>
   </head>
   <body>
      <p>HSL colors:</p>
      <p id="g1">Green</p>
      <p id="g2">Normal Green</p>
      <p id="g3">Dark Green</p>
   </body>
</html>
It will produce the following result −
The following example shows HSLA color property
<html>
   <head>
      <style>
         #d1 {background-color:hsla(120,100%,50%,0.3);}
         #d2 {background-color:hsla(120,100%,75%,0.3);}
         #d3 {background-color:hsla(120,100%,25%,0.3);}
      </style>
   </head>
   <body>
      <p>HSLA colors:</p>
      <p id="d1">Less opacity green</p>
      <p id="d2">Green</p>
      <p id="d3">Green</p>
   </body>
</html>
It will produce the following result −
The following example shows Opacity property
<html>
   <head>
      <style>
         #m1 {background-color:rgb(255,0,0);opacity:0.6;} 
         #m2 {background-color:rgb(0,255,0);opacity:0.6;} 
         #m3 {background-color:rgb(0,0,255);opacity:0.6;}
      </style>
   </head>
   <body>
      <p>HSLA colors:</p>
      <p id="m1">Red</p>
      <p id="m2">Green</p>
      <p id="m3">Blue</p>
   </body>
</html>
It will produce the following result −
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)