HSL to HSB Converter
Convert HSL (Hue, Saturation, Lightness) color values to HSB / HSV (Hue, Saturation, Brightness) instantly, with a live swatch.
How HSL to HSB conversion works
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) both describe color using the same 0–360° hue wheel, but they define saturation and the third channel differently — so you can't just rename the numbers. This tool converts correctly by taking your HSL value through RGB as a neutral intermediate: HSL → RGB → HSB. The hue stays the same throughout; only saturation and the lightness/brightness channel change shape.
Why HSL and HSB differ
In HSL, 100% lightness always means white, and 50% lightness is the "purest" version of a hue. In HSB, 100% brightness with 100% saturation gives the purest, most vivid hue, while lightness has no direct equivalent. That's why identical hue/saturation numbers can look completely different between the two models.
Where each model is used
HSL is common in CSS (hsl()) because it maps well to lightening/darkening a color for design systems. HSB/HSV is the model most color pickers (Photoshop, GIMP, Figma) use internally, since dragging "brightness" down keeps a color rich instead of just fading it toward white.
HSB and HSV are identical
HSB (Brightness) and HSV (Value) are two names for the exact same color model — no conversion is needed between them. This tool shows both labels so you can copy whichever your target software expects.
100% client-side
All math runs locally in your browser via standard RGB intermediate formulas — no color values are ever sent to a server. Drag the sliders or type exact numbers, and the URL updates so you can share or bookmark a specific color.
Private & free — this tool runs entirely in your browser.