RGBA, HSL, HSLA Colors
Written By: Avinash Malhotra
Updated on
RGB VS HSL colors
RGBA & HSL/HSLA colors are introduced in CSS3. Till CSS2, we were using RGB colors ( red, green, blue ) only. RGB and RGBA are Screen colors and not recommended for printing. Total numbers of colors in RGB are 16 millions. But CSS3 also Supports RGBA, HSL colors and HSLA colors. HSL Stands for Hue, saturation, lightness.
RGBA Color
Prior to css3, we only use RGB colors. RGB colors are declared in RGB or Hexadecimal format. For Example, Red color is written as red, rgb(255,0,0), #ff0000 and #f00.
RGBA colors are 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 to 1, exp rgba(255,0,0,0.5)- red with 50% transparency. 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.
For Hexadecimals, use #ff0000ff for full red, and change last 2 hexa values to change opacity.
<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
rgba(0,0,0,1)
#00000000
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 and red=360. After 359 deg, again red color will start.
Hue Values with color name
| Value | Color |
|---|---|
| 0 | Red |
| 60 | Yellow |
| 120 | Green |
| 180 | Cyan |
| 240 | Blue |
| 300 | Magenta |
| 360 | Red |
0
60
120
180
240
300
Saturation
Saturation value is in percentage between 0-100%. 100% saturation will give full hue, 0 will give 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
HSLA Color Picker
hsla(0,100%,50%,1)
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.