The Ultimate Guide To Creating A Color System For Your Website And Business

 
The ultimate guide for creating a color scheme for your website and business!

Your website color scheme should play into the emotions you want your target customer to associate with your brand.

Let me repeat that, because as a brand designer with a process deeply rooted in strategy, it’s one of the most important lessons I hope you'll carry with you in your business.


Your website color scheme should play into the emotions you want your target customer to associate with your brand. 


To be clear, the lesson here is that your target customer should be top of mind in all aspects of your business. Always. In everything you do. Above your own tastes and opinions.

If you haven’t thought about what you want your customers to feel when they interact with your business, make sure you give it some thought as you read through this post.

(As a side note, this post may be geared specifically towards websites but this information is absolutely essential for EVERYTHING related to your brand’s visual identity. Make sure you adapt the concepts from this guide into things like your social media graphics, advertisements, business card design, stationery, etc. Just….everything! And if you’re ready, start thinking about how you can make fonts work for your brand, too.)

✨ Color psychology ✨

There’s so much that goes into choosing colors for your brand and website, but before we discuss any of it let’s get the most basic thing about color straight: color at its core comes down to an individual’s perception.

Let's use the viral meme from early 2015 as an example: was it a BLACK + BLUE dress, or a GOLD + WHITE one?? We may never know!

Just kidding. It was confirmed to be black + blue, but there was serious debate all over the globe about it and it definitely shows you how nuanced color perception can be.

Anyway, what we want to do with color on our website is harness that power of perception to make a positive impression on our audience.

Physical perception of color isn’t the only thing that comes into play when choosing colors for your brand and website. What’s even more important are the emotional associations we humans tie to color.

There are some pretty amazing facts and statistics about how our brains process color, and how big a role it subconsciously plays when we make decisions:

• 85% of consumers feel that color is the primary factor when choosing a product.

• 90% of people feel color can assist in attracting new customers.

• Within 90 seconds a person will make a subconscious judgment about a person, product or environment. 62-90% of that judgment is influenced by color alone.

• Color increases brand recognition by 80%.

• A product has one-twentieth of a second to halt a customer's attention on a shelf or display (that’s not a lot of time!). Using color has the potential to hold attention 3 times longer than if the same object was in black and white.

• Since people can’t process every object within view at one time, you can use color to your advantage to emphasize or de-emphasize areas.

• Generally speaking, vision is our primary source for all experiences. 80% of what we assimilate through the senses is visual.

(All information above sourced from here).

Color effects consumer behavior / here are some color statistics:

Now, I know that information is cool and all - but what does it mean for you and your business?

There are a few key things I’m going to break down for you first to make sure you really understand how colors can work together for your benefit. If you take some time to think through it now I know you’ll be surprised at the positive impact it will have on your business.


01 / COLOR BASICS

When combining colors for your website, you want to make sure your brand colors exist well together, aka that your website color scheme has harmony.

We’ll look to the color wheel to help us form a few natural harmonious relationships:

Breakdown of color wheel relationships + harmonies

(Photo Sources: Red, Red Orange, Orange, Yellow Orange, Yellow, Yellow Green, Green, Blue Green, Blue, Blue Violet, Violet, Red Violet)

Monochromatic: one color + any of it’s tints, tones + shades (I’ll explain what those mean below)

Complementary: colors that are opposite of each other on the color wheel. They’re called complementary because each of the colors equally intensifies the one across from it.

Triadic: forms a triangle out of every 4th color on the color wheel

Analogous: 2-5 colors that sit right next to each other

And here are a few examples of real live websites using these color harmonies:

Color scheme website examples!

(Source: MonochromeComplimentary / Triadic / Analogous)

A big rule I have (and something I see a lot of DIYers do) is never, ever, ever use a color in its pure form.

There are 12 pure colors (3 primary, 3 secondary, 6 tertiary) and a simple way to mix those up is to create tints (adding white to a color), shades (adding black) or tones (adding both black and white - aka grey).

Add interest to your brand and website color scheme by adding tints, shades and tones to your scheme

(Photo sources: Pure Color, Tint, Shade, Tone)

Tints usually feel soft, whimsical, feminine or soothing.

Shades usually feel deep, masculine or mysterious.

Tones are more complex and can feel more pleasing, refined or sophisticated.

Contrast is really important for your website colors: high contrast helps visitors process information which results in a better user experience

(Photo Sources: High Contrast Left, High Contrast Right, Low Contrast Left, Low Contrast Right)

Experimenting with tint, shade and tone means you’re making your colors lighter and/or darker. This will help you establish contrast, which is an insanely important element when it comes to web design because it will help your audience process information and can be used to highlight the most important things on your site.

Use color vibrancy to establish an energy level for your brand and website: high vibrancy feels more energetic, low vibrancy feels more calm

(Photo Sources: High Vibrancy Left, High Vibrancy Right, Low Vibrancy Left, Low Vibrancy Right)

One final thing to consider for your website colors is vibrancy. Vibrancy is simply a color’s strength and is important in establishing your brand’s energy level. Bright colors will feel energetic and muted colors will feel subdued or calm.

You can influence a positive experience on your site by helping your visitor’s process information through thoughtful contrast, and establish your brand’s energy with your vibrancy levels.


02 / COLOR ASSOCIATIONS:

Think about what you want your brand to stand for, then consider the following common associations people have with different colors:

Colors play into human emotion // Here are some common color associations to help you determine the best colors for your brand!

(Photo sources: RedOrange, YellowGreenBlue, Violet, Black, Brown, White)

Here are some common color associations:

Red: bold, passion, strength, love, urgency, action, impulsivity

Orange: happy, friendly, cheerful, affordable, warm, energetic

Yellow: optimistic, playful, creative, confident, youthful, warm

Green: wealth, health, freshness, nature, growth, luck, can be relaxing

Blue: conservative, honest, secure, calm, trusting, productive

Purple: imaginative, upscale, creative, royal, calm, successful

Black: luxury, control, authority, edgy, mystery, formal, sophisticated

Brown: secure, wealth, down to earth, duty, comfort, protection

White: cool, complete, clean, innocent, growth, fresh, pure, open


03 / CREATING YOUR COLOR SCHEME

I want to tell you about a little design formula called the 60/30/10 Rule. This rule was originally created for interior design but has since been adopted across multiple disciplines in the design world.

The 60/30/10 Rule is a design principle that states you should pick one dominant color and use it 60% of the time, one secondary color and use it 30% of the time, and one accent color and use it 10% of the time

In its simplest form, the 60/30/10 rule states that you choose 3 colors and assign them hierarchy:  1 dominant, 1 secondary and 1 accent. Your dominant is used 60% of the time, secondary is used 30% and your accent is used 10% of the time.

(Something to mention about the 60/30/10 Rule for websites is that the rule applies to COLOR, so your white background doesn’t count unless it’s something you’ve included in your final 3 colors. Refer back to my site examples above to see what I mean.)

Here are some light/dark/accent examples using the 4 color relationships from earlier:

Examples of light, dark and accent color combinations

(Photo sources: Monochromatic LightMonochromatic DarkMonochromatic Accent + Triadic Dark, Complementary Light + Triadic AccentComplementary DarkComplementary Accent, Triadic Light, Analogous LightAnalogous DarkAnalogous Accent)

Now, if you need any help coming up with your color scheme you should try using this really cool online tool I found called Paletton (it's free!).

Here's how to use Paletton:

First you'll want to pick your color relationship (monochrome, adjacent, etc). There's a tool just to the right of it that let's you choose the distance between the color points on the wheel if you want to adjust anything. My example above shows a triadic color relationship with 30° as the default distance then it switches over to 90°.
 

How to use Paletton to help you create a color scheme

If you want to adjust the contrast just click and drag the dots in the middle. You can also rotate these dots.

 

paletton-presets.gif

There are also presets that can help you fine tune your scheme.

 

paletton-site-mockup.gif

You can even preview your colors in a website mockup 🙌🏾

It might take a little experimentation so try to have fun during this part of the process! If something feels off be sure to pay attention to what’s going right with the combo, then start tweaking other elements.


04 / APPLYING COLOR TO YOUR WEBSITE


Now you simply need to give your dominant, secondary and accent colors specific jobs on your website.

Here are some ideas for how to do this:

Dominant (60%): logo or navigation bar, H1 (headline 1 text), big blocks of color behind text, footer, background color

Secondary (30%): page links, "active" page (navigation), H2 (headline 2 text), horizontal line

Accent (10%): H3 (headline 3 text), call to action buttons

How to apply branded color scheme to website

Make sure to consider your color scheme for your photos, patterns, icons and illustrations used on your site too! I love the way my bud Allison of Allie Marie Designs does this with her site photography (dude, go check it out).


TAKE AWAYS

• Put your audience first when brainstorming colors for your brand and website. What will appeal to them and make their visit to your site the best possible experience?

• Utilizing high contrast (especially with text) will help level up your site experience (nobody wants to squint to read something!) and can even influence how your site visitor’s flow through your website (use high contrast or a pop of color to draw attention to your graphics and call to action buttons to keep people clicking around).

• Brighter, vibrant colors will require more mental energy, so make sure you think about what kind of energy level you want to offer your site visitors. 

• When forming your color scheme use this simple formula as a starting point: 1 light color + 1 darker color + 1 pop or accent (or you could use 2 colors with high contrast if you wanted to simplify it even more).

• Incorporate the 60/30/10 Rule when it comes to color on your site: 60% of your color should be your primary color, 30% should be secondary and 10% should be your accent color.

• Don't forget to apply this rule to anything you create for your business!


So like I mentioned earlier, this guide is seriously just a base to get you started with your website and brand's color schemes in a systematic way. I really hope you'll apply these basics then experiment until something feels right for you. And if you haven't checked it out yet, you should take a peek at the other ultimate guide I made for fonts on your website!
 

Got a question? Leave it in the comments below!
 

 

PIN FOR LATER!

 

click for larger view