Color Theory 101: A Complete Guide to Color Wheels & Color Schemes

When you're sifting through your News Feed, what tends to catch your attention? More likely than not, it's YouTube videos, pictures, animated GIFs, and other visual content, right?

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.

我知道您可能在想什么：“我不知道如何设计出色的视觉效果。我没有创造力。”

你好。我是伯大尼（Bethany），我将是第一个告诉你我不是天生艺术的人。然而，我在HubSpot发现了数据可视化的力量，在这里，我大部分时间都为博客文章创建信息图表和其他视觉效果。

所以，虽然我不会说我naturally艺术，我学会了如何创建引人注目的视觉内容。你可以。

And you can do this by learning color theory. Consider this your introductory course, and we'll be covering the following topics:

• What Is Color Theory?
• Why Is Color Theory Important in Web Design?
• Color Theory 101
• 添加剂和减法理论
• 颜色的含义
• The Seven Color Schemes
• How to Choose a Color Scheme
• Color Tools

What is color theory?

颜色理论是围绕颜色及其在创建美学令人愉悦的视觉效果的主要规则和准则的基础。通过了解颜色理论的基础知识，您可以开始解析颜色的逻辑结构，以创建和使用color palettesmore 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设计原则。

Takeselecting the right color combination， 例如。一开始似乎很容易，但是当您凝视着色轮时，您将希望您有一些有关您所看品的信息。了解颜色如何一起工作，他们对情绪和情感的影响以及它们如何改变网站的外观和感受对于帮助您在人群中脱颖而出至关重要。

从有效的CTA到销售转换和营销工作，正确的颜色选择可以突出显示您网站的特定部分，使用户更容易导航，或者从首次点击的第一刻开始，使他们有一种熟悉感。

But it’s not enough to simply select colors and hope for the best — from color theory to moods and schemes,查找正确的HTML颜色代码，和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

Let's first go back to high school art class to discuss the basics of color.

还记得听到有关主要，次要和三级颜色的消息吗？如果您想了解其他关于颜色的一切，那么它们非常重要。

Primary Colors

原色是通过将两种或更多其他颜色组合在一起而无法创建的原色。它们很像质数，不能通过乘以其他两个numberstogether.

有三种原色：

• Red
• Yellow
• Blue

Think of primary colors as your parent colors, anchoring your design in a general color scheme. Any one or combination of these colors can give your brand guardrails when you move to explore other shades, tones, and tints (we'll talk about those in just a minute).

当设计甚至绘画与原色s, don't feel restricted to just 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 this quite well).

Knowing which primary colorscreate橘子is your ticket to identifying colors that might go well with orange — given the right shade, tone, or tint. This brings us to our next type of color ...

Secondary Colors

次要颜色是结合上面列出的三种主要颜色中的任何两种形成的颜色。查看上面的颜色理论模型 - 查看每个二级颜色如何由三种原色中的两种支持？

There are three secondary colors:橘子,紫色的， 和green。You can create each one using two of the three primary colors. Here are the general rules of secondary color creation:

• Red + Yellow =Orange
• Blue + Red =Purple
• 黄色 +蓝色=Green

Keep in mind that the color mixtures above only work if you use the purest form of each primary color. This pure form is known as a color'shue， 和you'll see how these hues compare to the variants underneath each color in the color wheel below.

Tertiary Colors

Tertiary colors are created when you mix a primary color with a secondary color.

从这里，颜色变得更加复杂，如果您想了解专家如何在设计中选择颜色，那么您必须首先了解所有其他颜色组成部分。

第三级颜色的最重要组成部分是，并非每种主要颜色都可以与辅助颜色匹配以创建第三级颜色。例如，红色不能与绿色和谐混合，而蓝色不能与橙色和谐混合 - 两种混合物都会导致略带棕色的颜色（当然，这是您想要的）。

Instead, tertiary colors are created when a primary color mixes with a secondary color that comes next to it on the color wheel below. There are six tertiary colors that fit this requirement:

• 红色 +紫色=Red-Purple(magenta)
• Red + Orange =Red-Orange(vermillion)
• 蓝色 +紫色=Blue-Purple(violet)
• Blue + Green =Blue-Green(teal)
• 黄色 +橙色=Yellow-Orange（琥珀色）
• Yellow + Green =Yellow-Green(chartreuse)

The Color Theory Wheel

好，太棒了。所以现在您知道“主要”颜色是什么，但是你和我都知道选择color combinations，尤其是在计算机上，涉及比12种基本颜色更大的范围。

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, arered,橘子,yellow,green,blue,indigo， 和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."

在组合两种原色以创建辅助颜色时，要记住的色调很重要。如果您不使用要混合在一起的两种原色的色调，则不会产生辅助色的色调。这是因为色调内部还有其他最少的颜色。通过混合两种带有其他色调，色调和阴影的原色，从技术上讲，您可以在混合物中添加两种以上的颜色 - 使您的最终颜色取决于两种以上颜色的兼容性。

If you were to mix the hues of red and blue together, for instance, you'd get purple, right? But mix atintof 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.

音调（或饱和度）

您也可以将白色和黑色添加到颜色中以创建音调。音调和饱和基本上意味着同一件事，但是如果他们谈论为数字图像创建的颜色，大多数人都会使用饱和。音调将更多地用于绘画。

涵盖了基础知识，让我们深入研究一些更复杂的东西，例如添加和减少色彩理论。

添加剂和减法理论

如果您曾经在任何计算机程序上玩过颜色，那么您可能已经看到一个模块列出了RGB或CMYK颜色，并在字母旁边有一些数字。

有没有想过那些字母是什么意思？

CMYK

CMYK stands for Cyan, Magenta, Yellow, Key (Black). Those also happen to be the colors listed on your ink cartridges for your printer. That's no coincidence.

CMYK is the减去ive color model。这就是这样，因为你必须减去colors to get to white. That means the opposite is true — the more colors you add, the closer you get to black. Confusing, right?

考虑在纸上打印。当您第一次将纸放在打印机中时，通常会在白色纸上打印。通过添加颜色，您可以阻止白色波长通过。

Then, let's say you were to put that printed piece of paper back into the printer, and print something on it again. You'll notice the areas that have been printed on twice will have colors closer to black.

I find it easier to think about CMYK in terms of its corresponding numbers. CMYK works on a scale of 0 to 100. If C=100, M=100, Y=100, and K=100, you end up with black. But, if all four colors equal 0, you end up with true white.

RGB

另一方面，RGB颜色模型是为电子显示器（包括计算机）设计的。

RGB代表红色，绿色，蓝色，并基于additive color model光波。这意味着，您的颜色越多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.

但是，许多Web程序只会为您提供RGB值或十六进制代码（分配给CSS和HTML颜色的代码）。因此，如果您正在设计数字图像或用于网络设计，则RGB可能是选择颜色的最佳选择。

您可以随时将设计转换为CMYK，并进行调整，如果您需要印刷材料。

颜色的含义

除了不同的视觉影响外，不同的颜色还具有不同的情感象征意义。

• Red — typically associated with power, passion, or energy, and can help encourage action on your site
• Orange — joy and enthusiasm, making it a good choice for positive messaging
• Yellow — happiness and intellect, but be wary of overuse
• Green — often connected to growth or ambition, green can help give the sense that your brand is on the rise
• Blue — tranquility and confidence, depending on the shade — lighter shades provide a sense of peace, darker colors are more confident
• 紫色 - 奢侈品或创造力，尤其是在您的网站上有意使用和谨慎的时候
• 黑色 - 力量和神秘，使用这种颜色可以帮助创造必要的负空间
• White — safety and innocence, making it a great choice to help streamline your site

值得注意？不同的观众可能会以不同的方式感知颜色。上面列出的含义对于北美观众来说很常见，但是如果您的品牌进入世界其他地区，那么研究用户如何感知特定颜色是一个好主意。例如，虽然红色通常象征着美国的激情或力量，但在南非被认为是一种哀悼的颜色。

虽然可以使用彩虹下的每种颜色的组合来创建您的网站，但最终产品可能不会很好。值得庆幸的是，颜色专家和设计师已经确定了七个常见的配色方案，以帮助您开始创作过程。

Let’s examine each in more detail.

1.单色

单色配色方案使用带有不同阴影和色调的单色，以产生一致的外观和感觉。尽管缺少颜色对比，但通常看起来很干净和抛光。它还使您可以轻松地改变颜色的黑暗和浅色。

Monochromatic color schemes are often used for charts and graphs when creating high contrast isn't necessary.

Check out all the monochromatic colors that fall under the red hue, a primary color.

2. Analogous

Analogous color schemes are formed by pairing one main color with the two colors directly next to it on the color wheel. You can also add two additional colors (which are found next to the two outside colors) if you want to use a five-color scheme instead of just three colors.

类似结构不会创建具有高对比度颜色的主题，因此通常用于创建较软，对比度较低的设计。例如，您可以使用类似的结构来创建具有秋天或春季颜色的配色方案。

This color scheme is great for creating warmer (red, oranges, and yellows) or cooler (purples, blues, and greens) color palettes like the one below.

Analogous schemes are often used to design images rather than infographics or bar charts as all of the elements blend together nicely.

3. Complementary

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.

It's best to use one color predominantly and use the second color as accents in your design. The complementary color scheme is also great for charts and graphs. High contrast helps you highlight important points and takeaways.

4. Split Complementary

A split complementary scheme includes one dominant color and the two colors directly adjacent to the dominant color's complement. This creates a more nuanced color palette than a complementary color scheme while still retaining the benefits of contrasting colors.

The split complementary color scheme can be difficult to balance because unlike analogous or monochromatic color schemes, the colors used all provide contrast (similar to the complementary scheme).

The positive and negative aspect of the split complementary color model is that you can use any two colors in the scheme and get great contrast ... but that also means it can also be tricky to find the right balance between the colors. As a result, you may end up playing around with this one a bit more to find the right combination of contrast.

5.三合会

Triadic color schemes offer high contrasting color schemes while retaining the same tone. Triadic color schemes are created by choosing three colors that are equally placed 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 seem overpowering if all of your colors are chosen on the same point in a line around the color wheel.

To subdue some of your colors in a triadic scheme, you can choose one dominant color and use the others sparingly, or simply subdue the other two colors by choosing a softer tint.

The triadic color scheme looks great in graphics like bar or pie charts because it offers the contrast you need to create comparisons.

6.正方形

The square color scheme uses four colors equidistant from each other on the color wheel to create a square or diamond shape. While this evenly-spaced color scheme provides substantial contrast to your design, it’s a good idea to select one dominant color rather than trying to balance all four.

Image Source

方形配色方案非常适合在您的网页设计中引起兴趣。不知道从哪里开始？选择您喜欢的颜色，并从那里工作，看看此方案是否适合您的品牌或网站。最好尝试针对黑白背景来找到最合适的方案。

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

无论您选择哪种配色方案，都请记住您的图形需求。如果您需要创建对比度，请选择一个为您提供的配色方案。另一方面，如果您只需要找到某些颜色的最佳“版本”，那么请使用单色配色方案来找到完美的阴影和色彩。

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.

1. Prioritize the user experience, first.

在您的网站，应用程序，产品或包装添加颜色之前，请在Greyscale中获得基本的设计下行。

This lets you focus on what matters most: User experience. Instead of focusing on the color scheme of your overall site or the hue of specific buttons or links, make sure everything works like it’s supposed to. Make sure links aren’t broken, product pages are up-to-date and email opt-ins are ready to go.

Here’s why: Even the best-looking website or product with perfect color selection won’t be enough to keep visitors if they can’t find what they’re looking for.

2. Leverage natural inspiration.

一旦您的网站操作扎实，就该开始选择颜色了。

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.

3.为您的配色方案设置心情。

有一个颜色的选择,考虑牛叫声d 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.

也值得一否考虑。这是因为负空间（黑色或白色）可以帮助您的设计感觉太混乱。

4. 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.

这是因为我们将两种颜色一起使用的方式改变了我们的感知方式。因此，当您为图形设计选择颜色时，请考虑整个设计中想要多少对比度。

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.

5.参考您的色轮。

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.

你也可能发现厕所的方案选择k 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.

6.使用60-30-10规则。

Often used in home design, the 60-30-10 rule 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-and-fast numbers, they help give a sense of proportion and balance to your site by providing a primary color with secondary and accent colors that all work together.

7.草稿多个设计。

草稿并将多种颜色设计应用于您的网站，并查看哪个颜色脱颖而出。然后，退后一步，等待几天，然后再次检查您的收藏夹是否改变了。

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.

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

有很多理论和实用信息，可以实际理解哪种颜色最好在一起以及原因。但是，当涉及到设计时选择颜色的实际任务时，拥有帮助您快速轻松地完成工作的工具总是一个好主意。

Luckily, there are a number of tools to help you find and choose colors for your designs.

Adobe Color

One of my favorite color tools to use while I'm designing anything — whether it's an infographic or just a pie chart — is Adobe Color (previously Adobe Kuler).

This free online tool allows you to quickly build color schemes based on the color structures that were explained earlier in this post. Once you've chosen the colors in the scheme you'd like, you can copy and paste the HEX or RGB codes into whatever program you're using.

它还具有数百种预制配色方案，供您探索和使用自己的设计。如果您是Adobe用户，则可以轻松地将主题保存到您的帐户中。

插画家彩色指南

我在Adobe Illustrator上度过了很多时间，我最使用的功能之一是“彩色指南”。颜色指南使您可以选择一种颜色，并且它将自动为您生成五色方案。它还将为您的方案中每种颜色提供各种色彩和阴影。

If you switch your main color, the color guide will switch the corresponding colors in that scheme. So if you've chosen a complementary color scheme with the main color of blue, once you switch your main color to red, the complementary color will also switch from orange to green.

Like Adobe Color, the color guide has a number of preset modes to choose the kind of color scheme you want. This helps you pick the right color scheme style within the program you're already using.

After you've created the color scheme that you want, you can save that scheme in the "Color Themes" module for you to use throughout your project or in the future.

Preset Color Guides

If you're not an Adobe user, you've probably used Microsoft Office products at least once. All of the Office products have preset colors that you can use and play around with to create color schemes. PowerPoint also has a number of color scheme presets that you can use to draw inspiration for your designs.

在PowerPoint中配色方案的位置将取决于您使用的版本，但是一旦找到文档的“主题”，您可以打开首选项并找到使用的颜色的RGB和十六进制代码。

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.