HSL ≠ HSB

HSL is not HSB (Hue, saturation, brightness)

HSB is a colour model that was designed to approximate the way paints are mixed. It’s also the more popular display in design apps.

Which will confuse and frustrate.

The hue wheel remains the same but saturation is from black to full colour and brightness is from white to full colour.

There is complex math that allows us to translate the two, but it’s easier to use the browser or set hex values in an app like sip and let them be translated for you. A good site for translating values is convertingcolors.com (opens new window).

See the Pen HSB vs HSL (compiled) by Dave Cross (@davecross) on CodePen.