HSB to HSL Converter

Convert HSB / HSV (hue, saturation, brightness) color values to HSL.

#2e8ae6

Hue

Saturation (%)

Brightness (%)

HSL

Hue

210°

Saturation

79%

Lightness

54%

hsl(210, 79%, 54%)

#2e8ae6

HSB / HSV to HSL conversion

HSB (also called HSV) represents colors with Hue (0°–360° on the colour wheel), Saturation (0–100% from grey to vivid), and Brightness/Value (0–100% from black to full color) — the model used by most design tools like Photoshop, Figma, and Sketch. HSL uses the same Hue but replaces Brightness with Lightness, which measures how close a color is to black or white rather than how much light it reflects. This tool converts HSB to RGB using the standard sector formula, then RGB to HSL using the min/max chroma formula, entirely in your browser. For the reverse, use HSL to RGB, or convert HSB to RGB directly with HSB to RGB.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Converting a colour from a design tool that reports HSB into the HSL that CSS accepts.
Translating a palette defined in a graphics application for the web.
Understanding why a colour looks different than expected when the model was assumed.
Producing HSL values that match a designer's HSB specification.
Comparing two colours defined in different models.

Frequently Asked Questions

Are HSB and HSV different models?: No, two names for the same thing — Brightness and Value are the same axis. Photoshop says HSB, most code libraries say HSV, and the numbers are identical. HSL is the genuinely different one, and it is the model CSS accepts natively.
How do brightness and lightness differ?: Brightness runs black to full colour, so 100% is the pure hue. Lightness runs black to WHITE, so 100% is white and the pure hue sits at 50%. That is why hsb(0, 100%, 100%) — vivid red — is hsl(0, 100%, 50%), and why the two numbers rarely look related.
Why does the saturation number change too?: Because saturation is measured against different references. HSB divides chroma by the maximum channel; HSL divides it by how far lightness sits from black or white. A pale pink can be 100% saturated in HSL and 25% in HSB — one colour, two consistent answers to two different questions.
How is the conversion performed?: HSB is converted to RGB with the standard sector formula, then RGB to HSL with the max/min chroma formula. There is no direct HSB→HSL shortcut in common use, and going through RGB keeps the result exactly consistent with what a browser computes for the same colour.
Which should I design in?: HSB for picking a colour, because holding brightness constant while sweeping hue keeps a palette even. HSL for shipping it, because CSS speaks HSL natively. Working in one and writing the other is the entire reason this conversion comes up.

Common errors and gotchas

Assuming saturation means the same in both. The definitions differ, so the number changes even when the colour does not.
Treating brightness and lightness as interchangeable, which they are not — 100% brightness is not 100% lightness.
Copying HSB values straight into CSS, which has no HSB function and will ignore or misread them.
Confusing HSB with HSV, which are the same model under two names, and then with HSL, which is not.
Round-tripping repeatedly through 8-bit values, which accumulates rounding error.