Tired of guessing when you open the color picker?
One day a developer asked me a question I’d never been asked:
Is there a way to programmatically find good colors?
I chuckled a little inside but I knew a good developer like him would take “that can’t happen” as a challenge. So, I made it my own challenge.
With an open mind, I started peeling back the numerical systems computers use to define a color.
Before you grab your popcorn and large canister of liquid sugar, let’s get something out of the way.
This is not the whimsical care free side of color choices you might be use to. But this is going to change your approach to color choices forever.
I’ll start from the beginning to show exactly how I came to the conclusions at the end of this article.
The two main systems I started with were:
1. Hex code
This is a system in which red, green, and blue are defined by two characters each, using the range 0-9 and A-F.
Think of a combination lock. This particular lock has six dials.
The first two dials represent the value of red, the second two the value of green, and the third two the value of blue.
Depending on the number or letter you rotate the dials to, a color is created.
This system is typically found in web design as part of the styling. Something like #854ed8. Here’s an example:
Though compact, the variables for these codes are confusing. We don’t count to nine and switch to A normally, and finding a similar color could mean typing a completely new sequence of letters and numbers.
Red, green, and blue are the basis for all colors. This system is a bit simpler because each is defined by a number ranging from 0-255.
To make this a bit easier, think of a dripping paint brush.
74 drops of red, 176 drops of green, and 221 drops of blue will produce this color:
Pretty simple, right?
It may be possible to find similar colors by re-arranging the amount of drops. For example, I’ve simply changed around the numbers to get this color:
But what about variations? In other words, the lighter and darker versions of the color?
Just adding white or black doesn’t cut it, and with RGB that’s a bit of a guessing game.
At this point I was ready to go back to the developer who started this science experiment and say “HA! I knew it couldn’t be done!” But before you shrug and leave to check your email, take a look at what I found next.
The ultimate system was right in front of me.
No, seriously, it’s right here:
A magic system called HSB
At the beginning of this article I promised to change your approach to color choices forever.
I’ll admit, that was a pretty bold statement. But my confidence comes from my own experience.
Once I stumbled upon this, my world was changed and yours will be too.
The variables are simple:
- H = Hue – If you’re not familiar with hue, it’s really just a fancy word for a color.
- S = Saturation – How intense the color will be.
- B = Brightness – How much white or black is added to the color.
At first, this doesn’t seem easier than HEX or RGB. But H, S, and B are the foundation for the color picker you see in just about every app like Illustrator, Photoshop, and Sketch.
If you’ve ever seen something like this, you know how to work with HSB:
There’s just one problem…
Here’s how most people use the color picker:
It’s like hunting for each key on a keyboard and smashing your pointer finger down when you find it. Like a hungry hawk swooping down on unsuspecting field mice.
You’re far beyond that clumsy way of typing. There are far more advanced and skillful ways to use a keyboard. But have you moved past that with the color picker?
Introducing Color Picker Advanced Mode
Just like finger placement on a keyboard, you need a system that puts you in control of the color picker.
HSB allows you to fine tune color selections and get the most out of the color picker.
Think of the color panel (pictured below) as a map.
You need to find specific coordinates on this map and random guessing just won’t do. You need a system to follow.
On a traditional map, latitude and longitude are numbers that point to a specific place on a map.
Think of S and B as your latitude and longitude, with the added variable of what planet you’re on (H):
- Saturation moves the selection circle left and right.
- Brightness moves the selection circle up and down.
- Hue changes the color type you’re working with (e.g. red, blue, yellow, etc.)
This gives you a precise way to find colors and their variations. You’re working with numbers now instead of frantic clicking.
Let’s take a look at an example:
Notice that each of these colors was chosen by simply changing the numbers for Saturation and Brightness. It really is almost magic.
You need more than numbers
All of this started because I needed to give my developer friend an answer to the question:
Is there a way to programmatically find good colors?
The final answer is no.
I know we just looked at a very advanced and seemingly fool proof way to find colors and variations. In fact, I still use this system today with a lot of success. But HSB is not 100% predictable.
Not every color responds well by default to what HSB has to offer. It still takes a keen eye and a few skillful techniques to make any color work in this system.
Take Control of the Color Picker
Searching the color picker without direction is no fun. When you sign up you'll get a free guide to taking control of it as well as other great information about choosing great colors.