What Is HSB/HSV, and Is It the Same Thing as HSL?

1. How HSB and HSL differ

The first component is the same in both models: H (hue) is an angle on the color wheel running 0 to 360, with red at 0, green at 120, and blue at 240. The other two components sound alike and are computed differently, and that is where people get stuck.

The three components of HSB (also called HSV)

• S (saturation): how much white is mixed in. S=100% means no white at all; S=0 gives white or gray.
• B (brightness, or V): the value of the brightest RGB channel. B=100% is the pure hue at its brightest, B=0 is black.

The three components of HSL

• S (saturation): how far the color sits from a gray of the same lightness. It measures vividness, not how much white was added.
• L (lightness): the average of the brightest and darkest channels. L=50% is the pure hue, L=100% is white, L=0 is black.

The same color rarely reports the same S in both models, and L and B differ as well:

2. Converting between HSB, HSL, and RGB

Both models start from the max and min of RGB, so hue comes out the same in both. What differs is the denominator of S and the third component. With RGB normalized to 0 to 1, the whole difference is four lines:

V = max                       /* HSB brightness */
L = (max + min) / 2           /* HSL lightness */

S_hsb = (max - min) / max                  /* denominator is the brightest channel */
S_hsl = (max - min) / (1 - |2L - 1|)       /* denominator varies with lightness */

In code, the hue part is shared and computed once:

function rgbToHsb(r, g, b) {
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    const d = max - min;
    let h = 0;
    if (d !== 0) {
        if (max === r) h = 60 * (((g - b) / d) % 6);
        else if (max === g) h = 60 * ((b - r) / d + 2);
        else h = 60 * ((r - g) / d + 4);
    }
    if (h < 0) h += 360;
    const s = max === 0 ? 0 : (d / max) * 100;
    return [Math.round(h), Math.round(s), Math.round((max / 255) * 100)];
}

function rgbToHsl(r, g, b) {
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    const d = max - min;
    const l = (max + min) / 2 / 255;
    let h = 0;
    if (d !== 0) { /* hue is computed exactly as above */ }
    const s = d === 0 ? 0 : ((d / 255) / (1 - Math.abs(2 * l - 1))) * 100;
    return [Math.round(h), Math.round(s), Math.round(l * 100)];
}

3. The sliders in PS/Figma pickers

Photoshop’s picker offers a pair of radio buttons that switch between HSB and HSL. Pick B and the third slider is brightness, pick L and it becomes lightness. Figma’s color panel is fixed at H, S, B with no HSL option.

CSS accepts hsl() and hsla(), and has no hsb(). The three numbers you copied came from an HSB panel, so pasting them into a stylesheet puts brightness where lightness belongs.

1. Check which model the tool reports: the Figma panel and the Photoshop default both report HSB, so do not assume HSL.
2. Convert before it reaches CSS: turn HSB into HSL, or take the HEX instead. Both are mechanical.
3. Take the conversion out of handoff: have specs annotated with HEX so nobody converts models in their head.

4. Tuning colors quickly with HSB

HSB is the more comfortable model for adjusting a color by hand, because each slider does one obvious thing: pull S left to add white, pull B down to add black.

• Move within a hue family: drag H only and leave S and B alone to get neighboring colors at the same intensity.
• Lighten (add white): hold B and lower S, and the color travels straight toward white.
• Darken (add black): hold S and lower B, and the color travels straight toward black.
• Build button states: lock H and S and move only B. Press it down a notch for hover, further for active, and the hue never drifts.

HSL is clumsier for the same job. Adding white means pushing L upward, and at 100% the color is just white. The range that reads as "slightly lighter" is narrower than HSB’s S, so the slider feels less responsive.