“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:
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 are those created by mixing primary colors. The secondary colors are green (yellow+blue), violet (blue+red) and orange (yellow+red).
Next up are tertiary colors, which are created when you combine a secondary color and a primary color (like teal, or blue-green).
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’).”
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: