home

Css3 Hue Saturation

Css3 can create colors by following below color methods, Hexadecimal colors/ RGB colors/ RGBA colors HSL colors HSLA colors. Everyone using This method and its part of developers life, without this method you cannot make styles for any application. HSL also have some introduction itself. before this if want creates any color we have been used color graphics(images), and now it's easy create colors and gradients for any requirement.

Example code with HSLA Values

<div style="background-color: hsla(0,100%,50%,0.5);></div>
<div style="background-color: hsla(120,100%, 50%,0.9);></div>
<div style="background-color: hsla(240,100%, 50%,1);></div>

Css3 Hue Saturation Demo

HSLA-colors(HUE-SATURATION-LIGHT):

HSLA-colors(HUE-SATURATION-LIGHT-ALPH):

RGB(RED-GREEN-BLUE)-colors:

RGB(RED-GREEN-BLUE-ALPHA)-colors:

<div id="HSL">HSLA-colors(HUE-SATURATION-LIGHT)></div>
<div id="HSLA">HSLA-colors(HUE-SATURATION-LIGHT-ALPH)></div>
<div id="RGB">RGB(RED-GREEN-BLUE)-colors></div>
<div id="RGBA">RGB(RED-GREEN-BLUE-ALPHA)-colors></div>
<style>
#HSL {background-color:#ff00ff;}
#HSLA {background-color:hsla(290,100%,50%,0.3);}
#RGB{background-color:rgb(0,255,0);}
#RGBA {background-color:rgba(255,0,0,0.3);}
</style>

Example code with HSL Values

<div style="background-color: hsl(0,100%, 50%);></div>
<div style="background-color: hsl(120,100%, 50%);></div>
<div style="background-color: hsl(240,100%, 50%);></div>

Example code with RGB Values

<div style="background-color: rgb(255,0,0);></div>
<div style="background-color: rgb(0,255,0);></div>
<div style="background-color: rgb(0,0,255);></div>

Example code with RGBA Values

<div style="background-color: rgba(255,0,0,0.3);></div>
<div style="background-color: rgba(0,255,0,0.3);></div>
<div style="background-color: rgba(0,0,255,0.3);></div>

Also read brief about HUE/Saturation-colors (http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color)