...

Web Technologies - CSS3

Back to Course

Lesson Description


Lession - #521 CSS3 Color


CSS3 has Supported additional color properties as follows −

  • RGBA colors
  • HSL colors
  • HSLA colors
  • Opacity

    RGBA stands for Red inexperienced Blue Alpha.It is an extension of CSS2,Alpha specifies the opacity of a color and parameter variety may be 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 large is a degree on the color wheel, saturation and lightness are proportion values between 0 to 100 percent. 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 extend 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;}


    Example

    
    
    <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>
    ;} #g1 {background-color:hsl(120, 100%, 50%>
    ;} #g2 {background-color:hsl(120,100%,75%>
    ;} #g3 {background-color:hsl(120,100%,25%>
    ;} #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>
    ;} #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>RGBA colors:</p> <p id = "p1">Red</p> <p id = "p2">Green</p> <p id = "p3">Blue</p> <p>HSL colors:</p> <p id = "g1">Green</p> <p id = "g2">Normal Green</p> <p id = "g3">Dark Green</p> <p>HSLA colors:</p> <p id = "d1">Less opacity green</p> <p id = "d2">Green</p> <p id = "d3">Green</p> <p>HSLA colors:</p> <p id = "m1">Red</p> <p id = "m2">Green</p> <p id = "m3">Blue</p> </body> </html>


    Try it here