RGB VS HSL colors

RGB Vs HSL
css3 opacity

CSS2 use only RGB colors ( red, green, blue ). RGB are Screen colors and not recommended for printing. Total no of colors in RGB are 16 millions. But CSS3 also Supports HSL colors and HSLA colors. HSL Stands for Hue, saturation , lightness.

CSS3 Colors

Color Name Explanation Version
RGB Red Green blue CSS2
RGBA Red Green Blue Alpha CSS3
HSL Hue Saturation Lightness CSS3
HSLA Hue Saturation Lightness Alpha CSS3

RGBA Color

Prior to css3, we only use RGB colors. RGB colors are declared in RGB or Hexadecimal format. For Example, Red color is Red, rgb(255,0,0), #ff0000 and #f00.

RGBA colors are same same like RGB colors, but they have an extra forth value: Alpha. Alpha is opacity level of color. Thus Solid red color can also be written as rgba(255, 0, 0, 1). But if we want to add transparency in red color, we need to use RGBA color. Alpha value is always floating number, it varies between 0 and 1, exp rgba(255,0,0,0.5)- red with 50% transparency. But unlike rgb, there is no hexadecimal notation for RGBA colors yet. For dark( solid) colors, alpha value is 1. For full transparency, alpha value is 0. And for semi transparent color, alpha value can vary. Alpha 0.25 means 75% transparency, 0.75 means 25% transparency.

            
 <div>     
    <div style="background:rgba(255,0,0,1)"> color rgba(255,0,0,1)</div>
    <div style="background:rgba(255,0,0,0.75)"> color rgba(255,0,0,0.75)</div>
    <div style="background:rgba(255,0,0,0.5)"> color rgba(255,0,0,0.5)</div>
    <div style="background:rgba(255,0,0,0.25)"> color rgba(255,0,0,0.25)</div>
</div>
          
background-color rgba(255,0,0,1)
background-color rgba(255,0,0,0.75)
background-color rgba(255,0,0,0.5)
background-color rgba(255,0,0,0.25)

HSL and HSLA Color

HSL stands for hue saturation and lightness. In RGB colors, we cannot change saturation and lightness of color, but in HSL, we can change.

HSLA stands for hue saturation lightness and alpha. HSLA and HSL are same,, except alpha value. Both are supported in HTML5 based browsers only.

Hue

Hue value is from 0 to 359 deg. 0 and 360 are same. Hue value for major colors red= 0, yellow=60, green=120, cyan=180, blue=240, magenta=300.

red
yellow
green
cyan
blue
magenta

Saturation

Saturation value is in percentage between 0-100%. 100% saturation will gives full hue, 0 will give a shade of gray without changing hue.

Lightness

Lightness value is in percentage between 0-100%. 100% lightness means white, 50% means actual hue color and 0% means black color.

Alpha

Alpha is used as forth value for RGBA and HSLA colors

Alpha=1
Alpha=0.5
Alpha=0

RGB colors are supported in both HTML4 and HTML5 based browsers. Whereas RGBA, HSL and HSLA colors are supported in HTML5 Based Browsers. Add a separate stylesheet in conditional comments for IE8 and below browsers support.