RGB VS HSL colors
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.
|RGB||Red Green blue||CSS2|
|RGBA||Red Green Blue Alpha||CSS3|
|HSL||Hue Saturation Lightness||CSS3|
|HSLA||Hue Saturation Lightness Alpha||CSS3|
Prior to css3, we only use RGB colors. RGB colors are declared in RGB or Hexadecimal format. For Example, Red color is
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 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>
RGBA Color Picker
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 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 and red=360. After 359 deg, again red color will start.
Hue Value with color name
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 value is in percentage between 0-100%. 100% lightness means white, 50% means actual hue color and 0% means black color.
Alpha is used as forth value for RGBA and HSLA colors
HSLA Color Picker
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.