Generate a full palette based on a few colours, using Coolors

As a developer who enjoys making personal projects, I struggle the most with designing them.

I can look at finished designs and spot the good and the bad, but coming up with matching fonts, complimentary graphics and engaging colour schemes doesn’t come naturally to me. (And yeah, it’s “colour” and not “color” because I’m Canadian.)

Sometimes when I’m laying out a project concept in Sketch, I know a few colours that I want to use but have trouble knowing what other colours will match.

So I use Coolors !

It’s worth mentioning that Coolors is also great if you have no colour ideas to begin with. Simply go to the main page and hit “Generate” until you’re blue (or azure, or cobalt, or sapphire) in the face. If you find something you like, awesome. Feel free to skip the rest of this article.

For those of you who have a few colours in mind, stick around. I’ll show you how to easily find matching colours and build your palette.

Step 1: Navigate to the Coolors “Generate” page

Here’s a link that will bring you right to the “Generate” page.

Otherwise, navigate to the homepage and click “Generate” in the top right navbar.

Step 2 : Enter hex codes for 2 (or more) colours

For this part to work, you must have 2 or more colours in mind, and their hex codes.

At the bottom of each colour on the “Generate” page, you’ll see the hex code labels. If you click on one, you can enter your own.

I’ve entered #141414 and #414141 in the first two boxes for my example below.

Step 3 : Lock your must-have colours

Once you’ve entered the colours you want in your palette, you need to lock them.

If you hover just above where you entered the hex codes, a menu will appear. The 4th option down is “lock”.

Click the lock on the colours you want to keep. You must have a minimum of 2 colours locked for the next step to work.

Step 4 : Hit space bar

Once your colours are locked, you can start mashing the space bar to generate colour schemes that will match the colours you’ve selected.

Feel free to lock additional colours you like as they pop up until you find your final palette.

Step 5 : Export

When you’ve found a colour palette you like, the export options are worth looking at.

You’ll see the export option in the top right toolbar. In addition to a simple (but slick!) PDF, Coolors can also export an SCSS file which you can easily use as your SCSS colour variables file.

Just choose how you want to export, then save the generated file. That’s it!

Coolors also has some other cool (hehe) options, but in the interest of keeping this brief, this is where I’ll finish.