HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value/Brightness) are both cylindrical colour space models that separate hue from the quantity of colour — making it more intuitive to pick specific shades, tints, and tones than using RGB directly. This converter translates between HSL, HSV, RGB, and hex in any direction.
In HSL, maximum Lightness (100%) is white regardless of Saturation — a lightness of 50% gives the pure colour. In HSV, maximum Value (100%) is the fully saturated colour at that hue — making V more directly correspond to brightness. Photoshop uses HSV (calling Value "Brightness"), while CSS uses HSL. Designers switching between the two tools need to understand that "50% saturation" means different things in each model.
The formula is complex — it involves an intermediate chroma calculation and a piecewise function based on the hue sextant. The tool does this instantly; hand calculation is impractical for most use cases.
HSL's Lightness axis makes it easy to create tints (increase L toward 100%) and shades (decrease L toward 0%) of a colour without changing Hue. This aligns with how designers think about colour relationships.
Saturation in HSL measures colourfulness relative to a grey of the same lightness. At S=0%, all colours with the same Lightness are identical greys. At S=100%, the colour is as vivid as possible for that Lightness.
HSL and HSV are not perceptually uniform — equal numeric changes don't produce equal perceived colour differences. For perceptually uniform spaces, use CIELAB (L*a*b*), CIELCH, or Oklab. These matter for smooth gradient generation and colour distance calculations.
See also the Color Converter, CMYK Converter, and the Color Contrast Checker.