What gets your attention when you search your news feed? Most likely it’s YouTube videos, images, animated GIFs, and other visual content, right?
While text-based content is always important when looking for answers to a question, creating visuals like infographics, charts, graphs, animated GIFs, and other sharable images can do wonders to grab your readers’ attention and your article or report too improve.
I know what you might be thinking, “I don’t know how to make great graphics. I’m not creative.”
Hello. I’m Bethany, and I’ll be the first to tell you that I’m not artistic by nature. And yet, at HubSpot, I found a strength in data visualization, where I spent most of my time creating infographics and other visuals for blog posts.
So I wouldn’t say that I’m artistic by nature, but I’ve learned how to create compelling visual content. You can do that too.
And you can do this by learning color theory. Think of this as your introductory course and we will cover the following topics:
What is color theory?
Color theory is the foundation of the main rules and guidelines surrounding color and its use in creating aesthetically pleasing images. Once you understand the basics of color theory, you can begin to analyze the logical structure of colors for yourself in order to create and use color palettes more strategically. The result means evoking a certain emotion, mood or aesthetic.
Why is color theory important in web design?
Color is an important, if not the most important, aspect of design and can affect the meaning of text, how users move around and how they feel about a particular layout. Understanding color theory can help you focus more effectively on creating images with impact.
While there are many tools out there to help even the most inartistic of us create compelling graphics, graphic design tasks require a little more background knowledge of design principles.
Take, for example, choosing the right combination of colors. At first glance, this may seem easy, but when you stare at a color wheel you will wish you had some information about what you are looking at. Understanding how colors work together, what impact they can have on mood and emotions, and how they change the look and feel of your website is critical to standing out from the crowd – for all the right reasons.
From effective CTAs to sales conversions and marketing efforts, choosing the right color can highlight specific areas of your website, make it easier for users to navigate, or give them a sense of familiarity from the first moment.
But it’s not enough just to pick colors and hope for the best – from color theory to moods and schemes to finding the right HTML color codes and identifying internet-accessible colors for products and websites. The more you know about the use of color, the better your chances of success.
Read on to get our designer guide on color theory, color circles, and color schemes for your website.
Color Theory 101
First, let’s go back to high school art class to discuss the basics of color.
Do you remember hearing about primary, secondary and tertiary colors? They’re pretty important in understanding everything else about color.
Primary colors are those that you cannot create by combining two or more other colors together. They are similar to prime numbers that cannot be produced by multiplying two other numbers.
There are three basic colors:
Think of primary colors as your parent colors and anchor your design in a general color scheme. Any or any combination of these colors can add guard rails to your brand as you explore other shades, tones, and tints (we’ll talk about that in a minute).
If you’re designing, or even painting, with primary colors, don’t feel limited to the three primary colors listed above. Orange isn’t a primary color, for example, but brands can certainly use orange as their dominant color (as we at HubSpot know that pretty well).
Knowing which primary colors make orange is your ticket to identifying colors that might go well with orange – assuming the right hue, tone, or tint. This brings us to our next color type …
Secondary colors are the colors formed by combining two of the three primary colors listed above. Look at the color theory model above – do you see how each secondary color is supported by two of the three primary colors?
There are three secondary colors: orange, purple, and green. You can create each with two of the three primary colors. Here are the general rules for creating secondary colors:
- Red + yellow = orange
- Blue + red = purple
- Yellow + blue = green
Remember, the above color mixes only work if you use the purest form of each base color. This pure form is called a hue, and you will see how these hues compare to the variants under each color in the color wheel below.
Tertiary colors are created when you mix a primary color with a secondary color.
This is where color gets a little more complicated, and if you want to learn how the experts pick color in their design you need to understand all of the other components of color first.
The most important component of tertiary colors is that not every primary color can match a secondary color to produce a tertiary color. For example, red can’t harmonize with green, and blue can’t harmonize with orange – either mix would result in a slightly brown color (unless that’s what you’re looking for, of course).
Instead, tertiary colors are created when a primary color is mixed with a secondary color that is next to it on the color wheel below. There are six tertiary colors that meet this requirement:
- Red + purple = Red purple (Magenta)
- Red + orange = Red orange (Vermilion)
- Blue + purple = Blue purple (violet)
- Blue + green = blue green (blue green)
- Yellow + orange = Yellow orange (Amber)
- Yellow + green = Yellow-green (Map)
The color theory wheel
OK 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 engine behind the color wheel, a pie chart that depicts 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 on a rainbow color scale matches the color next to it. (As you probably know, the colors of a rainbow are in the correct order red, orange, yellow, green, blue, indigo, and violet.)
When choosing colors for a color scheme, the color wheel gives you the ability to create lighter, lighter, softer, and darker colors by mixing white, black, and gray with the original colors. These mixtures result in the color variants described below:
Hue is pretty much synonymous with what we actually mean when we say the word “color”. For example, all primary and secondary colors are “hues”.
Hues are important when combining two primary colors to create a secondary color. If you don’t use the hues of the two primary colors that you mix together, you are not creating the hue of the secondary color. This is because one shade contains very few other colors. By mixing two primary colors that contain different tints, tones, and shades, you are technically adding more than two colors to the mix – your final color will depend on the compatibility of more than two colors.
For example, if you mixed the shades of red and blue together, you would get purple, right? However, mix a shade of red with the shade of blue and you get a slightly tinted purple in return.
You may recognize the term “shadow” by the fact that it is used quite often to refer to light and dark versions of the same shade. But actually, technically, a hue is the color you get when you add black to a particular hue. The different “shades” only relate to how much black you add.
A hue is the opposite of a hue, but people don’t often differentiate between the hue and the hue of a color. You get a different shade by adding white to a color. So a color can have a number of shades and tints.
Tone (or saturation)
You can also add white and black to a color to create a tone. Tone and saturation mean essentially the same thing, but most people use saturation when talking about colors created for digital images. Clay is used more often for painting.
With the basics covered, let’s dive into something more complicated – like additive and subtractive color theory.
Additive and subtractive color theory
If you’ve ever played around with colors in a computer program, you’ve probably seen a module that lists RGB or CMYK colors with some numbers next to the letters.
Have you ever wondered what these letters mean?
CMYK stands for cyan, magenta, yellow, key (black). These are also the colors that are listed on your ink cartridges for your printer. It’s not a coincidence.
CMYK is that subtractive color model. It’s called that because you have to subtract colors to get white. That said, the opposite is true – the more colors you add, the closer you get to black. Confusing isn’t it?
Think about printing on a piece of paper. The first time you load a sheet of paper in the printer, you are usually printing on a sheet of white paper. By adding color, you prevent the white wavelengths from penetrating.
For example, suppose you put the printed sheet of paper back in the printer and print something on it again. You will find that the areas that have been printed twice have the colors closer to black.
I find it easier to think about CMYK in terms of the corresponding numbers. CMYK works on a scale from 0 to 100. At C = 100, M = 100, Y = 100 and K = 100 you get black. But if all four colors are 0, you get real white.
RGB color models, on the other hand, are designed for electronic displays, including computers.
RGB stands for red, green, blue and is based on that additive color model of light waves. That said, the more color you add, the closer you get to white. For computers, RGB is created with 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 create colors on a computer, your color engine usually lists both RGB and CMYK numbers. In practice, you can either use one to find colors and the other color model will adjust accordingly.
However, many web programs only give you the RGB values or a HEX code (the code assigned to the color for CSS and HTML). So if you’re creating digital images or web design, RGB is probably your best choice for color choices.
You can always convert the design to CMYK and make adjustments should you ever need it for printed materials.
The importance of color
In addition to different visual effects, different colors also have different emotional symbols.
- Red – is usually associated with power, passion, or energy and can help keep you active on your website.
- Orange – joy and enthusiasm, which makes it a great choice for positive news
- Yellow – luck and intellect, but beware of overuse
- Green – Often associated with growth or ambition, green can make it feel like your brand is on the rise
- Blue – calm and self-confidence, depending on the shade – lighter shades convey a feeling of peace, darker colors look more self-confident
- Purple – luxury or creativity, especially when used consciously and sparingly on your website
- Black – power and mystery, and the use of this color can help create the necessary negative space
- Know – Safety and Innocence, which makes it a great choice to use to optimize your website
Worthless? Different target groups can perceive colors differently. The meanings listed above are common for North American audiences, but if your brand is moving to other parts of the world, it’s a good idea to study how users perceive certain colors. For example, while red typically symbolizes passion or power in the United States, in South Africa it is considered the color of mourning.
While it is possible to create your website with a combination of all the colors under the rainbow, chances are the final product will not look good. Fortunately, color experts and designers have identified seven common color schemes to help kick-start your creative process.
What are the seven color schemes?
The seven main color schemes are monochromatic, analog, complementary, split complementary, triadic, square, and rectangular (or tetradic).
Let’s examine each one in more detail.
Monochromatic color schemes use a single color with different shades and tones to create a consistent look. Although it lacks color contrast, it often looks very clean and polished. It also allows you to easily change the darkness and lightness of your colors.
Monochromatic color schemes are often used for charts and graphs when high contrast is not required.
Look at all of the monochromatic colors that fall under the red hue, a primary color.
Analogous color schemes are created by pairing a main color with the two colors directly next to it on the color wheel. You can also add two additional colors (which can be found next to the two exterior colors) if you want to use a five-color scheme instead of just three colors.
Analog textures don’t create subjects with high contrast colors, so they are typically used to create a softer, less contrasting design. For example, you could use an analog structure to create a color scheme with fall or spring colors.
This color scheme is great for creating warmer (red, orange, and yellow) or cooler (purple, blue, and green) color palettes like the one below.
Analog schemes are often used to design images instead of infographics or bar charts because all of the elements blend well together.
You might have guessed it, but a complementary color scheme is based on using two colors directly opposite on the color wheel and relevant hues of those colors.
The complementary color scheme offers the greatest color contrast. Because of this, you should be careful about how you use the complementary colors in a scheme.
It is best to use one color predominantly and use the second color as an accent in your design. The complementary color scheme is also great for charts and graphs. High contrast helps you highlight important points and findings.
4. Complementary split
A split complementary scheme includes a dominant color and the two colors that are directly adjacent to the dominant color’s complementary color. This creates a more nuanced color palette than a complementary color scheme, while retaining the benefits of contrasting colors.
The shared complementary color scheme can be difficult to balance because, unlike analog or monochromatic color schemes, the colors used all provide contrast (similar to the complementary scheme).
The positives and negatives of the split complementary color model is that you can use any two colors in the scheme and get a lot of contrast … but that also means that it can also be difficult to find the right balance between the colors. As a result, you can end up playing around with this a little more to find the right combination of contrasts.
Triadic color schemes offer high-contrast color schemes with a consistent tone. Triadic color schemes are created by choosing three colors evenly spaced in lines around the color wheel.
Triad color schemes are useful for creating high contrast between each color in a design, but they can also look overwhelming when all of your colors are picked at the same point in a line around the color wheel.
To mute some of your colors in a triadic scheme, you can choose a dominant color and use the others sparingly, or just mute the other two colors with a softer shade.
The triadic color scheme looks great in graphs like bar or pie charts because it provides the contrast you need to make comparisons.
The square color scheme uses four equidistant colors on the color wheel to create a square or diamond shape. While this evenly spaced color scheme will offer a significant contrast to your design, it’s a good idea to pick one dominant color rather than trying to balance out all four.
Square color schemes are great for creating interest in your web designs. Not sure where to start? Pick your favorite color and work from there to see if this scheme fits 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.
Also known as the Tetradic color scheme, the rectangular approach is similar to its square counterpart, but offers a more subtle approach to color choices.
As you can see in the diagram above, while the blues and reds are pretty bold, while the greens and oranges on the other side of the rectangle are more muted, which in turn highlights the bolder hues.
No matter what color scheme you choose, keep in mind what your artwork needs. If you need to create contrast, choose a color scheme that offers you it. On the other hand, if all you need to do is find the best “versions” of certain colors, play around with the monochromatic color scheme to find the perfect shades and tints.
Remember, creating a five color scheme doesn’t mean you have to use all five. Sometimes it looks a lot better to pick just two colors from a color scheme than to cram all five colors together into one graphic.
How to choose a color scheme
- First, prioritize the user experience. Use the natural inspiration.
- Set a mood for your color scheme.
- Consider the color context.
- Refer to your color wheel.
- Use the 60-30-10 rule.
- Create multiple designs.
1. Prioritize the user experience first.
Before adding color to your website, app, product, or packaging, download the basic grayscale design.
So you can focus on what really matters: the user experience. Instead of focusing on the color scheme of your entire website or the hue of specific buttons or links, make sure everything works the way it’s supposed to. Make sure links are not broken, product pages are up to date, and email opt-ins are ready.
Here’s why: even the best website or product with perfect color choices won’t be enough to keep visitors if they can’t find what they’re looking for.
2. Use natural inspiration.
Once your site operations are solid, it’s time to start color picking.
Don’t know what looks good? Take a look outside. Nature is the best example of colors that complement each other – from the green stems and bright flowers of flowering plants to the azure skies and white clouds, you can’t go wrong with contextualizing natural colors and combinations.
3. Set a mood for your color scheme.
With some color choices, consider the mood your color scheme is supposed to set. If passion and energy are your priorities, you’re more inclined to go for reds or lighter yellows. If you want to create a sense of peace or calm, go for lighter shades of blue and green.
It is also worth thinking negatively. This is because negative space – either black or white – can help keep your design from looking too cluttered with color.
4. Consider the color context.
It is also worth considering how colors are perceived in contrast.
In the picture below, the center of each of the circles is the same size, shape, and color. The only thing that changes is the background color.
However, the middle circles appear softer or lighter behind them, depending on the contrasting color. You may even notice movement or changes in depth just because of a change in color.
This is because the way we use two colors together changes our perception. So when choosing colors for your graphic designs, think about how much contrast you want throughout the design.
For example, if you’re creating a simple bar chart, would you like a dark background with dark bars? Probably not. You probably want to create some contrast between your bars and the background itself, since you want your viewers to focus on the bars, not the background.
5. Refer to your color wheel.
Next, look at your color wheel and the schemes above. Pick out a few different color combinations using schemes like monochrome, complementary, and triad to see what stands out.
It’s not about finding exactly the right colors and creating the perfect design the first time, but rather getting a feel for which scheme naturally matches your personal perception and the appearance of your site.
You may also find that schemes you choose that look good in theory will not work with your website design. This is part of the process – trial and error will help you find the color palette that will both make your content stand out and improve the user experience.
6. Use the 60-30-10 rule.
The 60-30-10 rule is often used in home design and is also useful for website or app design. The idea here is to use three colors: a main color for 60% of your design, a secondary color for 30% of your design, and an accent color for the last 10%.
While these aren’t hard numbers, they help add a sense of proportion and balance to your website by providing a primary color with secondary and accent colors that all work together.
7. Create multiple designs.
Design and apply multiple color themes to your website and see which one (s) stand out. Then take a step back, wait a few days, and then check again to see if your favorites have changed.
Here’s why: while many designers have a vision of what they want to see and what looks good, the finished product on digital screens is often different from physical color wheels – what looks like a perfect match or pop of color may end up looking like it was monotonous or out of date.
Don’t be afraid to design, review, redesign and throw away what doesn’t work – color, like website building, is an ever-evolving art form.
Expressed in a simple way? Practice creates masters. The more you play with color and design, the better you get. Nobody creates their masterpiece the first time.
There was a lot of theoretical and practical information to actually understand which colors go best together and why. But when it comes to the actual task of color selection in designing, it’s always a good idea to have tools to help you get the job done quickly and easily.
Glücklicherweise gibt es eine Reihe von Tools, mit denen Sie Farben für Ihre Designs finden und auswählen können.
Eines meiner bevorzugten Farbwerkzeuge, die ich beim Entwerfen von allem verwende – sei es eine Infografik oder nur ein Kreisdiagramm – ist Adobe Color (früher Adobe Kuler).
Mit diesem kostenlosen Online-Tool können Sie schnell Farbschemata erstellen, die auf den zuvor in diesem Beitrag erläuterten Farbstrukturen basieren. Sobald Sie die Farben im gewünschten Schema ausgewählt haben, können Sie die HEX- oder RGB-Codes kopieren und in das von Ihnen verwendete Programm einfügen.
Es bietet auch Hunderte von vorgefertigten Farbschemata, die Sie erkunden und in Ihren eigenen Designs verwenden können. Wenn Sie ein Adobe-Benutzer sind, können Sie Ihre Designs ganz einfach in Ihrem Konto speichern.
Ich verbringe viel Zeit in Adobe Illustrator und eine meiner am häufigsten verwendeten Funktionen ist die Farbhilfe. Mit der Farbhilfe können Sie eine Farbe auswählen und automatisch ein Fünf-Farben-Schema für Sie erstellen. Es gibt Ihnen auch eine Reihe von Tönungen und Schattierungen für jede Farbe im Schema.
Wenn Sie Ihre Hauptfarbe ändern, wechselt die Farbhilfe die entsprechenden Farben in diesem Schema. Wenn Sie also ein Komplementärfarbschema mit der Hauptfarbe Blau gewählt haben, wechselt die Komplementärfarbe, sobald Sie Ihre Hauptfarbe auf Rot umstellen, auch von Orange auf Grün.
Wie Adobe Color verfügt die Farbhilfe über eine Reihe von voreingestellten Modi, um das gewünschte Farbschema auszuwählen. Dies hilft Ihnen bei der Auswahl des richtigen Farbschemastils innerhalb des Programms, das Sie bereits verwenden.
Nachdem Sie das gewünschte Farbschema erstellt haben, können Sie dieses Schema im Modul “Farbthemen” speichern, damit Sie es in Ihrem Projekt oder in Zukunft verwenden können.
Wenn Sie kein Adobe-Benutzer sind, haben Sie wahrscheinlich mindestens einmal Microsoft Office-Produkte verwendet. Alle Office-Produkte verfügen über voreingestellte Farben, die Sie verwenden und mit denen Sie herumspielen können, um Farbschemata zu erstellen. PowerPoint verfügt auch über eine Reihe von Farbschemavorgaben, mit denen Sie sich für Ihre Designs inspirieren lassen können.
Wo sich die Farbschemata in PowerPoint befinden, hängt davon ab, welche Version Sie verwenden, aber sobald Sie die Farb-„Designs“ Ihres Dokuments gefunden haben, können Sie die Einstellungen öffnen und die RGB- und HEX-Codes für die verwendeten Farben finden.
You can then copy and paste those codes to be used in whatever program you’re using to do your design work.
Finding the Right Color Scheme
There’s a lot of theory in this post, I know. But when it comes to choosing colors, understanding the theory behind color can do wonders for how you actually use color. This can make creating branded visuals easy, especially when using design templates where you can customize colors.
Editor’s note: This post was originally published in October 2018 and has been updated for comprehensiveness.