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.

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.

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