# Difference between HSB and HSL?

Hi everyone.

I’m currently working on Color Theory. They advise us to use the Adobe color site.

There is no `HSL` but `HSB`. I figure it must be how much dark the color is.

My question is : why are there 2 different ways in this color system?
Does the alpha value apply to `HSB` (`HSBa`)?
And finally: in your opinion, which one is the best?

`L` => Luminosity (or, Lightness)
`B` => Brightness

The terms are near equivalents for the same perceived level of emitted light.

`HSB` is not a CSS color, though. `HSL` is. We need to define a function to output `HSB` and then we need a CSS preprocessor like SASS to interpret the function (as I understand it).

1 Like

Thanks for the precision.

I’ve just started learning HTML and CSS (front-end) so I don’t really understand what you say about functions and preprocessors:

Do you mean that there is a way that it could change brightness into lightness automatically ?

Edit: I got an idea with your answer. I’ve just found this website to convert hex to hsl (since hex values are indicated on Adobe Color website): https://colordesigner.io/convert/hextohsl

RGB is 24-bit color; whereas HSL is only 22-bit so has a palette less than a quarter the size. The math under the hood is also very simple, and the colors can be computed very easily. Pick any hue, red, green or blue, and then compute (or assign) the percentage value of saturation, and the percentage value of lightness.

We can almost tell just from looking at it what an HSL color will be. The hues are divided up into 120 sub-hues for each of the three main hues. The modulus of,

``````hue % 120  (needs correction, we're looking for 0, 1 or 2)
``````

will tell us if it is red, green or blue as the base. The higher the middle value (S), the more saturated the color. The higher the third value (L) the brighter the color.

As for the function mentioned to convert to HSB, that would be written in SASS, not JavaScript and certainly not CSS. Wait until you have all the HTML and CSS basics down pat before embarking on SASS, which should rightly wait until you have some basic JavaScript programming under your belt.

Saturation is a pretty tough concept to understand, but in plain terms, the lower the value, the wider the spectrum within the hue range, meaning we are mixing more color frequencies. The lowest value will be anything but that hue. More like gray. The highest value is a narrow spectrum dialed right into practically one individual color of the hue spectrum. It mixes only slightly with the color to its left and the color to its right which bleed into that single color.

Say we have a color with H=60. That is in the red part of the HUE spectrum. If S=0 we won’t see much of the redness, only a hint. If S=100 it will be a solid color (assuming L is non-zero; for our purposes let’s set L=50) with only a tiny bit of bleed from H=59 and H=61. As we lower the value for S, more colors from the left and from the right will be mixed in. If S=50 we might think of all the colors from H=30 to H=90 as being mixed in by diminishing degrees the farther they are from the central hue.

``````               | more saturation |
30                55   60   65                 90
|----------> more -->   |   <-- more <----------|
less        mixing             mixing        less
|                less saturation                |``````
2 Likes

Thanks a lot! Your explanation was very clear and detailed.

1 Like

Consider,

``````const get_hue_range_from = angle => {
x = angle % 360
return x < 120 ? 'R' : x < 240 ? 'G' : 'B'
}
const hues = [0, 60, 120, 180, 240, 300]
hues.forEach(x => console.log(get_hue_range_from(x)))
``````
``````R
R
G
G
B
B
``````

Is it JavaScript? I can’t fully understand it yet…

1 Like

Yes, it is. The thing to note is the list of HSL hues, which range from 0 to 360 degrees (0 and 360 being the same angle). Red falls in the first 120 degrees, green in the second 120 degrees, and blue the latter 120 degrees.

1 Like

I understand now! It was very interesting to see it from a different perspective (JavaScript). Thanks!

1 Like

Let’s go back to the literalness of saturation and lightness in the HSL model. Compare that to hex or rgb. There is no comparison, only rigorous analysis of the net total of illumination of the three colors in the set, and a further analysis of the central hue. It’s math that draws the distinction between the two.

My guess is that at the core, HSL or some variation of it is the math driver that gives us what we see on the screen. The eye won’t notice the difference 80% compression does with the format swap.

The concern might be with transmission. If the bandwidth is intentionally low, then JPEG is the best option. Now considering how that type of compression works, mightn’t it be better to start of with a smaller spectrum, to begin with? My view, on half-arsed analysis is that 22-bit compresses better than 24-bit and will render a smoother JPEG.

1 Like

Thanks! I’ll remember JPEG is better and my preference goes to HSL now!

After your reply, I googled “picture and hsl” and I 've learnt that I can directly adjust the hue, saturation and lightness of a picture with the HSL tool. Great!
Is it possible to do it using css properties or should I use another tool like http://hsl.imageonline.co/ ?

1 Like

CSS has a `filter` property that will take some reading to learn about. I wouldn’t go into that, just now. Keep up with the learning of core CSS properties and their behaviors. There is a world of information to be got. The possibilities are endless.

1 Like

BTW, that should be floor division, not modulo. What was I thinking?

``````Math.floor(hue / 120)
``````

will give, 0, 1, or 2.