Color Palettes: The Other 10%

In last week’s post (which I encourage you to take a look at if you’re still having to DIY your website design) I mentioned that “web design is often described as being about 90% typography.” But what about that other 10%?

I’d argue it’s color. While paying attention to your typography ensures that visitors will be able to easily absorb your website content, it’s not necessarily the best medium for communicating your brand style.

That’s where your signature colors come in.

Choosing Your Brand Colors

Now,  just like typography, there’s an art to choosing your brand colors. Colors carry certain meanings, and elicit particular emotional responses, so it doesn’t matter if pink is your favourite color – you need to consider whether it’s a good fit for your brand.

Here’s a brief overview:

Red – the stand-out color of confidence and power.

Orange – the color of energy and happiness.

Yellow – depending on the shade, yellow can also signal happiness, but gold for example indicates luxury, while greenish shades of yellow can actually suggest illness. Tread carefully with yellow, is all I’m saying!

Green – unsurprisingly, the color we associate with plants and nature is also the color of health and sustainability.

Blue – lighter shades suggest peaceful, calming qualities, while darker shades have a similar quality but with a more authoritative tone to them.

Purple – the color of creativity. As it was traditionally the color of royalty, it also carries a luxurious connotation.

That’s a very simple overview (if you’re looking for further reading I recommend Canva’s article on color theory, also aimed at DIY designers) but it does give you a little bit of context for the color or colors you’re considering. Which brings me to my next point…

Keep It Simple

Oh, the sites I have seen that could have benefited from this one.

I get it, decision making is hard. But that’s no excuse for having a literal rainbow of colors on your site. It’s overwhelming to visitors for one thing; for another, it makes it much harder to really understand what your brand is about at a glance.

Remember, colorful does not have to mean “all the colors”. So even if you’re going for a bright and cheery effect, this can be achieved with just a single pop of orange, rather an a cacophony of loud, clashing shades.

I recommend when you’re choosing your brand colors to keep things as simple as possible: no more than three colors, and if you can, just one will suffice.

Don’t worry if that sounds a bit limiting, because you can always…

Make Use of Shades and Tints in Your Color Palette

My own color palette relies on just two main colors – navy, and deep purple. (And if you recall my rapid fire lesson on color psychology, you may have guessed that I wanted to create a sense of professionalism and reliability, combined with a streak of creativity.)

But there’s actually a few different shades of purple on this website – there’s a dark blueish shade, which blends well with the navy. Then there’s a lighter, pinker shade of purple, adding a little warmth into the mix. Finally, there’s a pale lavender tone lightening the whole combination and stopping the website from feeling too dark and heavy.

And the good news is, it’s very easy to create a simple and beautiful color palette from just one or two colors if you make use of shades and tints.

Still not sure where to start?

The human eye can distinguish between approximately 10 million different colors. So it’s understandable that even if you’ve managed to fix on green for your brand color, you still might be struggling with a final decision – after all, you’ve still got about a million options left.

That’s why I’ve rounded up a bunch of useful (and free!) online tools to help you create your very own color palette.

Get Inspired With Pinterest

Honestly, that’s where I start when I’m developing a brand style for a client. You can simply browse collections of color palettes – like this one right here, or use the search bar to fine tune your results. I usually have an idea of the colors we’re considering for a particular project, and simply search for those colors in Pinterest. Then I can browse thousands of relevant color palettes and inspirational images, which I usually save to a secret board for reference.

Use Your Images With Impalette

If you’re still struggling to narrow down your color options, your brand images can be a great starting point. Simply upload an image to Impalette, and it will generate a range of colors for you, based on the dominant colors in the image. Using your images in this way is doubly helpful, as now you can ensure your brand colors will complement the images on your website, instead of clashing with them. Now guess where I start when I create these weekly color palettes?

Pick Your Colors With Colorzilla

This is one of those genius little browser add-ons that since I discovered it, I can’t remember how I lived without it. Once installed in Chrome or Firefox, you simply click the little browser bar icon, and your mouse turns into an eyedropper, so you can select colors from any webpage, and it will automatically copy the hex value for you (that’s the six-digit alphanumeric value we web designers use to specify a particular color).

Use Coolors Color Palette Generator

I love this tool, it’s usually what I turn to when I’ve chosen my primary color, and want to play around with different color combinations. You can drop in a color (that’s why I mentioned those hex values before!), lock that particular layer, and then hit the spacebar. Et voila! Coolors will automatically generate a color palette for you. And another. And another! In fact below are three completely different color palettes Coolors generated based on relatively dull starting color of greyish beige.

screen-shot-2016-10-17-at-09-48-26
screen-shot-2016-10-17-at-09-49-38
screen-shot-2016-10-17-at-09-49-55

Once you’ve selected your primary colors, it’s time to fine tune your color palette with tints and shades. And that’s where Paletton makes this super easy for you – just drop in your hex value and it will automatically generate a selection of lighter and darker complementary shades for you to choose from.

To Sum Up…

Hopefully by now you have a much clearer idea of how to go about DIYing your brand colors. Pay attention to color psychology, stick to just one or two primary colors, and make use of tints and shades to create a simple yet beautiful color palette for your website or brand.