In more detail
Hue is an angle from 0° to 360° (0° red, 120° green, 240° blue). Saturation runs from 0% (grey) to 100% (full colour), and lightness from 0% (black) through 50% (the pure colour) to 100% (white). It is the same colour space as RGB, only described differently, and CSS accepts it directly as hsl(220 60% 50%). Adding 180° to the hue gives the complementary colour, and lowering lightness darkens a colour without changing its hue.
Why it matters
HSL makes design tasks intuitive: a set of buttons can share one hue and vary only in lightness, and hover states are a few percent darker. But HSL lightness is not perceived brightness. Yellow hsl(60, 100%, 50%) and blue hsl(240, 100%, 50%) have the same lightness, yet against white yellow reaches only 1.07:1 and blue 8.59:1, so always check Colour contrast separately.
Example
For #3366cc the channels are 0.2, 0.4 and 0.8. Lightness is (0.8 + 0.2) ÷ 2 = 50%; saturation is (0.8 − 0.2) ÷ (1 − |2 × 0.5 − 1|) = 60%; blue is the largest channel, so hue = 60 × ((0.2 − 0.4) ÷ 0.6 + 4) = 220°. Result: hsl(220, 60%, 50%). Lightness 70% gives the tint #85a3e0 and 30% the shade #1f3d7a.
Common confusion
HSV (or HSB) is a different model: there, brightness 100% with full saturation is the pure colour, whereas in HSL 100% lightness is always white. Both are just other ways of writing RGB values.