Rainbow Colored Circle with CSS HSL()

We have seen earlier how to create basic & advanced shapes with Pure CSS & now, we’ll do a CSS coding exercise.

We’ll create a circle and then assign rainbow colors to it using hsl() color values. Let me mention briefly that the hsl() which stands for “hue, saturation & lightness” is a CSS function that allows you to provide colors by specifying the hue, saturation & light components of the color.

The HSL model is very easy to use & understand because the HSL model allows you to select a base hue & then adjust its saturation & lightness as desired.

This exercise was done by using hsl() color values. You can also use RGB or hexadecimal values to define colors for your shapes, texts, etc.

Check out the below video to go through the coding exercise…

Check out my bestselling and highest rated Udemy course —
JavaScript — Marathon Interview Questions Series

Looking for remote/contract Web/UI/Full stack opportunities in the US? Connect with the leading staffing experts of the industry today.

About me:

Founder and CEO of an IT company in India, I have more than 25 years experience of in dealing with people, processes, and codes. I started online training for my students when it was not in fashion and have trained more than 1000 students/working professionals personally which has helped them to secure awesome jobs or even start their own businesses.

Check out my Udemy profile to know more about the courses that I teach.

I am also been an active corporate trainer for several years now and have been consulting with top Fortune 500/1000 companies to streamline their development projects efficiently. My goal is to share knowledge with a primary focus on advanced tools & techniques, projects, and standard programming practices to help my students understand the basics and fundamentals and make awesome technological implementations.