HSL vs HSB: What's Actually Different

Open two color pickers side by side and you'll see the same hue slider, roughly the same idea of saturation, and then a third number that behaves nothing alike. That's the HSL vs HSB confusion in one sentence: two models that share two of three letters and disagree completely on what the third one measures. (HSB and HSV are the same model with two names for that third axis, so if you typed hsl vs hsv instead, you're asking the same question.)

The short version: hue is identical in both models. Saturation is close but rarely equal. The third value, lightness in HSL and brightness in HSB, is where a number that looks completely normal in one model can look wrong the second you convert it. Here is what is actually happening, with real numbers, so a converted value never surprises you again.

Hue is the one number that never moves

Both models plot color around the identical 360-degree wheel, and a given hue means the same thing whether you are reading it in HSL or HSB. 0 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta. Drag the hue ring on the Picker and the color you land on is exactly the same whether the tool happens to be reporting HSL or HSV underneath, the wheel was never where the disagreement lived.

Where the models split: a bicone versus a cone

Saturation and that third value both describe how far a color sits from gray and how light or dark it reads, but each model measures it against a different shape. HSL is a bicone, two cones joined at their widest point. Lightness runs from 0 percent black at the bottom tip, through 50 percent for the fully saturated hue at the widest ring, up to 100 percent white at the top tip. Push lightness past 50 percent in either direction and you are mechanically mixing in white or black, which is why very light or very dark HSL colors always feel a bit washed out or muddy, there is less room left in the cone the further you go.

HSB is a single cone, point down. Brightness runs from 0 percent black at the point to 100 percent, the full undiluted hue, but 100 percent brightness only produces white once saturation drops to 0 percent. Saturation and brightness get read together off a flat square: brightness sets how far up the cone you are, saturation sets how far you sit from the center axis. That square is exactly what you drag around inside the Picker.

HSL vs HSB by the numbers: same red, different third value

Pull up any red and watch the third number move. Pure red, #FF0000, sits at hsl(0 100% 50%), dead center of the HSL bicone, as saturated and as far from black or white as a color can get. In HSB the same red is hsb(0 100% 100%), full brightness, because there is no black mixed in and HSB does not reserve any room at the top for white.

• White (#FFFFFF): hsl(0 0% 100%) and hsb(0 0% 100%) — the two models agree, since saturation is 0 either way.
• Black (#000000): hsl(0 0% 0%) and hsb(0 0% 0%) — same story, both tips of both shapes meet at black.
• Maroon (#800000): hsl(0 100% 25%), but hsb(0 100% 50%). Same red, same full saturation, and the third number is exactly double.
• Firebrick (#B22222): hsl(0 68% 42%), but hsb(0 81% 70%) — and here even saturation shifted, not just the number with the different name.

That firebrick line is the part people miss. Saturation only matches between HSL and HSB at the extremes: pure hues, pure grays, black, white. Everywhere else, converting between the two models moves both numbers, not just the one that changed names. If you have ever hand-typed an HSB value into a field expecting HSL and gotten a color that looked far too pale, that is exactly why.

Why pickers use HSB and CSS uses HSL

This split is not an accident, the two models were built for different jobs. HSB dates to 1978, designed to match how a painter thinks: start with pure pigment at 100 percent saturation and 100 percent brightness, then dilute it toward gray or darken it toward black, one control at a time. Flatten that onto a 2D square, saturation across, brightness up, and every reachable color from a given hue is visible in a single glance. That square is the whole reason the Picker calls itself an HSB color picker, even though its copy panel labels the row "HSV", same model, older nickname for the third axis.

HSL was built for a different habit: describing a color relative to gray, symmetrically. A fully saturated hue sits at the exact midpoint, 50 percent lightness, and moving lightness up or down in either direction takes you toward white or black by the same logic. That symmetry is ideal for CSS, where you are rarely choosing a color from nothing, you are usually taking one you already shipped and asking for a lighter hover state or a darker border, one number at a time, hue untouched. hsl(220 70% 45%) stepping to hsl(220 70% 65%) is an obviously lighter version of the same blue; HSB has no equally clean one-step move that does not risk grazing white.

Converting between the two without surprises

The rule that saves you: never assume the saturation number carries across. When you convert HSB to HSL, or back, lightness and brightness relate directly, but saturation has to be re-derived from the result, it is not copied.

L = B * (1 - S / 2)

S_hsl = 0                          if L == 0 or L == 1
S_hsl = (B - L) / min(L, 1 - L)    otherwise

You do not need to run that by hand. Drop any color into the Converter and it lists HSL and HSV as two separate rows for the same exact color, so you can compare the real numbers instead of guessing which one moved. For the wider set of formats, including how these two relate to HEX, RGB and newer models, the HEX, RGB, HSL & OKLCH guide covers when to reach for each one.

HSB and HSV are the same three numbers under two names, brightness and value are interchangeable terms for the identical axis. So the difference between HSL and HSV is the same split covered here: hue shared, saturation close but not equal, and a bicone versus a cone for the third dimension.

Try it: read both models side by side

If you are building a scheme from one base hue rather than converting a single color, the Harmony tool works straight off the hue angle both models share, so the lightness-versus-brightness split never has to enter the decision. And if hue, saturation and the color wheel itself are still fuzzy, the color theory basics guide covers those fundamentals before you get to the HSL/HSB split.

Pick any color and open the Converter to see its HSL and HSV rows side by side, the real numbers, not a guess.

Common questions

Is HSB the same as HSV?

Yes. HSB (hue, saturation, brightness) and HSV (hue, saturation, value) are the exact same model, brightness and value are two names for the identical third axis. Paleta's own tools label the value "HSV" in the copy panel even though the Picker's control is commonly described as HSB.

What is the actual difference between HSL and HSV?

Hue matches exactly. HSL's lightness reaches white at 100% no matter the saturation, because it is shaped like a double cone (bicone) that tapers to both black and white. HSV's value (brightness) only reaches white once saturation is pulled down to 0%, because it is shaped like a single cone with no white point at the top. Saturation itself also differs between the two models for any color that is not a pure hue, gray, black or white.

Can I convert HSL to HSB by just renaming the fields?

No. Only hue survives unchanged. Lightness and brightness relate through a formula, L = B x (1 - S / 2), and saturation has to be recalculated from the result rather than copied. Renaming L to B, or B to L, will shift the color, sometimes drastically for dark or muted tones like maroon or firebrick.