CSS3 Colors

RGBA Color Value

It stands for red, green, blue, and alpha. It is an extension of RGB with an alpha channel. Alpha specifies the opacity of color and its value will be a float value between 0 to 1.

Alpha value 0 indicates fully transparent while alpha value 1 indicated fully opaque.

General Syntax

• Red: Its value lies between 0 to 255. Keep in mind that color value 0 stands for 0% while color value 100 stands for 100%.
• Green: Its value lies between 0 to 255. Keep in mind that color value 0 stands for 0% while color value 100 stands for 100%.
• Blue: Its value lies between 0 to 255. Keep in mind that color value 0 stands for 0% while color value 100 stands for 100%.
• Alpha:Alpha value 0 indicates fully transparent while alpha value 1 indicates opaque.

HSL Colors

The SHL color value is used to set the color of the element, and it is specified by the shl(s,h,l) where s denotes saturation, h denoted hue and l denotes lightness.

Hue Value

• Hue: The hue color value ranges from 0 to 360.
• Saturation:The saturation of the color ranges from 0% to 100% here 0% specifies desaturated and 100% denotes fully saturated.
• Lightness: The lightness of the color value ranges from 0% to 100%.Please keep in mind that 100% lightness specifies white, 500% lightness specifies actual hue color, and 0% lightness specifies black color.

General Syntax

The Syntax of HSL color value in CSS:

Where – H lies between 0 – 360. S is from 0% to 100% L is from 0% to 100%

HSLA Colors

HSLA color value is an extension of HSL color value with an alpha channel. Alpha channel is used to create opacity of the color and its value lies between 0(fully transparent) to 1(fully opaque).

General Syntax

Where –

• H lies between 0 – 360.
• S is from 0% to 100%.
• L is from 0% to 100%.
• A lies between 0 to 1.