A Complete Guide to Color Wheels & Color Schemes

While text-based content is always important when seeking answers to a question, creating visuals such as infographics, charts, graphs, animated GIFs, and other shareable images can do wonders for catching your readers’ attention and enhancing your article or report. Knowing color theory and design can help you make content stand out.

I know what you might be thinking: “I don’t know how to design awesome visuals. I’m not creative.” Neither am I, yet I found a strength in data visualization at HubSpot, where I’ve spent most of my days creating infographics and other visuals for blog posts.

Consider this your introductory course to color theory, types of color schemes, and the use of palettes. We’ll be covering the following topics:

What is color theory?

Color theory is the basis for the primary rules and guidelines that surround color and its use in creating aesthetically pleasing visuals. By understanding color theory basics, you can begin to parse the logical structure of color for yourself to create and use color palettes more strategically. The result means evoking a particular emotion, vibe, or aesthetic.

While there are many tools out there to help even the most inartistic of us to create compelling visuals, graphic design tasks require a little more background knowledge on design principles.

Take selecting the right color combination, for instance. It’s something that might seem easy at first but when you’re staring down a color wheel, you’re going to wish you had some information on what you’re looking at. In fact, brands of all sizes use color psychology to learn how color influences decision-making and affects design.

Understanding how colors work together, the impact they can have on mood and emotion, and how they change the look and feel of your website is critical to help you stand out from the crowd — for the right reasons.

From effective CTAs to sales conversions and marketing efforts, the right color choice can highlight specific sections of your website, make it easier for users to navigate, or give them a sense of familiarity from the first moment they click through.

But it’s not enough to simply select colors and hope for the best — from color theory to moods and schemes, finding the right HTML color codes, and identifying web-accessible colors for products and websites, the more you know about using color, the better your chances are for success.

Read on for our designer’s guide to color theory, color wheels, and color schemes for your site.

Color Theory 101

Okay, great. So now you know what the “main” colors are, but you and I both know that choosing color combinations, especially on a computer, involves a much wider range than 12 basic colors.

This is the impetus behind the color wheel, a circle graph that charts each primary, secondary, and tertiary color — as well as their respective hues, tints, tones, and shades. Visualizing colors in this way helps you choose color schemes by showing you how each color relates to the color that comes next to it on a rainbow color scale. (As you probably know, the colors of a rainbow, in order, are red, orange, yellow, green, blue, indigo, and violet.)

When choosing colors for a color scheme, the color wheel gives you opportunities to create brighter, lighter, softer, and darker colors by mixing white, black, and gray with the original colors. These mixes create the color variants described below:

Hue

Hue is pretty much synonymous with what we actually mean when we said the word “color.” All of the primary and secondary colors, for instance, are “hues.”

Hues are important to remember when combining two primary colors to create a secondary color. If you don’t use the hues of the two primary colors you’re mixing together, you won’t generate the hue of the secondary color. This is because a hue has the fewest other colors inside it. By mixing two primary colors that carry other tints, tones, and shades inside them, you’re technically adding more than two colors to the mixture — making your final color dependent on the compatibility of more than two colors.

If you were to mix the hues of red and blue together, for instance, you’d get purple, right? But mix a tint of red with the hue of blue, and you’ll get a slightly tinted purple in return.

Shade

You may recognize the term “shade” because it’s used quite often to refer to light and dark versions of the same hue. But actually, a shade is technically the color that you get when you add black to any given hue. The various “shades” just refer to how much black you’re adding.

Tint

A tint is the opposite of a shade, but people don’t often distinguish between a color’s shade and a color’s tint. You get a different tint when you add white to a color. So, a color can have a range of both shades and tints.

Tone (or Saturation)

You can also add both white and black to a color to create a tone. Tone and saturation essentially mean the same thing, but most people will use saturation if they’re talking about colors being created for digital images. Tone will be used more often for painting.

With the basics covered, let’s dive into something a little more complicated — like additive and subtractive color theory.

RGB color models, on the other hand, are designed for electronic displays, including computers.

RGB stands for Red, Green, Blue, and is based on the additive color model of light waves. This means, the more color you add, the closer you get to white. For computers, RGB is created using scales from 0 to 255. So, black would be R=0, G=0, and B=0. White would be R=255, G=255, and B=255.

When you’re creating color on a computer, your color module will usually list both RGB and CMYK numbers. In practice, you can use either one to find colors, and the other color model will adjust accordingly.

However, many web programs will only give you the RGB values or a HEX code (the code assigned to color for CSS and HTML). So, if you’re designing digital images or for web design, RGB is probably your best bet for choosing colors.

Worth noting? Different audiences may perceive colors differently. The meanings listed above are common for North American audiences, but if your brand moves into other parts of the world, it’s a good idea to research how users will perceive particular colors. For example, while red typically symbolizes passion or power in the United States, it’s considered a color of mourning in South Africa.

While it’s possible to create your website using a combination of every color under the rainbow, chances are the final product won’t look great. Thankfully, color experts and designers have identified seven common color schemes to help jumpstart your creative process.

You may have guessed it, but a complementary color scheme is based on the use of two colors directly across from each other on the color wheel and relevant tints of those colors.

The complementary color scheme provides the greatest amount of color contrast. Because of this, you should be careful about how you use the complementary colors in a scheme.

Image Source

Square color schemes are great for creating interest across your web designs. Not sure where to start? Pick your favorite color and work from there to see if this scheme suits your brand or website. It’s also a good idea to try square schemes against both black and white backgrounds to find the best fit.

Image Source

7. Rectangle

Also called the tetradic color scheme, the rectangle approach is similar to its square counterpart but offers a more subtle approach to color selection.

Image Source

As you can see in the diagram above, while the blue and red shades are quite bold, the green and orange on the other side of the rectangle are more muted, in turn helping the bolder shades stand out.

Image Source

No matter which color scheme you choose, keep in mind what your graphic needs. If you need to create contrast, then choose a color scheme that gives you that. On the other hand, if you just need to find the best “versions” of certain colors, then play around with the monochromatic color scheme to find the perfect shades and tints.

Remember, if you build a color scheme with five colors, that doesn’t mean you have to use all five. Sometimes just choosing two colors from a color scheme looks much better than cramming all five colors together in one graphic.

Examples of Color Schemes

Now that you are familiar with color scheme types, let’s take a look at some in the wild.

1. Canva

Type: Monochromatic

Image Source

The use of blues and purples really make this monochromatic blueberry-inspired template stand out. Each shade builds on the next and provides ample contrast despite remaining within the same color family.

2. Newfoundland and Labrador Tourism

Type: Triadic

Image Source

As we mentioned earlier, nature is a great way to get inspiration for your color palette. Why? Because mother nature already has it figured out. Newfoundland and Labrador Tourism took advantage of these triadic shades to showcase the region’s natural beauty.

3. Daye

Type: Analogous

Image Source

Eco-friendly Women’s health company Your Daye uses a blend of pastels and earthy tones for its analogous color scheme. The effect is soothing and pleasing to the eye.

1. Leverage natural inspiration.

Once your site operations are solid, it’s time to start selecting colors.

Not sure what looks good? Take a look outside. Nature is the best example of colors that complement each other — from the green stems and bright blooms of flowering plants to azure skies and white clouds, you can’t go wrong pulling context from natural colors and combinations.

2. Set a mood for your color scheme.

With a few color choices in mind, consider the mood you want your color scheme to set. If passion and energy are your priorities, lean more toward red or brighter yellows. If you’re looking to create a feeling of peace or tranquility, trend toward lighter blues and greens.

It’s also worth thinking negatively. This is because negative space — in either black or white — can help keep your design from feeling too cluttered with color.

3. Consider color context.

It’s also worth considering how colors are perceived in contrast.

In the image below, the middle of each of the circles is the same size, shape, and color. The only thing that changes is the background color.

Yet, the middle circles appear softer or brighter depending on the contrasting color behind it. You may even notice movement or depth changes just based on one color change.

This is because the way in which we use two colors together changes how we perceive it. So, when you’re choosing colors for your graphic designs, think about how much contrast you want throughout the design.

For instance, if you were creating a simple bar chart, would you want a dark background with dark bars? Probably not. You’d most likely want to create a contrast between your bars and the background itself since you want your viewers to focus on the bars, not the background.

4. Refer to your color wheel.

Next, consider your color wheel and the schemes mentioned above. Select a few different color combinations using schemes such as monochrome, complementary, and triad to see what stands out.

Here, the goal isn’t to find exactly the right colors on the first try and create the perfect design, but rather to get a sense of which scheme naturally resonates with your personal perception and the look of your site.

You may also find that schemes you select that look good in theory don’t work with your site design. This is part of the process — trial and error will help you find the color palette that both highlights your content and improves the user experience.

5. Draft multiple designs.

Draft and apply multiple color designs to your website and see which one(s) stand out. Then, take a step back, wait a few days and check again to see if your favorites have changed.

Here’s why: While many designers go in with a vision of what they want to see and what looks good, the finished product often differs on digital screens that physical color wheels — what seemed like a perfect complement or an ideal color pop may end up looking drab or dated.

Don’t be afraid to draft, review, draft again and throw out what doesn’t work — color, like website creation, is a constantly-evolving art form.

How to Use Color Palettes

While color schemes provide a framework for working with different colors, you’ll still need to use a color palette — the colors you will select to use for your project. If you’re stumped about what colors to use, consider using a palette generator to get your creativity flowing.

Here are some best practices to make the most out of your color palette:

1. Work in grayscale.

This may sound counter-intuitive but starting with black and white can help you see exactly how much contrast exists in your design. Before getting started with color, it’s important to lay out all the elements like text, CTAs, illustrations, photos, and any other design features. The way your design looks in grayscale will determine how well it looks in color. Without enough light and dark contrast, your design will be hard to view, leaving your audience with a less than satisfactory user experience. Low contrast designs also make them inaccessible for those with a vision impairment.

2. Use the 60-30-10 rule.

Often used in home design, the 60-30-10 rule is also useful for website or app design.<

• 60%: primary or main color
• 30%: secondary colors
• 10%: accent colors

While you’re certainly not limited to using just three colors, this framework will provide balance and ensure your colors work together seamlessly.

3. Experiment with your palette.

Once you’ve made your color selection, experiment to discover which work better together. Consider how copy or type looks on top of your designated main color (60% is typically used as the background color).

Try not to use your main colors for buttons since you’re already using it everywhere else. Consider one of your accent colors instead.

4. Get feedback or conduct A/B testing.

So you’ve finished your draft. Now it’s time to test it. Before sending your design to market, you’ll want to test how users interact with it. What may look good to you, may be difficult to read for others. Some things to consider when asking for feedback:

• Are the CTAs generating attention?
• Are the colors you chose distracting?
• Is there enough color contrast?
• Is the copy legible?

Getting another set of eyes on your design will help you spot errors or inconsistencies you may have missed in the creation process. Take their feedback in stride and make adjustments where needed.

Put simply? Practice makes perfect. The more you play with color and practice design, the better you get. No one creates their masterpiece the first time around.

Color Tools