After reading Laura Elizabeth’s fantastic blog, A Simple Web Developer’s Guide To Color, I thought I would sum up her ideas along with some of mine to help web designers (and anyone else interested!) discover the perfect coloures for their project!
Selecting the right coloures may not seem like the easiest thing in the world especially when you’re only just starting out. You’ll need a crisp colour combination that will best compliment your client’s brand while keeping things nice and simple, sounds frustrating right? But let me tell you a secret, it’s actually pretty easy!
Yes, choosing the right shades isn’t that hard at all. In fact, it can be both fun and informative, how?
Let me ask you a question, when you picture a website, depending on its “genre”, about how many coloures do you visualize? I’m going to toss a random guess and say 4, (although you probably only pictured 2 haha) so let’s say you want your project to have around 4 coloures. Well the great thing is, you can get all the right coloures you want and need, through figuring out two things:
- Your base colour
- Your accent colour
Let’s talk a little bit about what each one is before diving into the details:
Your base colour is your main colour, the colour that’s going to appear the most in your project. So choosing a base colour must be precise and accurate as you will be focusing all your work on it. And guess what? The thing about the base colour is, you’ll know it when you see it!
Your accent colour works like an “assistant” to your base colour. It should stand out on your website and should therefore contrast with your base colour. You’ll only be using your accent colour for certain elements on your website, such as your call to action buttons or simply small parts of an image.
How do you find your base and accent coloures?
Moving onto the first step in the colour hunting process: discovering your base and accents coloures!
Let's start by finding your base colour
Did you know?
The naked eye is capable of seeing 10 million shades of different coloures simultaneously, (imagine that!). But what you probably don’t know is there are an infinite number of coloures in the world, this is because if you gaze upon a landscape, you’ll realise the coloures are ever-changing according to the measure of sunlight cast upon each one during each hour of the day, “so if we have 10-million colors, times 10- million lighting types, times 10-million lighting levels, times 10-million surrounding colors, times 6-billion people in the world, times 3 modes of viewing we get a really huge number. The result of that multiplication is 18 followed by 33 zeros (18,000,000,000,000,000,000,000,000,000,000,000), or 18 decillion!!!” … so it’s safe to say that the number of coloures never end.
But we’re going to keep things really simple and focus on the basic coloures such as red, yellow, blue, green and so on.
So you need to first ask yourselves, what is your project about? What is it’s “genre”? (fun, serious...etc.). Laura suggests the “name game”, where you simply list as many words related to your website and form the closest colour to the words you have listed.
If your website is selling baby stuff (random I know), you could write the words: Baby, boy, girl, mother, toys…etc. The coloures that have formed in my mind are light blue (baby blue in other words), white, maybe a light pink, and pale yellow. But I would probably go with the baby blue on this one and then maybe add a few dashes of the rest where I see fit. So that’s basically how you play the game, it’s fun and it will get you there, promise!
If you’re still struggling, you can simply check out websites that reveal what coloures mean, and find a colour that “symbolizes” your website best, be creative!
If you have found a colour but still not okay with its “level”, Dribbble and Designspiration are two websites that can help you select the perfect shade, just open one of the websites and click on the small droplet icon at the top of the page to see a list of all the coloures and their shades. Once you've found a colour you're happy with, copy it's code, which you will se at the bottom of the page, because you'll be needing it for later.
Now for our baby blue, I found the first 3 options to fit perfectly, maybe even the fourth if we were looking to go tad darker:
You could also see other websites that market baby things and get a few ideas from there or see how and where they used the blue to get a few ideas. You should now have your base colour in mind.
Now for your accent colour!
After you’ve decided on your base, you’ll need that accent colour to highlight your call to actions and parts you wish to stand out. Laura suggests a handy website called Paletton, which I found to work very well!
After selecting your base colour, copy its code and paste it on Paletton to discover your accent colour:
Once you enter the code, the screen above will show up, as you can see, I’ve picked a baby blue and Paletton has jotted around all the coloures that cohere nicely with my blue, such as white, a slightly darker shade of blue and a slightly lighter version:
So keep all these coloures in mind as you can use them nicely in your project if you are looking to implement more than two coloures.
Our next step is our accent colour, to find your accent colour on Paletton, simply click on the “add complimentary” button and the screen will display something like this:
Paletton has picked a sort of pale yellow-orange for my accent colour. Of course you do not have to go with the colour chosen for you, if you want a different accent colour, simply click on the images listed beside the “add complimentary” button and see your choices and other coloures that go well with your base!
The font plays a huge role in web design, nice and clear content is, afterall, our main goal. So when picking a colour for your font, Grey is usually your best choice as it isn’t too harsh on the page like black. So going for a dark shade of grey for the font will add a softer touch, you might also opt for a white in some parts such as the highlight, of course choosing coloures from your new pallet will compliment your pages nicely according to your design, but grey is a colour that you just can’t beat!
There you have your base colour, your accent colour, your font and a perfect combo of other coloures you can use! But keep in mind that less is more. Limit the coloures in your website to make it stand out with its simplicity. In my baby website, I would use baby blue, the accent colour, and maybe add a dash of white, and the two shades of blue, as they coordinate nicely with each other and add to that “baby style” I’m looking to for!
We hope you enjoyed today’s post guys, stay tuned for our next blog post and feel free to comment below with your thoughts or any ideas you would like to add!
Meanwhile, if you need any help designing or picking the right coloures for your website...well that's what we're here for, just send us an email with some details and we would be more than happy to help you out!