Use consistent saturation
One thing you can do to strengthen your brand is to use various colors with a similar saturation. Saturation is another way of saying a color’s brightness. Have a look at drink company Innocent’s usage of color:
Here they have six different colors, but none of them feel out of place or jarring. That’s because their saturation is muted to the same level, making it feel consistent.
Use the same color, but vary saturation
When a brand has a strong connection with a certain color, they might not want to branch too far from it. However, everything being a single color can become a bit stale, so it can be fun to take your primary color and play with the saturation a bit. Have a look at the social media options in the bottom left of this TechCrunch article.
All five of them are a similar green, but have varying levels of brightness. These vary up the visuals of the page, while also reinforcing the idea that a lighter green is synonymous with TechCrunch.
For some more tips, check out our infographic below.
This is an important choice, as the background of your website is theoretically going to take up more space than any other color. However, it’s an easy choice to make, since it really boils down to two options.
You can go for a more muted version of your primary color in order to solidify your branding. This will require a white or grey overlay on the background in order for text to show up.
Alternatively, you could just have the whole website be an off-white color, which is the more common choice. It’s inoffensive, and won’t stop anything – text, images, or links – from jumping off the page.
Look no further than our own website to see what a blank, gray background can highlight.
Once you have a primary color in mind, it’s time to choose the other colors that you’ll be using. A good starting point here is to consider color compliments. Every color has a counterpart that makes it “pop,” and these are known as color compliments.
For example, a red circle on a green background pops a bit more than a blue circle on a green background. But a blue circle will look a lot better and more obvious on an orange background.
So if you’re using a predominantly green website, it’s a good idea to implement red calls to action, or use red to highlight important features that you want to catch the eye of any readers.
Try to only have one or two colors on top of your primary color. More than that, and you’ll be struggling with clutter. Nothing will stand out well if you inundate visitors with loads of different stimuli.
A good example of using additional colors is hearing aid brand Eargo. It has a main color of orange, so it’s used this duller blue to highlight this important section of its website. From what we know about color compliments, we can see how this blue and bright orange contrast against each other. The orange also makes important elements pop, like the “add to cart” button and the logo.