Three dials on a color wheel
Hue is an angle around the color wheel, in degrees. 0 is red, 120 is green and 240 is blue, with the other colors spread between them. Saturation runs from 0% (gray) to 100% (fully vivid). Lightness runs from 0% (black) through 50% (the normal color) to 100% (white).
hsl(262, 83%, 58%) is a violet. Its hue of 262 degrees sits just past blue. It has 83% saturation and 58% lightness.
HSL is a different way of writing sRGB, so it reaches the same colors as hex and rgb(). The catch is rounding. Rounded to whole numbers, #7C3AED becomes hsl(262, 83%, 58%), and converting that back gives #7C3BED, a slightly different color.
Shades without guessing
The appeal is that you can hold the hue and move the other two dials. CSS Color 4's own example keeps the hue at 120 degrees: hsl(120 100% 50%) is lime green, 25% lightness gives a dark green and 75% a light green. Doing the same with RGB means juggling three channels. The spec says HSL makes it easier to build sets of matching colors than working with sRGB values directly.
In CSS you write it as hsl(262 83% 58%), with an alpha after a slash if you want one: hsl(262 83% 58% / 60%). The deg unit is optional, and the older comma form needs the % signs. hsla() is an alias for hsl().
Equal lightness, unequal brightness
HSL's lightness doesn't match what the eye sees across hues. Pure blue and pure yellow both have 50% lightness, and yellow looks much lighter. The contrast ratio shows how much: on black, yellow scores 19.56:1 and blue only 2.44:1.
So a set of colors at the same HSL lightness won't look equally bright, and it won't pass contrast evenly either. Check each text and background pair on its own. Hue steps are uneven too, and OKLCH was built to fix both problems.