Color Theory 101 for Website Design

Color theory 101 for website design 28 Sep

Color Theory 101 for Website Design

“I found I could say things with color and shapes that I couldn’t say any other way — things I had no words for.” – Georgia O’Keeffe

What artist Georgia O’Keeffe found in the power of color is something we still find true in website design today. Think about when you scroll through your Facebook feed — what stands out to you the most? Chances are it’s the visuals like photographs and infographics that grab your gaze with their striking hues.

If you’re designing a website for your business, you’ll need to know the basics of choosing a visually appealing color palette.

Getting down to the basics

To help you use color scheme to your advantage with your own website design, we’re going to go over the basics of color theory:

Primary colors

You probably have some vague memory of learning the primary colors as a kid (red, yellow and blue). They’re the building blocks of color theory, and you can mix them together to form all of the other colors on the color wheel.

Secondary colors

Secondary colors are those created by mixing primary colors. The secondary colors are green (yellow+blue), violet (blue+red) and orange (yellow+red).

Tertiary colors

Next up are tertiary colors, which are created when you combine a secondary color and a primary color (like teal, or blue-green).

Color wheel to help select website design colors. Fleshing out your color palette

If you’ve taken a trip down the paint aisle at your local Home Depot, you know there are a LOT more hues than the 12 present on the color wheel. How do we create all of those other colors then? By adding black, white or gray to any of the main hues!

Let’s take a quick look at a few more definitions so this makes sense:

  • Hue: a synonym for the word “color”
  • Shade: a term for adding black to a hue (i.e. dark red is a shade of red)
  • Tint: a term for adding white to a color (i.e. pink is a tint of the color red)
  • Tone/saturation: a hue you create when adding gray to a color

Sticking with the root

Starting to feel like you’re back in school and in a vocabulary lesson? Stick with me, because understanding the basics above means you’ll understand why certain colors look great together, and why you want to avoid other combinations.

Hubspot uses Twitter’s main color scheme as an example:

“Let’s use the blue from the logo, the lighter blue, as our reference point. That’s our hue. That’s ‘Twitter blue.’ The darker blue is simply a shade of that Twitter blue, yet it has a higher saturation, making it a bit more vivid and eye-catching (which makes a whole lot of sense considering Twitter is using that blue to draw attention to their primary CTA: ‘Tweet’).”

Hubspot's Twitter monochromatic color scheme example

The color scheme Twitter uses is “monochromatic,” because the root color is blue, and the shade, tint and saturation are only variations of that hue.

Pro tip: Monochromatic colors look great together!

A color scheme that pops

If you don’t want to go with a monochromatic color scheme, how do you select colors that are going to look good together? Hues that sit directly across from each other on the color wheel are a fantastic option, and they create great contrast.

Other good color combinations are those that are directly next to each other on the color wheel, called “analogous colors.” You can also opt for colors spaced evenly around the color wheel, referred to as “triadic colors.”

Next time you’re creating a graph, chart or updating your web design, you’ll be able to pull together coordinating colors from around the color wheel. Now you can select hues like a pro and your visuals will capture everyone’s attention!

About the Author:

Kate HarveyWith an extensive background in online marketing, Kate Harvey helps business owners be more successful in the world of SEO and SEM as a Search Marketing Specialist and Project Lead at GoDaddy.

 

 

Follow us!

Facebooktwittergoogle_pluspinterestlinkedinrssyoutubeFacebooktwittergoogle_pluspinterestlinkedinrssyoutube

BySCORE Phoenix

The Greater Phoenix Chapter of SCORE is a nonprofit association dedicated to educating entrepreneurs and helping small businesses start, grow, and succeed nationwide. As a resource partner with the U.S. Small Business Administration (SBA), SCORE offers mentoring for small business owners through a large network of volunteer mentors, local workshops, events, and tools.

4 Comments

SCORE Phoenix

The color one is not a workshop. The cyber security is Oct. 8, 1pm, $25.

https://events.r20.constantcontact.com/register/eventReg?oeidk=a07ebi2tj8127bf732a

 

Michael Falwell

What is the date and cost for this workshop?

 

Michael

What is the date and cost of this workshop?
Thanks,
Michael F.

 

%d bloggers like this: