Part 1: Unlock how computers process color data and how users can make better color systems
Designers have to be able to see color. It is one of the most important aspects of our work. We can use color to set a mood, evoke an emotion, or convey information. But what if we’re not satisfied with the colors that are available to us? We can build our own color systems. In this blog post, we’ll take a look at how to do that.
We’ll start by discussing how color works and why it’s important. Then we’ll look at some methods for creating a custom color system. Finally, we’ll give you a few tips for using your new system in your designs. Let’s get started!
Color is experiential
When it comes to color, there are two main ways of thinking about it- subjectively and objectively. Subjectively, color is all about preference and what looks good to the eye–It is also about what individuals find abhorrent.
For instance, I abhor “creamsicle orange” stemming from an experience when I was 7 years old and down with a stomach bug. The color flashed on the television during the garbage disposal scene of the 1981 comedy “The Incredible Shrinking Woman,” immediately getting me sick. It’s my first vivid memory of color.
No wonder when pitching color choices in pitch meetings, it’s common to get a lot of visceral reactions–after all if you happen to use creamsicle orange, you just unknowingly made me experience a negative synaesthesia reaction.
That’s why it’s important to think about your audience when you’re choosing colors for your project. What feeling do you want to evoke? What colors can help you achieve that goal?
This is mostly used in art and design when creating something that needs to be visually appealing.
Color is also objective
Objective color, on the other hand, is less about what looks good and more about what serves a purpose. This is often seen in things like road signs and instruction manuals where clarity is more important than aesthetic. For UX designers for screen interfaces, Color contrast is a must with WCAG accessibility requirements.
Of course, there are endless gray areas in between these two approaches but understanding the difference between them is a good place to start.
When choosing colors, think carefully about what message you want to send and who your target audience is. colors should be integrated holistically allowing for adaptability at scale while keeping brand continuity. In order to feel more comfortable with color decisions, it is important to know some terminology.
The first permanent color photograph, taken by Thomas Sutton in 1861 using James Clerk Maxwell’s proposed method of three filters, specifically red, green, and violet-blue.
A photograph of Mohammed Alim Khan taken in 1911 by Sergey Prokudin-Gorsky using three exposures with blue, green, and red filters.
The RGB COLOR MODEL
The RGB color model is a way to represent and display images that has been used in electronic systems such as televisions or computers. Before the electronic age, it formed the basis of creating the first color photographic images such as James Clerk Maxwell’s famous tartan ribbon photograph from 1861. Maxwell presented this image on a rudimentary projector using 3 dyed photographic slides stacked on top of each other, Red, Green, and Blue.
RGB became a standard color model but was not the most accessible color picker system to artists and designers. With the ability to change Red Blue and Yellow parameters from 0-255, it is a challenging space to find a color needle in a 16.7 million color haystack.
Philipp Otto Runge, Color Sphere, 1810.
Munsell’s color sphere, 1900.
Three-dimensional representation of the 1943 Munsell renotations
HSB and HSL Color Models
The idea of using a three-dimensional color solid to represent all colors was developed during the 18th and 19th centuries. Albert Munsell, an artist who taught optics as well (and is now recognized for his work on photometry) wanted to create something that would be both easy enough so it could easily teach people how different light worked but also rigorous enough where its accuracy never left any room for doubt or confusion–which led him towards developing this new system called “color notations”. The Munsell color system was used to develop the HSL and HSB color models in the late 1930s and allowed designers to more intuitively interact with color.
The parameters of control are Hue, Saturation, and Brightness / Luminance. The main difference between the two models is HSB is mapped to a single cone, while HSL is mapped to a double cone. Let’s break down the 3 parameters.
Left: Model of HSL Color Model, Right: Model of HSB Color Model
Hue- "Taste the Rainbow"
Hue are the individual colors arranged on a wheel, controlled by a circular unit of measurement called degrees. If you have seen a color wheel in an art class, this is a tool that allows for an easy visualization of the concept.
An image of a hue study a painter will perform to help visualize pigmented paints
15 and 30 degree anchor points
There are 360 degrees of measurement in a circle. The first valuable grid marker that should be remembered is 30 degrees.
360 degrees / 30 degrees = 12 different hues.
360 degrees/15 degrees -24 different hues.
I am a fan of grid systems in helping me simplify complex decisions. I like to think through defining the hue through understanding specific anchor points.
Red is 0 degrees, Red is also 360 degrees– whether you are controlling numerical values in sketch or figma or navigating a slider bar in adobe software the hues are mapped to a circle. Red occupies the left and right end of the range.
Notice on this Adobe Illustrator HSB slider interface that 0 degrees and 360 degrees are the same red hue.
The 6 primary anchor points are placed at these values
- Red 0°
- Yellow 60°
- Green 120°
- Cyan 180°
- Blue 240°
- Magenta 300°
See this Hue color wheel to see the degree measurements corresponding to 6 standard hues. These colors form the basis of CIELAB which are present in curves adjustments in Adobe Photoshop
From there you can begin to fill in the gaps, the next color wheel is the 12 hues generated from a 30 degree anchor points.
12 colors are generated from 30 degree measurments.
The next example is the full 24 hue color wheel using 15 degree anchor points.
Finally, 24 separate hues are generated from 15 degree measurements.
Saturation
After picking a hue, the next parameter to control is saturation. Saturation is valued on a 0-100 scale with 100 being the richest possible color and 0 percent will be a neutral greyscale version of that color. You can see saturation controls in action in the diagram.
In this diagram, you can see how saturation is either the presence or absence of color intensity.
Brightness
Brightness is a value controlled with a number between 0 and 100. Like saturation, it’s sometimes written as a percentage.
To think about brightness, think about a lightbulb on a dimmer switch. 100 percent brightness is the color viewed at full brightness, while 0 percent will always be black no matter your hue or saturation values. In the diagram below will represent a color with a range of brightness from 100 to 0.
In this diagram, you can see how brightness and how its like viewing the color under a less intensifying light source
Shades and Tints
In the world of color theory, there are three main categories of color: hue, tint, and shade. A hue is a pure color that has not been mixed with any other colors. The term “tint” refers to a hue that has been lightened by adding white, while the term “shade” refers to a hue that has been darkened by adding black. As a result, tints tend to be very soft and subtle, while shades can be quite rich and dramatic. In the example below, A pure hue is placed at the center of the row of colors; shades are darker values placed to the left, while tints are the lighter values placed to the right.
Tips Navigating HSB
Use Anchor System for Hue
I would recommend following the 15 and 30 degree anchor system listed above. If stock 240 degree blue is too boring, small tweaks can be made to find a compelling variation. From there, if you need to adjust by less than 15 degrees, you will not lose your bearings of color location.
In this diagram, see how with minimal tweaks to the hue values you generate some sophisticated hues.
Adjust Visibility with Saturation
One technique for fixing colors that are too overpowering is adjusting their visibility
If you have a color that’s really overpowering everything in your UI, a quick go-to way of fixing it is to reduce the saturation.
For instance, Look at the example below the red on the left is full saturation and is overwhelming the yellow of the other letters. Pulling back the saturation balances the appearance of the red in relationship to the yellow.
In the color examples above, you can see how the red has been subdued, which can better balance it against other hues that are lighter in appearance.
Black is not the Opposite of White
With the HSB Color Model, Pure black and white is straightforward.
To make black, the brightness is set to 0%. It does not matter the Hue and Saturation settings.
A beginning misconception in learning about shades and tints is that black and white are directly opposite. In the HSB system these illustrations show that black and white are not at all opposite.
- Adding black means subtracting brightness.
- Adding white means adding brightness and subtracting saturation.
To make white, set the brightness to 100% and saturation to 0%. The Hue does not matter.
In HSB, This diagram shows that Black is not the opposite of white.
What strikes me about the above examples is that you have 3 parameters to change value, for black you need one slider while white needs two. The result is duller shades as you move closer to black.
Black should be made as the inverse of making white. You should think in reverse. To add black is to remove white.
To add White:
- Add brightness
- Subtract Saturation
To Remove White
- Subtract Brightness
- Add Saturation
Following this formula, you will achieve more vibrant shades consistently.
This example follows the advice given for creating vibrant shades, it should be thought of the opposite of adding white.
In this article I hope that you found more understanding and creative control in your color generation process, in the next post I will write about new tools that will make you consider other options to the HSL color model, namely CIE LAB and its more accessible cousin, LCH.
Enjoy.
