How to create a color palette easily? 🎨
By: Peter Javorkai
Tags: UX Design, UX, Graphic Design, Visual Design, Colors

I see you, you’re on nitro 🔥 Your brain is full of design thoughts about how you’re going to pull this project off. You’re energized to get started the brand, the platform, the poster, the website, the… but then you quickly realize, you have no colors yet. So how to pick some?!

The brand new iMacs looks gorgeous source: Apple.com

Often in the design world we mention the jargon of ‘choice paralysis’ and probably — besides choosing typefaces 😂 — the color selection process is a daunting one, which makes the overwhelming situation so tangible to us. To ease this, I wanted to write an article about my color picking for a long time (maybe for personal therapy?!), but I have to warn you ahead: there is no magic bullet which works 100% of the time, but at least I hope this brain dump will hold your hand the next time you face the self-doubting monster 😈, so it feels we fight it together. ⚔️

Note**: the presented steps could work in any design tool of choice(Sketch, Figma, Canva, Photoshop, etc.)

The first choice

Let me start with a little personal story. When I’ve started working for Coke (Coca-Cola) the first project of mine was a branding project for a festival during the summer. One day I remember we were struggling with a stage to brand nicely for the visitors, and then my manager hovered next my computer and said: “Just make it pure Coke red”, and then I asked back naively: “But how do they know if it’s ours?”, the answer was: “They’ll know. It’s our color code.” and hell yes they realized our venue at first sight, ending up with full house every single night. The power of color. 🔴

I’m sure some of these colors will communicate more than just a color to you

So your first task is to find a color which conveys the message you want to share and express emotions something you can relate to. Believe it or not this determines everything which comes later. I hope I hyped you up enough, let’s get started how. 🤓

If you’re out of ideas you could look for some brands you want to have a similar voice as well, how they use the main color in their communication (website and social media). Source: https://www.reddoorla.com/

This choice can come naturally (purely by liking it) or if you found already the tone of voice and the visual direction of a piece, then you can derive it from there more scientifically. I like to look at a brand landscape and by associating my project to a market or an existing brand can already drive my thinking towards a potential hue.

Sticking with the Coke analogy earlier, let’s start with some exciting red (I’m not a big believer in the associated meaning like bold or passionate though from the brand rainbow):

Make sure it’s not too saturated or not too dark — look for the dashed area in your color picker

Second base: pairing with other colors

After celebrating the first color down, now it’s time to give it some friends. Try to visualize the color picker — regardless of the tool of your choice — and then imagine a line that starts in the top left corner of the picker and then it bends all the way down to the bottom right, directly passing through the color you’ve just picked.

What comes next? We’re going to follow this arc, but it’s time to also change the hue as we move along. We’re going to create 6 more friends for our lively red. Three lighter and three darker.

Let’s try to create the first lighter color:

For the first brighter color we moved on the arch to the top left a bit, but we moved on the hue to the right to get to this orange

Now let’s move on to the second one, and then based on the same analogy do the third. There we go we have the three lighter colors!

Bright colors are hands down!

It’s time to move onto the darker selection of the palette. We go back to our original base color, and now instead of moving to the left on the ark (as we did for the bright colors), we move to the right, as:

Now we have the full palette, but we don’t stop there, let’s bring on some variety for a greater color range!

In some cases this could be enough but we don’t stop here

Time for extension

Let’s put a layer both on the top and the bottom parts of our existing color palette with a blending mode of hard light. That rectangle which overlaps the top part give a background color of #BABABA , and then the one which overlaps the bottom give a background of #525252.

Now the colors are divided by three: the top section being with overlay #BABABA, the middle section the original colors, and the one below with #525252 overlay

Now we have a lot more options and I can already hear you thinking: “How on earth can I create something out of this?”

What often works for me combining one color from the darker range, and another from the lighter one finishing with a neutral. By using different color harmonies I’ve created a couple of palettes from the one above, by focusing on contrast between before you scream fugazy here. 😇

Some sample palettes created out of our color of choice

I hope the process of mine helped you picking a nice palette, but I want to encourage you also to get an in-depth look into color theory, maybe experiment with a different color harmony you haven’t used before, or try to develop your own process. It’s your turn! 🎨