HSL Colour Converter

In short HSL describes a colour the way people actually think about one: hue as an angle from 0 to 360 around the colour wheel, saturation as how vivid it is, and lightness from black at 0% to white at 100%. That makes it the only common format you can edit deliberately. Want a lighter version of your brand blue for a hover state? Raise the lightness and leave the other two alone. Want a muted version for a disabled control? Drop the saturation. Doing either in HEX means changing three numbers at once and hoping. This is also how a coherent palette gets built: hold hue and saturation fixed, step lightness evenly, and every swatch belongs to the same family by construction. One honest caveat that catches everyone eventually. HSL lightness is a mathematical value, not a perceived one — yellow at 50% lightness looks far brighter than blue at 50% lightness, even though the number is identical. So a lightness ramp that looks even in HSL will not look even to the eye across different hues, and if you need perceptual evenness you want LAB or OKLCH rather than HSL.