CSS3 Colors
CSS3 colors are used to set the text color or background color of the element. It uses predefined color names, or RGB, HEX, HSL, RGBA, and HSLA values.
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 the alpha value 1 indicated fully opaque.
General Syntax
color:rgba(red, green, blue, alpha);
-
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 the alpha value 1 indicates opaque.
Source Code
.red-color {background-color: rgba(255, 0, 0, 0.2);} /* red with opacity */
.geen-color {background-color: rgba(0, 255, 0, 0.4);} /* green with opacity */
.blue-color {background-color: rgba(0, 0, 255, 0.6);} /* blue with opacity */
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:
hsl:(H, S, L);
Where – H lies between 0 – 360. S is from 0% to 100% L is from 0% to 100%
Source Code
.bg-1 {background-color: hsl(180, 100%, 50%);} /* green */
.bg-2{background-color: hsl(190, 100%, 75%);} /* light green */
.bg-3{background-color: hsl(180, 100%, 25%);} /* dark green */
.bg-4{background-color: hsl(170, 60%, 70%);} /* pastel green */
HSLA Colors
HSLA color value is an extension of the 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
hsla: (H, S, L, A);
Where –
- H lies between 0 – 360.
- S is from 0% to 100%.
- L is from 0% to 100%.
- A lies between 0 to 1.
Source Code
.bg{background:hsla(120,40%,60%,0.5);}
.bg-alt{color:hsla(240,70%,50%, 1);}
Web Tutorials
