HSL to HSLA
Same hue logic, now with opacity
HSLA extends HSL with an alpha channel, so you can keep hue/lightness tuning while controlling transparency for state layers and overlays.
Design system pattern
A common approach is to define base palettes in HSL and derive translucent variants in HSLA for hover, focus, and disabled states.