The Most Practical Color Model for UI design: HSB
The Most Practical Color Model for UI design: HSB
Part 1: An introduction to HSB color models - hue, saturation, and brightness.
Introduction
When I first learned about design, the difference between RGB, CMYK, HSB, HSL confused the heck out of me. Color models can be confusing and overwhelming for new designers. After experimenting, I believe HSB is the best model for designers to work with.
The HSB (hue, saturation, brightness) color model (pictured above) looks intimidating. However, HSB the most intuitive and valuable color model for product designers.
Design programs have options for the designer to switch between color models. The same color is expressed in different ways based on the color model. For example, red is “FF0000” in hex code, “255, 0, 0” in RGB, and “360, 100, 100” in HSB. This all looks nonsense to the untrained eye, but you’ll find HSB easy to understand once we break it down into individual components.
Hue
When we think “color,” we’re really thinking of “hue.” Hue is measured in degrees between 0º and 360º (since this color wheel “circle” has 360º and the hue is somewhere on the circle). The basic colors are arranged along with the color wheel in 30º increments.
I use RGB (and CMY) as anchor points to help me remember how many degrees each basic color is. For RGB: red is 0º (or 360º) and equidistant from red is green at 120º, and blue is 240º.
For example, if I needed Orange, I’d know it’s between 0º (red) and 60º (yellow); therefore, it has to be 30º. Understanding how the color wheel degrees are arranged lets you estimate what a color looks like based on its HSB.
In design software, hues are represented with the hue slider. See how it starts and ends at red? The hue slider is just the color wheel flattened into a strip.
Practical Usage of Hue in UI Design
Changing the hue allows you to generate variations of that color. In UI design, a “boring” color palette is often associated with hues (at 100 brightness and saturation) that are exact matches with the color wheel anchor points (primary, secondary, and tertiary colors). For more visual interest (without changing saturation and brightness), increasing or decreasing the hue by 5 to 25º makes the color feel more interesting and unique.
Saturation
Saturation refers to the “richness” of a color. Saturation is measured as a number between 0 and 100. A saturation of 100 creates the richest possible color for that hue; 0 creates the gray version of that color.
In the color picker UI, saturation corresponds to the x-position of the loupe (technical term for the little knob). Higher saturation = move right (increase x-position); lower saturation = move left (decrease x-position). As you can see, changing just the x-position of the loupe changes the saturation number in the HSB box.
Practical Usage of Saturation in UI Design
Saturation is to balance contrast in UI designs. For accessibility reasons, we always want our text to have a strong contrast ratio with its background. According to WCAG, designers should strive towards a 4.5:1 context ratio whenever possible.
However, this doesn’t mean we want strong contrast and bold colors across the entire UI. If we make everything bold, everything becomes high contrast, and the user won’t know where to focus their attention. When using many colors in a UI, adjust the saturation to prevent overpowering more important elements in your visual hierarchy.
Brightness
Brightness refers to the “brightness” of a color (duh). Brightness is also measured as a number or percentage between 0-100.
In the color picker UI, brightness corresponds to the y-position of the loupe. Higher brightness = move up (increase y-position); lower brightness = move left (decrease y-position). As you can see, changing just the y-position of the loupe changes the brightness.
Black and White Exceptions
To recap, HSB stands for hue, saturation, and brightness, represented as (0-360º, 0-100, 0-100). Two less obvious rules for HSB is:
Black in HSB = (any number, any number, 0), meaning brightness = 0 creates black regardless of the hue and saturation
White in HSB = (any number, 0, 110), meaningful brightness = 100 and saturation = 0 creates white regardless of the hue
These exceptions are easy to understand once you look at the saturation-brightness matrix in the color picker UI. As we move the brightness number down to 0, it creates black regardless of the hue and saturation (x-position). On the other hand, as we move the saturation number left to 0 and the brightness up to 100 (to the top left corner), it creates white.
Generating Monochromatic Palettes
In classic color theory, a “tint” is a mixture of a color with white to create “lighter” versions of that color; a “shade” is a mixture of a color with “black” to create “darker” versions of that color. We often need to generate a monochromatic palette when designing interfaces (similar to the Material palette below).
Since black and white are not opposites in HSB, we can’t simply add white & black to a color. New designers make the mistake of adding white and black boxes on top of the colors to create tints and shades for their monochromatic palette. This works fine for tints but produces dull shades. To create rich and vibrant shades of a color, instead of “adding black,” you should “remove white” by increasing saturation and decreasing brightness.
Luckily, Material design has a color tool to automatically calculate the correct tint and shade for each color (select “custom” instead of “material palette”).
Practical Tweaking Tips for HSB
Here’s a quick reference guide for how to tweak a color’s HSB based on common (non-design) feedback I hear:
“Make it pop” = colors are not bold enough, or do not contrast enough with their surroundings, increase brightness and saturation, choose contrasting colors that aren’t together on the color wheel
“Feels dull” = increase saturation
“Make it feel more professional” = decrease saturation (consider choosing another color)
“Make it more fun” = increase saturation and brightness (consider choosing another color)
“It’s too hectic or distracting” = tweak saturation values to create a more balanced color palette
Learn more about how to use color in Toptal’s UI color guide
This Week’s Event
RSVP for this week’s group mentoring session: a two-hour critique and redesign of a newsletter’s home page.
Don’t forget to subscribe to get all the updates!
These emails might end up in your spam or promotions tab. To fix this, drag the emails back to the inbox or add ambitiousdesigner@substack.com to your contact list or send a reply.
If you found this useful, please consider sharing it with a friend or on social media. It’ll motivate me to write more and keep this going!