6 Different Color Properties in CSS that you must know

The colour property is used to set the text context and foreground colour of an element.
The color property can be specified in 6 different ways . Each one of them provides has some difference from the other.

Example : Following Code

Following Output

1. By using name

The color keywords all represent solid, plain colors, without transparency. Eg. red, blue, light grey, etc.

2. Using rgb

RGB stands for Red, Green and Blue . It is a color model where combination of red, green and blue form a color. The intensity of each color has value ranging from 0 to 255. This provides very large number of colors dataset.
Eg. the RGB value for red is: rgb(255, 0, 0) and for voilet is: rgb(238,130,238).

3. By hex code

The colors can be represented by 6 digits hexadecimal code. The codes are made using the 3 colors(Red, Green and Blue). First 2 digits are red, next 2 are green and last 2 are blue. So, the syntax for Hex Code is: #RRGGBB.
For each hexadecimal value between 00 - FF is similar to 0 - 255.
Eg. #000000 is black and #FFFFFF is white.

4. Using hsl

The color can also be specified using the HSL (Hue, Saturation and Lightness) components.

• Hue, is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation, represents the amount of saturation in the color. It is a percentage value, 0% means a shade of grey, and 100% is the full color.
• Lightness, represents the amount of light in the color. It is also a percentage, 0% is black, 50% is neither light or dark, 100% is white.

5. Using rgba

RGBA (Red, Green, Blue, Alpha) is an extension of RGB, provided with alpha
transparency. This alpha value determines the opacity of the RGB defined color.
The alpha parameter is a number between 0.0 (transparent) and 1.0 (opaque).
Eg.rgba(255, 0, 0, 0.6) is a red color, with 0.6 opacity will have the color.

6. Using hsla

HSLA (Hue, Saturation, Lightness, Alpha) is also an extension of HSL, provided with alpha transparency. The alpha value and property is same as that in RGBA.
Eg. hsla(0, 100%, 50%, 0.6) is also a red color with 0.6 opacity and have same color.
Follow me on Twitter https://twitter.com/haarsh01 to get more web development related content .

Comments

[Temani Afif]

Actually it's recommended to move to the new syntax as defined in the Specification: w3.org/TR/css-color-4/#rgb-functions .. we no more need to use rgba. The new syntax of rgb cover the opactiy (same logic for hsl). rgba and hsla will only remain valid for legacy reasons.
We also have the 8-digit hex syntax

[Yuri Filatov]

very useful and interesting article, thank you very much!