CSS color tricks to make your life easier

Colors in CSS are pretty easy to handle and do not pose much difficulty. But there are certain tricks not many developers know, that could make your life much easier while working with CSS colors.

Read on to learn about them.

You do not need comma separated values

Very recently the syntax of CSS has been updated for rgb and hsl because we have many new syntaxes(functions) coming in the near future. We can work with bigger color gamuts.

Now we do not have to add commas when specifying rgba values.
Example :

.color-old-syntax {
background-color : rgb(100,255,120);

}

.color-new-syntax {
background-color : rgb(100 255 120);
}

You do not need an a in to specify opacity

While we needed to specify rgba or hsla so that we could add an opacity value to the element, we do not need it in the new syntax.
Example :

.color-old-syntax {
background-color : hsla(100,50,50,0.5)
}
.color-new-syntax {
background-color : hsl(100 50 50 / 0.5)
}

Note that you still would be able to specify the opacity in the same function. The syntax has changed from comma separated values to a forward slash (just to specify the opacity value).

Specify values with percentages in rgb

You can now specify the color values in percentages rather than specifying them on a 0 to 255 scale.

.color-old-syntax {
background-color : rgb(127,100,100,0.5)
}
.color-new-syntax {
background-color : rgb(50%,40%,40%,0.5)
}

This is a better way to visualise how the colors would behave when mixed up in certain percentages or to compare two rgb colors.
Needless to say, you do not have to use this if you do not want to. Everything is backward compatible.

What's more, you could also mix and match percentage and absolute values inside the rgb() function. But I would not recommend that.
Example :

.rgb-background-new {
background-color : rgb(100% 255 50%)
}

//is same as

.rgb-background-old {
background-color : rgb(255 255 127)

}

This mix and match feature is just in chrome right now.

hsl() is more intuitive than rgb()

hsl stands for hue saturation lightness
Hue is the actual color you want to get. It is in the range of 0 to 360 degree where 0 and 360 is pure red. (see the hsl color wheel for more info).
Saturation is the amount of color that you want of a certain hue. This is specified in percentages.

The lightness of a color can be described as ** how much light** you want to give the color. It is also in percentage where 0% is black and 100% is white. 50% is the sweet spot if you want to get the most pure color.

.hsl-map-one {
background-color: hsl(0 50% 50%);
}
// is same as
.hsl-map-two {
background-color : hsl(360 50% 50%); 
}

red -- 0
green -- 120
blue -- 240
hsl in this way is more intuitive if you need to specify colors in between the three primary color (for example anything that is a mix of red and green would be between 0 and 120), you just need to change the first value of the function for that unlike rgb().

Hue values in hsl() can go beyond 0 degree and 360 degree

As we know hsl() hue works on the concept of color wheel, it makes sense that the hue value can go beyond 360.
Example :

.hue-value-one {
background-color : hsl(120 50% 50%)
}

// is same as  

.hue-value-one {
background-color : hsl(480 50% 50%)
}

The hue value can also go negative. (You can visualise this as the values go from 0 to negative, the arrow rotates in counterclock wise direction). Hence hsl(120 50% 50%) is same as hsl(-240 50 50).

These properties are particularly useful when you use javascript to dynamically change the color values. You do not have to use a lot of calculation on javaScript to make this work. Quite handy isn't it?

Opacity can now work in percentages

Not that it would make much difference, yet it is better to know that we can now specify the opacity values in decimal as well as in percentages.

.opacity-box-one {
background-color : rgb (100  200 100 / 0.5);
}

// is same as

.opacity-box-two {
background-color : rgb (100 200 100 / 50%);
}

That is it. If you know any other tricks or newer css features , feel free to comment that below. It would be very helpful for all the readers and me as well.