The B in HSB is not the L in HSL
HSB, the model behind the color pickers in Photoshop and Figma, sounds like HSL but defines its third value differently. That is why the number you read in a design tool and the number you write in web code look out of step for what is meant to be the same color. This converter moves between HEX and HSB in both directions, shows the HSL value for the same color beside it, and prints the channels that each figure comes from.
Call the largest of the three channels M and the smallest m. Brightness B in HSB is M as it stands, while lightness L in HSL is the midpoint of M and m. The hue angle is identical in both. Enter pure red and the two part company: B reads 100 percent, L reads 50 percent. As of October 2026 the W3C CSS Color specification has no hsb() or hsv() function, so the web needs HEX or hsl().
An achromatic color has no largest channel to measure from, so its hue is undefined and is reported as 0. HEX holds 8 bits per channel, so a value that travels out to HSB and back can differ by a rounding step. OKLCH conversion and palette generation are not covered here.
Frequently asked questions
The third value is defined differently. B in HSB is the largest channel as it stands, while L in HSL is the midpoint between the largest and smallest channel. Pure red therefore reads B 100 percent in HSB but L 50 percent in HSL.
CSS has no hsb() or hsv() function. To move an HSB reading from a design tool onto the web you need the hsl() value or the HEX for the same color, so both are shown in the result.
Hue is undefined when saturation is zero. All three channels are equal, so there is no largest channel to measure the angle from, and the value is reported as 0 and labeled achromatic.