I should start out by saying that I’m operating in near total ignorance of color theory or formal education in design. So you may think what I do here is unscientific and unrefined, at best. That said, over the years I’ve felt my way into a process I like for creating color palettes for new web and design projects.
Think about color like a UX designer
The first thing to remember is that choosing color is not just about making your site/application/whatever look pretty. Usually, that’s not even the main concern. Color is an important weapon in your arsenal to convey information, and as such it should be used with intent and forethought.
The requirements
When I start a new web project, I know I’m going to need colors for a number of different kinds of information:
- Body text
- Headings
- Blockquotes or other emphasized areas of text (I call this secondary text)
- Links, including hover and active states
- Stroke colors for borders of page elements, tables and form inputs, including focus and disabled states
- Highlighted or inverse text
- Buttons: normal, destructive, secondary, each with hover, active and disabled states
- Alerts of all severities: information, success, warning, failure
Realistically not all these things would require individual colors. I might decide, for example, that headings and body text are the same color, or that focus, hover and active states all get the same styling. Even so, all told I need 10 to 20 colors for a fully-functional web palette.
That’s a lot of colors. If I used 20 different hues, it’d look like a rainbow went on a bender and threw up its excess all over my website. So here’s what I do: I choose 5-10 hues, then all the rest of the palette is comprised of shades, tints or tones of the main hues.
Terminology
An aside here on color terminology. All of the terminology I know I’ve learned from monkeying around with Photoshop. Well, that and a recent purchase that I’ll talk about a bit later. For the purposes of this article, let me define the terms I’m using, the way I understand them (i.e. they may not be technically correct):
- Hue: Essentially, one of ROYGBIV. Is it reddish or bluish? Is it closer to green instead?
- Saturation: How intense is the color? Is it a brilliant cherry red, or closer to mauve (a greyish pink)?
- Brightness: How bright is the color? Is it dark (close to black), or bright (close to white)?
- Shade: Hue + black
- Tint: Hue + white
- Tone: Hue + black + white
From this you’d surmise, accurately, that my favorite color space is HSB (hue, saturation, brightness); it suits well how I like to think about color. First I pick the hue I want, then adjust its saturation and brightness to taste.
Refining the requirements
Back to the problem at hand: choosing hues. Even though we have a bunch to choose, there are constraints we have to operate within if we want people to be able to read our sites or use our applications for more than three seconds without getting a headache. In practical terms that means:
- The page background is white or a very pale tint of some hue.
- Body text is black, dark grey, or a very dark shade of some hue.
- Success messaging is usually in the green family, while warnings are yellow or orange and errors red.
- Links and buttons are almost always in the green or blue family.
Given these constraints, it’s likely you might find two similar hues in your palette. In that case, make sure that they’re different enough in hue, saturation or brightness from one another so as to be distinguishable at a glance.
Okay, I hear you saying, but where do I start?
The inspiration
Find something whose colors you find appealing. It can be a photograph, a fabric swatch, a picture in a catalog, anything. I would often browse color scheme sites like Adobe Color or COLOURlovers, or look for illustrations or designs on Dribbble.
From one of those sources, I’d get a starting palette of around 5 colors—this particular one is inspired by a photo of my dining room:
The palette template
Now that I’ve got my starting point, I need to build out the rest of the palette. But how do I make sure that all the colors are harmonious? That they are complementary parts of a whole? This is something I struggled with for quite a while. The answer, of course, is to put a bunch of color swatches close together and see if they look nice.
But how can you arrange the swatches so that it’s easy to see if nearly every combination in your palette is harmonious? Here’s the swatch arrangement I came to after some trial and error: a bunch of triangular swatches, arranged in a circle like pieces of a pie:
Look near the center, and you’ll be able to see all the colors and how they play together. Download this file as a Sketch template.
Building methodically
Okay, now I’ve got my inspiration and my palette template, and I’m ready to build out the full palette. But how do I get from here to there? Here’s how I like to do it:
- Remember that we want each of the primary hues from the inspiration palette, accompanied by at least one shade, tint or tone, so we don’t end up with a total hodgepodge of colors. So pick one of the colors from your inspiration palette and set the fill of one of the wedges.
- Now move one wedge clockwise (or counterclockwise if that’s your preference), and set that wedge to the same color as the first.
- Adjust the saturation and brightness settings so you get a shade, tint or tone of the first hue.
- Do this as many times as you want variations on the same hue.
- Now move to the next empty wedge and pick another color from your inspiration palette. The rule is, it has to look nice next to the wedge you colored previously; every pair of adjacent wedges should look harmonious together.
- Lather, rinse, repeat, working your way around the pie until all the wedges are colored. Check along the way that every pair of wedges looks nice. Also keep in mind the constraints we came up with previously. You want a shade of green for success messaging, yellow or orange for warnings, a dark grey or black for text, etc.
- When all the wedges are filled, do a last check of the center of the fully-colored pie. Do all the colors look nice? Do they go well together? Yes? Then you’re done.
Common problems
While I’m generally happy with this process, there are some problems I run into on a regular basis:
Sometimes I have an idea for a palette in my head, but I have a hard time translating it to colors on the screen; it just doesn’t look right. At those times I wish I just had a bunch of paint swatches or something I could hold in my hands and move around to try things out before I move to creating the palette on screen.
Until very recently, I had no way to deal with that problem other than trial and error, and usually dissatisfaction that I couldn’t realize my vision easily. But that’s all going to change now. Late last year, I backed a Kickstarter project called BreakThroughColour, intended to be a system of hold-in-your-hand cards that would teach you about colors and basic color theory.
They arrived last week—this is how I learned what shade, tint and tone mean—and I couldn’t be happier with them. Though they’re physical cards printed with ink—of necessity defined in the CMYK color space—each card contains a hex code that’s a reasonable facsimile and which gives a good starting point for the color on-screen.
Once I have a palette built, there’s the tedious but unavoidable step of getting the hex codes for the colors into my CSS. I have to go into Sketch, grab the hex code for the wedge from the color picker, then paste it into my code. This is incredibly annoying.
But! I recently installed a few Sketch plugins that individually and together make this much, much, much easier:
- Sketch → Colorpeek
- Sketch palettes
- Sketch-mate
- And the jewel in the crown: the Zeplin plugin. This one lets you import sketch drawings into Zeplin, which makes it super easy to extract, name and export colors into CSS, Sass, Less, or Stylus. BOOM.
Other useful resources
Here, in no particular order, are some useful websites I’ve come across while trying to refine my color choosing process:
- Share colors online with colorpeek.
- 0 to 255 makes it dead easy to find variations on any color.
- Colblindor has some great resources on color blindness, which is an important concern when designing with color. It also has a nice tool to help you put names to colors—especially useful for your Sass or Less color manifests (more on this in another post).
- Don’t like those names? Try Name that Color instead.
- Use rgb.to to convert from RGB to almost any other color space. Especially useful for getting Pantone numbers.
- Design color schemes based on color harmonies with Paletton.