HSB: The Secret to Mastering Color Manipulation in Design

HSB stands for Hue, Saturation and Brightness. It is one of the ways of representing a color in design tools - like a RBG HEX code(#0284C7). By using HSB instead of HEX codes, you are able to manipulate colors in designs faster, accurately and more intuitively.

HEX vs HSB

HSB color system provides a visual representation of colors by mimicking the way humans perceive colors. By splitting a color into three dimensions - Hue, Saturation and Brightness, it allows you to easily achieve the desired color.

In the RGB HEX code of this blue color (#0284C7), first two hexadecimal values stand for how much red there is - 02 (not a lot), the second two stand for how much green there is - 84 (more than red) and the last two stand for how much blue there is - C7 (a lot since this is a blue color). The two hexadecimal characters for each color can range from 00 (ZERO) to FF (100%).

HEX codes are prevalent because they are very easy to share. However, they are not great for manipulating colors. That’s where HSB comes in.

For the same blue color, whose RBG HEX code is (#0284C7) the HSB color value is (200, 99, 78). In the HSB color value of blue (200, 99, 78) the first value 200 represents the Hue, the second value 99 represents the Saturation and the third value 78 represents the Brightness.

Hue represents a particular color on the color wheel. Its value ranges from 0 → 360 (thus, completing a circle). O & 360 are the same and represent red, 90 represents green, 180 represents blue and 270 presents indigo.

Hue Wheel

Saturation represents how much “color” there is in the particular color. It is a value from 0 to 100. 0 means no color saturation and it appears as a gray, 100 is full saturation.

Brightness represents how visible the color is. It is also a value from 0 to 100 where 0 is black and 100 is the brightest version of the color. Think of it as a dimmer switch for your color.

A major part of using colors in UI Design is figuring out the right shades of a color for various element. HSB makes this easy and saves a lot of time.

You can adjust the brightness of a color without changing its hue or saturation, which is incredibly useful when working with gradients or shadows. Similarly, you can adjust the saturation of a color to create subtle variations in color without altering its brightness or hue. By manipulating the hue, saturation, and brightness values, you can create variations of a single color or complementary color schemes. This creates cohesive and visually appealing designs.

For example, if the goal is to create a lighter shade of blue, you can simply adjust the brightness value rather than trying to figure out the right combination of red, green, and blue values in the RGB system.

Try manipulating colors with HEX and HSB for a few UI elements to understand why HSB makes this efficient.

Working with colors using HSB is like running with running shoes and working with HEX is running with your flip-flops. You can still do it, but it takes longer and tires your feet.

There is a catch to using HSB though. CSS doesn’t support it. While it does support HSL, it’s not the same thing. HSB is great for manipulating colors and it should be used just for that. When time for sharing comes, you should just share the HEX code since it makes the developers’ lives easier.

So next time you're working with colors in UI design, ditch the flip-flops and upgrade to running shoes. Or in other words, use HSB over HEX codes. Your designs (and feet) will thank you.