Alexander is a front-end developer currently working at Telerik. The few years he spent studying anthropology and working in the usability domain help him not to forget that code should be written first for people and then for machines. He owns and maintains CSS PRE, a small site that compares the popular CSS preprocessors.
Why do we need another color model you might ask? And it is a fair question, considering we already have RGB, HSL, and hex and we’re doing just fine. To convince you, I will tell you why HSB is awesome and how you can easily implement it in any Sass project.
The HSB/HSV color model is actually a close kin of HSL. HSB stands for Hue, Saturation, and Brightness, the Hue component being equal to the one in HSL.
HSB colors, just like their cousin HSL, have some nice advantages over RGB and Hex — they allow you to quickly identify a color by seeing how saturated and bright it is, Chris Coyier also tells us why HSL is cooler and Dudley Storey has a nice visual guide on how to think about HSL colors. All of these pros apply equally well to HSB.
This easy-to-understand-at-a-glance factor isn’t present in RGB and hex — just try to imagine what
rgb(173, 149, 128)or
Also, if you need some level of transparency for a color, hex is no longer an option; you have to choose between RGBa and HSLa (and now HSBa).
HSB colors are also more readily available for use than HSL if you choose/get your colors from graphics software. Programs such as GIMP or Adobe’s Photoshop and Illustrator all prefer the HSB color model to HSL.
Having that foundation, let’s see how we can use HSB in a Sass project.