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.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Converting a CSS colour into the HSB a design tool expects.
- Translating a web palette for a graphics application.
- Understanding why a colour picked in one model looks different in the other.
- Handing a web-defined colour to someone working in an image editor's picker.
- Producing HSB values that match an existing HSL specification.
Frequently Asked Questions
- Why can HSL not convert straight to HSB?
- Because there is no direct formula — the conversion goes through RGB. Both models describe the same colour space differently, and RGB is the common ground they are each defined against.
- Is HSB the same as HSV?
- Yes, brightness and value are two names for the same channel. Photoshop says HSB, most programming libraries say HSV, and the numbers are identical.
- Why does hue stay the same but the other numbers change?
- Hue is the one channel both models share, so it passes through untouched. Saturation is defined against different references — lightness against a mid grey, brightness against the maximum channel — so the same colour reports different values.
- Why is HSL 50% lightness the pure colour?
- Because HSL's lightness runs black to white with the fully saturated colour exactly halfway. HSB's brightness instead tops out at the pure colour, which is why HSL 100% is white and HSB 100% is not.
- Which model should I work in?
- HSB for picking a colour, since raising brightness behaves like turning up a light. HSL for generating variations programmatically, because a tint and a shade are symmetric moves around 50% lightness.
- Can I use HSB in CSS?
- No — CSS has `hsl()` but no `hsb()` or `hsv()`. Convert to HSL, RGB or hex before writing it into a stylesheet, which is one of the main reasons this conversion comes up.
Common errors and gotchas
- Assuming saturation means the same in both, when the definitions differ and the number changes.
- Treating lightness and brightness as interchangeable, which they are not.
- Copying HSB values into CSS, which has no HSB function.
- Confusing HSB and HSV, which are one model under two names, with HSL, which is a different one.
- Expecting a 50% lightness to become 50% brightness, when the fully saturated case maps to 100%.