A How-To on Picking Pretty Colors
Although picking good colors is an art, there are a few tricks you can use to make picking pretty colors easy. This article comes in two parts: I’ll first go over what makes a good color palette, and second, I’ll outline a formula that you can use to arrive at a good looking palette.
Disclaimer: This is far and away from the only way to choose good colors, and is more so a set of heuristics that I’ve come to adopt myself. My hope is that this can help you pick the right colors for your website/app/game/what-have-you.
Color Palettes and Contrast
First off, we need to recognize that colors don’t exist in isolation. A pretty color isn’t one that is light or dark, saturated or desaturated. When we think about picking colors, we should not be thinking about individual colors so much as think about picking sets of colors, or color palettes.
When we think in terms of sets of colors, we need to think about their interplay: should certain ones stand out or should they blend into one another? This is called contrast.
Picking pretty colors often boils down to picking the right contrasts for your design.
How the colors you use work together in your design determine how pretty they look. But when it comes to color contrast, there are several ways in which it can exist:
Brightness aka. Light/Dark
Brightness is one type of contrast that’s easy to visualize. On an HSB color picker, this corresponds to moving along the vertical axis:
In general, we can simply increase the amount of contrast between two colors by simply increasing the difference in their brightness.
Although this is easy, it’s insufficient for creating great palettes. Colors that only vary in the amount of white and black in them are simply not as interesting as colors that interplay in more dimensions. Which brings us to…
Tonal Contrast
We can think of tonal contrast in terms of color hues and saturation levels. Much like with brightness, increasing the difference in hue or saturation will, in general, increase the amount of contrast between colors.
Even so, these values alone also don’t paint the whole picture. We can still choose colors that, even if they differ in hue or saturation, still have poor contrast.
What gives? The answer is that different hues have different inherent tonal values. For many people, (myself included), it’s hard to imagine what tonal values different hues can take. Which brings me to my favorite trick…
The Grayscale Hack
When you display colors in grayscale, the brightness of the resultant gray can serve as a good indicator for the value of different color tones. Not only that, it’s also useful for when you’re designing for accessibility. It’s a simple way of visualizing the amount of contrast that exists in a design independent of hue.
Let’s see what these tonal values look like in an HSB color picker. Also note how tonal values change over the spectrum of each hue, highlighted in the rightmost column:
If we take a look at some of the previous samples, but in grayscale, we can more easily see which colors have high and low contrast.
Let’s take another look at the games shown above, but now in grayscale.
You can easily see how the foregrounds pop from the backgrounds, how interactive elements contrast greatly with non-interactive elements, and how, if the games were grayscale all along, would still likely be playable. The key takeaway here is:
Use the grayscale hack, liberally and often, to visualize the contrasts that exist in your designs.
Pretty contrasts make for pretty color palettes, and so I present to you…
A Formula for Choosing Pretty Color Palettes
Let’s apply the analysis we did above, but in reverse: start with a grayscale design and then work towards picking corresponding colors.
1 : Determine where you need Contrast
Create a wireframe for your design, and then decide which areas of your wireframe need lots of contrast, and which need less contrast.
2 : Color your Design using Shades of Gray
Try coloring your wireframe design in only shades of gray. Make sure that the areas of your design that need the most contrast have the greatest brightness difference. Make sure that you do this step in your design’s final resolution. Smaller designs (eg. logos and app icons) especially may require higher contrasts to define finer elements.
3 : Choose your base Color Hues
Choose the base color hues that you want to work with. This is the subjective part, and you can use tools like ShapeFactory’s Pigment or Adobe Color CC to pick some out. Fun fact: Some color combos are so popular that they’ve reached trope status.
4 : Adjust your Colors to have matching Tonal Values
Once you’ve figured out your hues, find what range of tonal values under that hue roughly correspond to the gray tone value you sketched out prior. Toggle your screen between color and grayscale as you play with the brightness and saturation values in your color picker. Your goal is to arrive at a color palette that, when viewed in grayscale, matches your design in part 2.
Example 1
If we wanted to come up with a color palette for the above, we would find which regions of each color roughly correspond to our grayscale design.
We can now pick combinations of colors from anywhere within those regions:
Example 2
Here’s how this process looked like when developing my app Overlink:
Congrats! Hopefully this helps you pick a set of colors that contrast where they need to, blend where they don’t, and that, overall, look pretty.
Contrast alone won’t be the key decider on whether your design looks great, but it will play a major role in whether your color palettes look amazing.
Overlink is the project that inspired this write-up. If you like 3D Logic Puzzles, you can download it (for free) on iOS: https://itunes.apple.com/au/app/overlink/id1453086788
