How to make your own color palettes

Greg Gunn
8 min readMar 24, 2020

--

Working with color is hard. No argument there, but do you know what’s even harder? Pairing colors together. Think about the last time you built a color palette from scratch. What was your process? How did it look? If you answered with a visible *shrug* then keep reading.

We covered the basics of what color is and how it works in How to Not Suck at Color, but now that you’re hue literate, it’s time we do something more interesting. Like building our own set of color palettes.

Oh, and we’re going to build them all from one color.

That sounds clickbait-y, doesn’t it? I mean it though. We’ll start with a single color of your choice and through guided magic develop an array of color palettes to use. Think of this like a method to sketch with color.

Quick disclaimer: This is by no means a replacement for learning how color works and developing your own process for using it. However, if you are interested in doing so, I teach a course about color theory and go deep on how I use it. Also, it’s a go-at-your-own-pace kind of class, so you can learn on your own time.

Disclaimer over. Let’s get back to the exercise.

Pick a color. Any color.

Well, almost any color, but we’ll get to that in minute. Before we dive in, where would you typically start when building a palette?

Maybe you’d Google “color theory” and begin to research. You’d likely get overwhelmed by beautiful, complex models of color and a deluge of science jargon that goes with them. If you’re lucky, you’d stumble upon the intricate, colorful drawings of Johann Wolfgang von Goethe.

A drawing of a color wheel with red, yellow, green, blue, violet and magenta with German words written over each color.
Johann Wolfgang von Goethe, 1809

Another popular approach to consider is using something like Adobe Color to help you generate a palette. You may also pick a prebuilt scheme from a palette library, like Color Hunt. Both are great options to start with, but you’re not here for that. You’re here to learn something new and fun. So let’s get weird.

Step 1: Choose a base color

I wasn’t lying about building eighteen palettes from one color. It all starts here, so pick a color you know you want to use. I’m going with a reddish-orange and naming it Rusty, because I like to name things. Deal with it.

Quick tip: Make sure your color isn’t too dark or too saturated. We’ll want some wiggle room later in the process.

Photoshop color picker with an area highlighted in a yellow dashed line
I like to keep my base color within this highlighted area.

Step 2: Follow The Curve

If we want to make a palette, then our lone tone will need some friends. I know what you’re thinking: Add a few tints, a couple of shades and call it day—a boring day. We can do better that.

We do need shades and tints to work with, but they don’t have to be dull. Instead of moving only in parallel directions (like the rook in a chess match), try moving along an arc.

Visualize a line starting in the top left of the color picker and bending down to the bottom right, going directly through your color. For old Rusty here, that line may look something like this:

Photoshop color picker with a yellow line overlay indicating a curved path
The yellow line indicates the curvy path we’ll follow

Now imagine our tints and shades living along that line. Brighter colors have less saturation while darker ones have more.

What does that look like exactly?

If we were to sample four colors to the left of Rusty (tints) and then four to the right (shades), we’d get something like this:

Monochrome color swatches based on the reddish-orange color base
A palette made from tints/shades that follow an arc.

Good start. Moving along an arc gives your tones a wider variance which results in richer and more dynamic color pairings. Which is great, but what if you don’t want a monochromatic palette? Hold on to your butts, because this is where things get interesting.

Step 3: Add new hues

We’ve got a hue problem. To break out of this monochrome prison (hyberbole much), we need more variety in color. Fortunately for us both, I have a solution.

We’re going to do the same tint and shade exercise—moving along an arc—but this time, we’ll change the hue as we go.

For example, if we start with trusty Rusty and move left along the arc, to create three tints, we’d change the hue each time we sample a color swatch. Orange (1), yellow, (2) and green (3).

Photoshop color picker with a yellow diagram over it
As we change value along the arc, we also change the hue

When we move the other direction from Rusty we have nowhere to go, because red is at the bottom. Well, as it turns out, the spectrum of color is 360°—aka the color wheel— so we’d simply wrap around to the top of the hue column and change it to pink, then violet, then blue.

Still with me? Good.

Here’s what sampling four tints and four shades while also changing the hue along an arc looks like:

Color swatches based on the changing hue arc approach
A palette made from tints/shades that follow an arc and changing the hue.

Neat, huh? The reason this looks so pleasing is because we’ve unknowingly built an analogous color harmony (colors that are next to each other on the wheel). Better yet, we’ve mapped each of them to a gradient of light to dark!

Please, please. Hold your applause.

Quick tip: Start with small adjustments in the hue. Then try increasing the distance of hue change and see what happens.

We could use this as our color palette, but I keep bragging about creating eighteen of them and this would make for an anti-climactic ending.

So then how do we take this further?

Step 4: Add value

This is not business-marketing speak. I mean, literally, add more value to your palette with tints and shades of these colors.

I like to do that by selecting the top third portion and then adjusting hue/saturation/lightness to make it brighter and less saturated. Something like this:

Photoshop’s hue, saturation and value dialog pop over our color palette with warm tints
Create tints by lightening and desaturating. Adjust the hue to warm the color.

Then select the bottom third and do the same, but make it darker and more saturated. Like so:

Photoshop’s hue, saturation and value dialog pop over our color palette with cooler shades
Create shades by darkening and adding saturation. Adjust the hue to cool the color.

Those of you paying attention may have noticed that I also adjusted the hue. I made the brighter colors (top) warmer and the darker colors (bottom) cooler. Guess what? It’s the same thing we did to build the base palette! Noticing a pattern yet?

Here’s what it looks like all together:

Finished swatch library with warm tints and cool shades
Finished swatch library with warm tints and cool shades

Step 5: Sample and pair

Now we’re cooking with fire. We’ve got a beautiful range of color and value to work with and, at last, it’s time to build some palettes.

Think of this as a library of swatches to pick from. I suggest choosing 3–4 colors, with at least one from each row (tint, regular, shade). Including a more neutral color (e.g. cream, beige, gray) also helps. You’d be surprised how many wonderful variations there are.

Here are a few pairings as an example:

Three unique color palettes made out of different sized squares

Quick tip: Look for contrast. Think about what your darkest and lightest colors might be. Do you want a stark, high contrast look or a soft, pastel one?

Step 6: Add variation to your variations

You might be thinking, “Okay he is for sure going to end it here. There can’t be any more color magic to squeeze out of this exercise.” As it turns out, you thought wrong. I’ve got one more trick up my colorful sleeve.

To make our swatch library work even harder for us, I like add color overlays. This helps tie everything together and yields some great, new results to sample from.

In Photoshop, create a new Solid Color layer, pick a vibrant color and set the blending mode to overlay. Try lowering the opacity a bit (I start around 70%) and adjust the color until you like what you see.

Here’s what our palette looks like with different overlays:

Animated gif cycling through the effects of different color overlays
Color overlays: None, Blue, Green, Brown, Pink

Cool, right? I think so, but I’m also a big nerd for color. The purpose of adding an overlay is to create more options for colors that pair well together. This method works great for creating identifiable themes like romance or vintage.

To illustrate how flexible this whole process is (and prove I’m not a complete liar), here are a few unique palettes I made from this one exercise:

Step 7: Have fun!

By far, the most important part of the process is to enjoy it. I designed this exercise as a way to experiment and play with pairing color. Fun is a key ingredient in the recipe. And like I said, I teach a course about this stuff for those of you interested in learning more about the wonderful world of color.

For further experimentation, here are two, free color resources you might like:

Color Resource Guide

A PDF guide full of helpful tools and resources to help you work with color.

Color Palettes

A collection of four, unique palettes (created by yours truly) free to use anywhere on anything you’d like.

Also, if you’d to like watch and listen to me go through this whole process, you can do so via this video:

Let’s Be Friends

If you enjoyed reading this and want to see more colorful things, follow me on Instagram. It’s also the best place to ask me questions, if you have any.

Want even more creative information and inspiration? Join my personal email list and get a weekly email designed to inspire and change the way you think.

Thanks for reading. Now go make your own color palettes!

--

--