What are the variations to a base hue in HSL()?

HTML-CSS
1

I am unable to clearly understand the lesson on HSL().

The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.

What I understood is that once you decide on a color (Hue) for the webpage, then you can tweak around with the Saturation to get different shades on the color for different sections of the page. Not sure how it works.

I am using a HSL calculator and set to hsl(209, 29%, 50%). Tweaking around the “S”, gives totally different colors.

I am trying to do this.

2

Not sure I understand your question. Changing the saturation and lightness does change the color but it doesn’t change the hue.

Here are the HSL values for the image you linked.

Blue:
hsl(203, 96%, 33%)
hsl(202, 66%, 48%)
hsl(202, 51%, 70%)

Red:
hsl(8, 60%, 53%)
hsl(7, 81%, 66%)
hsl(7, 68%, 80%)

Purple
hsl(282, 41%, 59%)
hsl(284, 63%, 72%)
hsl(283, 51%, 84%)