Prioritize your website NEUTRAL color, not primary color

PSA to help people choose better colors for their website design.

It all has to do with how you choosing your colors and understanding their ramifications throughout your website.

• Choose colors correctly and your site looks so damn good and harmonious. Everything fits together so professionally!
• Choose colors incorrectly and no matter what you do, it just feels so off-balanced (or generic at best).

I’m deep in the middle of a client redesign project and can’t help noticing the same design mistakes being made over and over and over…even by so-called web designers/developers!

What is a primary color?

Depending on which color model you follow, you will get a different answer:

• Those following the RYB color model believe red, yellow, and blue are primary colors since they can not be created from mixing other colors. And that it is these primary colors that you mix to produce any other color.
• Painters or printers believe cyan, yellow, and magenta are the primary colors since they mix out to a clearer, brighter palette…instead of a muddier result from the traditional red, yellow, blue.
• Those not educated in color models probably believe “primary color” is any color that is used the most or used most impact-fully on a website.

And what is a neutral color?

Generally speaking, neutral colors are hues (or colors) that don’t appear to have color. White, black, grey, beige. Usually considered for the background.

So what’s the big deal?

I was gonna do a long spiel about redefining what a primary color is. And why the label has confused so many people regarding how they should design around their colors. And then I got lazy. So now this posts gets even better cuz it’s gonna be soooooo much shorter!

Many people choose colors in this manner:

• Primary colors – usually their logo or main brand color.
• Secondary colors – usually accent colors or secondary brand colors.
• Neutral colors – usually considered “the background color” in web design.

Their primary color is usually a hue of red or blue. Secondary color is typically a sharper or dulled version of their primary color. And then neutral is white or black.

I do things a bit differently:

• Primary color (for me) – is the background color.
• Accent color – is the logo or brand color.
• Neutral color – used as a (subtle) secondary background color or secondary accent color.

My primary color is either white, black, creamy grey, or light beige/yellow/brown. Accent color is whatever their logo color is. Neutral color is usually grey, black, or white…to subtly contrast against the primary color.

Why does my method make all the difference?

…because the content sits on the background!

Let’s say it all together now. A thousand times over and over:

• Because the content sits on the background!!!!!
• *and again*
• *and again*
• *and again*

At the end of the day, your content is the most often seen and used part of your website. Dare I say it. Your content is even more of your brand than your logo is. So you need to focus on designing the content to look good. And stop wasting time on trying to make your logo pop out more and more. Nobody gives a crap about the logo. (Even if it’s cool, they still don’t give a crap about it.)

Take a bright red logo. And ask yourself what makes this logo red? Is it the redness of the red? Or the whiteness of the background on which the red is juxtaposed? So the now…we wonder…

• Is it the redness of the red that makes the logo red?
• Or the whiteness of the white, that makes the logo red?

Add items other items onto this background space and ask yourself another question…

• Should these newly items help the red stand out more?
• Or help the white stand out more?

Choose your background color first!

This is the secret to making content look good.

ALWAYS. Do you have a white site? Or a black site? Or a calm quiet grey site? Or a softened light blue/pink, or creamy beige/brown? You need to always choose your background first!

• Your background color is always laid behind your content.
• Therefore the color of your background can make your content pop out more, or site more quietly on the page.

Once you know your background color (let’s pretend your chose white), choosing your accent color will be so easy! Let’s say you pick red or blue as your accent color…now just try it out and ask yourself:

• Does this accent color make your background pop out?
• Does it make the background fade further into the background?
• Or does it just clash awkwardly with your background?

Balancing your background and accent colors.

You’re going to have to play around a lot to make it feel right.

• Color ratio – some colors can share the space half and half. But usually, one has to be the primary and the other is used much more sparingly.
• Space – some colors need space to feel free, others look better when confined.
• Rhythm – some colors can be used again and again without drawing attention. Other colors feel repetitive immediately.

The secret to the (secondary) neutral color.

Quite often, you’re going to realize that your logo (accent) color and neutral (background) colors do not go together. One demands has too much personality and the other has so little of it. And that content might look good next to one of them of but not both.

In moments like these, the design secret is having another neutral color to come in as your silent hero. There are a few principles to using this secondary neutral color.

1. It can be a lightened/darkened or contrast version of your background color.
2. It can be a lightened/darkened or contrast version of your accent color.
3. It might be subtle/hidden and not call attention to itself!

The 3rd rule is the absolute key to the secondary neutral color!

It exists as a silent bridge, a balancing transition between your overly powerful accents and monotonous neutrals. You should only feel extra harmony within your design but without noticing the addition of another color!

• Done right…these secondary neutrals will make both your accent and neutral colors stronger.
• Done incorrectly…these secondary neutrals call conscious attention to themselves and weaken the impact of your other colors. Also making your design color palette too clashy.

Don’t be a design noob

They all do the exact same shit.

• They pick the primary color first – “Oh, my logo is orange. So my website’s gonna be ORANGE! And lots of orange accents and buttons and links. We gotta remind people!”
• Then try to pick secondary color – “Hmmmm…what goes with orange? Ok, let’s try blue.”
• Then try to add content – “Aghhhh….too many colors. Too many visual elements. My design doesn’t look clean anymore!”

Then they end up back at square one. From here they usually either try to go with fewer colors (the safest option). Some get scared and remove their primary color, going for a dull B&W scheme.

Time for the color self-test

Some trick questions to ask yourself…(look away from the screen and think in your head before checking):

• What are the secondary neutral colors in my WPJohnny design? – hehe…it’s gray. Now look at how much of it I was using. Tons, right?!
• What are the Facebook secondary neutral colors? – again, it’s gray. But look at how much of it is gray. Crazy, right? Most people think Facebook is 80% white and it’s not!
• How about Youtube? – before you even look…tell me how much of it you think is white?

Do this test on all your favorite sites and you’ll realize how many of them rely on secondary neutral colors. Many of those “all white sites” are actually not as white as you think. Even more interesting is how much of their “white” is not actually white but a very very light gray.

Anyway. I hope it’s opened your eyes. And I hope you all design better sites. Cuz I’m sick of looking at shitty color palettes that only distract from your content rather than empowering it.