I’ve never been a fan of colour theory. I think it’s because I’ve always been a bit hopeless at it. I’d love to be able to sit there, colour wheel in hand, and pick out complementary, split-complementary and triad colour schemes, impressing all of my friends, family, and clients in the process.
But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use colour in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using colour, the better I become in the theory behind it.
Of course, that doesn’t really help when you’re just starting out, does it? That’s why, in this article, you won’t see a single colour wheel (well, OK technically there is one, but we don’t use it). Instead, I’m going to show you a simple colour workflow that you can use in your next web project.
You will, of course, subconsciously be learning the theory along the way. So, just for funsies (yes, I said “funsies”), I recommend coming back in a few months time and giving the theory another go.
Everything will make so much more sense then, I swear.
Choosing A Base Colour
We can see something ridiculous like 10 million colours at any given time. Think about that for a second. 10 million.
And out of those, we need to choose one — just one colour — to be the base of our website, for our brand.
Everything will stem from this one colour, so it’s kind of important. But don’t worry: You can’t go wrong.
How to choose a starting colour
Now, picking a colour out of the blue (pun intentional) would be quite easy, but we’re not going to do that. For any project in which you’re dealing with clients, you should really try to justify as many of your choices as you can. If you don’t, it’ll be a case of your favourite colour versus their favourite colour. They’re the client. They’re paying you. They will win.
Don’t overthink it. Just make sure you have some kind of reasoning behind your colour choice (and every choice, for that matter). It’ll make you look good.
Tips on choosing a starting colour
- Use what you have.
If the client has a logo with an established colour, that will usually be your starting colour. - Eliminate your competitors’ colours.
If one of your main competitors has a strong brand colour, don’t copy it if you can help it. Find your competitors’ colours to eliminate them from your own colour schemes. - Think about your target audience.
The colours of a website for a funeral home would likely be very different from the colours for a kids club. Think about who will be using the website and how you want them to feel (excited, serious, taken care of, etc.). - But don’t default to stereotypes.
If you’re designing a website for young girls, you don’t have to use pink. Avoid clichés to gain credibility. - Play a word game.
If you’re struggling, write down any words that you associate with the client’s business. This list should give you some ideas for colours. If you’re really struggling, hop on any website about colour meanings and see which fits best.
You should now have a base colour in mind for the design. It should be something simple like red, green, blue, yellow or pink. We’ll get to the exact shade next.
Let’s say you choose blue. (Great choice, by the way!)
Choosing A (Nice) Base Colour
Instead of messing about with Photoshop’s colour-picker to find a nice shade of blue, we’re going to steal like an artist and use other people’s design choices to help us out.
First, go to Dribbble and Designspiration and click on the “Colors” link in both.
These should present you with similar screens:
You can use this as the next step to find the right shade of blue.
For a fresh and energetic brand, go for one of the lighter, brighter blues (one of the top five options). For something a bit more corporate and serious, the bottom five should be a better fit.
Choose a shade from each website to see actual designs that use that colour. You can then use any of CSS-Tricks’ colour-picking techniques to grab the exact colours right in the browser.
Not only will you see different versions of your base colour, but you will easily see colours that match.
Creating A Cohesive Colour Palette
All right, you should now have a HEX value for your colour. Mine is #30c9e8. Now we’re going to make a palette out of that colour. And it’s easier than you think.
When you think of the process of creating a colour scheme, you might picture things like this (from ColourLovers):
The problem with this kind of colour palette is that applying it to a real design isn’t very practical. Most palettes have way more colours than you’d ever need, especially considering that we need to add an average of three neutral colours to every scheme:
- white,
- dark grey,
- light grey (optional).
If you tried to add five or six colours to the neutrals, it would be a mess. All you really need are two colours:
- a base colour (in our case, #30c9e8),
- an accent colour (we’ll get to this in a jiffy).
If you can create a website using only these five colours, you’ll get a much better result than if you were to go overboard with complementaries, split-complementaries, triads and the rest.
Finding your accent
Your accent colour will be used in very small amounts on your website, usually as a call to action. So, it needs to stand out.
Your next step is to go to Paletton and type your HEX code into the colour box:
From here, you can find your accent in one of two ways.
First, you could click the “Add Complementary” button and wham! That orange there? That’s your accent.
Alternatively, if you don’t like the colour it has generated, you can click around the icons at the top to find something more suitable.
Personally, I quite like the red that comes up under the triad icon, so I’m going to use that for our scheme. There is, of course, science and stuff behind what Paletton is doing; but, for now, let’s put a pin on it. You’ll learn the theory a bit later, and all will become clear.
So, below is our colour scheme as it is now. We’ve got a nice base colour and a shot of an accent. Let’s add white to the mix, because white is always good.
All that’s missing now are some greys.
Adding the grey
For most of my web projects, I find having two shades of grey to be infinitely useful — one dark, one light. You’ll use them a lot.
The dark is usually used for text, and the light for when you need subtle differentiation against all that white (usually for backgrounds).
You can choose your greys in one of two ways:
- You could use Dribbble and Designspiration again to find a nice grey from your previous results that matches your base colour. But usually, it’s easier to type ‘blue website’ in the search bar, which will show more greys in the results.
- If you have Photoshop or the like, you could use Erica Schoonmaker’s technique to harmonize your greys with the base colour.
Creating harmonious greys
To get our shiny new harmonious greys using Erica’s method, we’ll start by picking two default greys out of a hat. Then, follow these steps:
- Create two shapes and fill them with #424242 and #fafafa.
- Insert a colour fill layer above your two shapes.
- Change that fill to your base colour (#30c9e8).
- Set the blending mode to overlay, and bring the opacity right down to between 5 and 40% (in the example below, it’s set at 40%).
- Use the colour picker and copy your new values.
I should point out that this method works exceptionally well when your overlay colour is blue. For any other colour, you will want to either bring the opacity right down to 5 to 10% or stick with your original greys.
Voila! We Did It!
Our colour scheme is complete. I hope you feel proud, because I sure do. Here it is, in all its glory:
Applying Your Colour Scheme
Now that we’ve got our colour scheme, it’s time to apply it. This is a whole other article unto itself. But to give you an idea, here’s a mockup of a page design in greyscale and with the colours applied.
Tip: If you struggle with colour, a good trick is to create your website layout in greyscale first. Figure out the hierarchy, and then experiment with the colour later.
As you can see, blue is the featured colour here. It’s used on large areas and in the icons, too.
Our accent, red, stands out beautifully against the base colour. This is used in very small areas, for buttons, and in the icons. The less you use this colour, the more it will stand out.
The dark grey is used for the text, logo and icon outlines. (Don’t skip putting the colours in your icons. It’s a small detail but makes a big difference.)
The white and light grey form the background. The light grey doesn’t have to be here at all, but I find it is another small detail that really makes a website look polished.
It is important to note than when using colour and text you need to ensure that there is sufficient contrast between the background and the copy. This will help people with colour blindness or low vision read the text on your website. There are many tools you can use to find colours that comply with the WCAG Guidelines. Two popular ones are the WebAim Color Contrast Checker and Contrast Ratio by Lea Verou.
Colour Guide Final Note
As you can see, we really don’t need much more than the palette we’ve created today. But that doesn’t mean you are limited to these colours, oh no!
As you’re designing, you might decide it’s appropriate to introduce some more colours to your palette. That’s totally fine! As long as you’re attentive, you can use the steps above to find more colours that work with your scheme.
The beauty of this is that the more you do it, the better you’ll become at choosing colours. You’ll get to know what works together and what doesn’t. Sometimes, the method above will yield results that are less than desirable, so feel free to tweak things. Play around and have fun learning colour theory, without the theory!
