6 Different Color Properties in CSS that you must know

Harsh Kaushik — Wed, 26 May 2021 09:38:39 +0000

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 .

DEV Community: Harsh Kaushik