Your Color Guide: Color Theory, The Color Wheel, and How to Choose a Color Scheme

Your Color Guide: Color Theory, The Color Wheel, and How to Choose a Color Scheme


When you browse your news feed, what tends to catch your eye? More likely than not, it's videos, images, animated GIFs, and other YouTube visual content, is not it?

Textual content is always important for finding answers to a question and for creating visual elements such as computer graphics, graphics, graphics, and animations. GIF images and other images that can be shared can work wonders to catch the attention of your readers and improve your article or report.

I know what you think maybe: "I do not know how to create awesome graphics." m not creative. "

Hello, I'm calling Bethany and I'll be the first to tell you that I'm not naturally artistic, and yet I've found a strength in data visualization at HubSpot, where I'm Spent most of my days creating infographics and other visual elements for blog posts.

So, even though I would not say that I am naturally artistic , I've learned to create compelling visual content.So you can.

 New Call to Action

Although there are many tools for even help the most inartists to create convincing visuals, some parts of the graphic design take a little more basic knowledge.

Take for example the right colors.This is something that may seem easy in the beginning but when you set a color wheel, you may want to have information about what you are watching.

Think of it as your introductory course in color theory. Read on to find out more about the terms, tools, and tips for choosing the best colors for your designs.

Color Theory 101

Let's go back to an art class in high school first to discuss the basic principles of color. 19659002] Do you remember hearing about primary, secondary and tertiary colors? They are very important if you want to understand, well, everything about colors.

 Circular Color Theory Model with Labels for Primary Colors, Secondary Colors and Tertiary Colors

Primary Colors

Primary Colors are those that you can not create by combining two or more other colors together. They are very similar to prime numbers, which can not be created by multiplying two more numbers

. There are three primary colors:

  • Red
  • Yellow
  • Blue [19659020] Think of primary colors as parent colors, anchoring your drawing in a general color scheme. Any color or combination of these colors can give your brand safety barriers when you want to explore other shades, shades and hues (we'll talk about it in a moment).

    When designing or even painting with colors Do not feel limited to the three primary colors listed above. The orange is not a primary color, for example, but brands can certainly use orange as the dominant color (as we know very well at HubSpot).

    Know which primary colors create The orange is your ticket. to identify colors that may be in harmony with the orange – as long as you choose the right shade, hue or tone. This brings us to our next type of color …

    Secondary Colors

    Secondary colors are colors that are formed by combining two of the three primary colors listed above. Check out the color theory model above – 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 using two of the three primary colors. Here are the general rules for creating secondary colors:

    • Red + yellow = Orange
    • Blue + red = Violet
    • Yellow + blue = Green

    Save Do not forget that the above color blends only work if you use the purest form of each primary color. This pure form is known as the hue of a color and you will see how these hues compare to the variants under each color of the color wheel below.

    Tertiary colors

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

    From there, the color becomes a bit more complicated. And if you want to know how experts choose color in their design, you must first understand all the other components of color.

    The most important component of tertiary colors is that not all primary colors can match a secondary color. color to create a tertiary color. For example, red can not mix in harmony with green, and blue can not mix in harmony with orange – both mixtures would give a slightly brown color (unless of course it is what you are looking for).

    Instead, tertiary colors are created when a primary color is mixed with a secondary color that comes next on the color wheel below. There are six tertiary colors that meet this requirement:

    • Red + Violet = Red-Violet (magenta)
    • Red + Orange = Red-Orange (vermillion) [19659036] Blue + purple = Blue-purple (purple)
    • Blue + green = Blue-green (turquoise)
    • Yellow + orange = Yellow-orange (amber)
    • Yellow + Green = Yellow-Green (Charterhouse)

    The Wheel of Color Theory

    Very good. Now you know what the "main" colors are, but you and I know that the choice of color, especially on a computer, goes well beyond 12 basic colors.

    It's the impetus behind the color wheel, a circle. graphic representing each primary, secondary and tertiary color, as well as their respective hues, hues, tones and shades. Visualizing colors in this way helps you choose color combinations by showing you how each color is related to the color that follows it on a rainbow color scale. (As you probably know, the colors of a rainbow are, in the order of red orange yellow green blue [19659024] indigo and purple .)

     Wheel of color theory with labels for each hue, hue, hue and hue "width =" 450 "height =" 342

    When choosing colors for a color scheme, the color wheel lets you create lighter, lighter, softer, and darker colors by mixing white, black, and gray with colors d & # 39; origin. These mixtures create the color variants described below:

    Hue

    Hue is roughly synonymous with what we actually mean when we say the word "color". All primary and secondary colors, for example, are "hues".

    It is important to remember hues when combining two primary colors to create a secondary color. If you do not use the hues of the two primary colors you are mixing, you will not generate the hue of the secondary color. This is because a hue has the least color inside. By mixing two primary colors containing other hues, shades and shades, you technically add more than two colors to the blend, which makes your final color dependent on the compatibility of more than two colors.

    had to mix the shades of red and blue together, for example, you would become purple, right? But mix a shade of red with a shade of blue and you will get a slightly tinted purple in return.

    Shade

    You may recognize the term "shade" because it is often used to refer to light and dark versions of the same hue. But in reality, a shade is technically the color you get when you add black to a given shade. The different "shades" simply refer to the amount of black you add.

    Hue

    A hue is the opposite of a hue, but people do not often distinguish between the hue of a color and its hue. You get a different hue when you add white to a color. Thus, a color can have a range of shades and hues.

    Tone (or Saturation)

    You can also add white and black to a color to create a hue. Ton and saturation basically mean the same thing, but most people will use saturation if they are talking about creating colors for digital images. The tone will be used more often for painting.

    Adding and Subtracting Colors

    If you've ever played color in a computer program, you've probably seen a module listing RGB or CMYK colors with numbers. Letters.

    Ever wondering what these letters mean?

    CMYK

    CMYK means Cyan, Magenta, Yellow, Legend (Black). These are also in the colors indicated on your ink cartridges for your printer. This is not a coincidence.

    CMYK is the subtractive color model . This is what is called because we have to subtract the colors to get the white. This means the opposite is true: the more colors you add, the closer you get to black.

     Subtractive color chart with CMYK in the center

    Remember to print a piece of paper. When you insert a sheet for the first time into the printer, you usually print on a piece of white paper. By adding color, you prevent white wavelengths from passing.

    Suppose you place this piece of printed paper in the printer and print something on it. You'll notice that twice-printed areas tend to look more like blacker colors.

    I find it easier to think of CMYK in terms of 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 a black color. However, if the four colors are 0, you get a real white.

    The RGB

    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 color model additive light waves. This means that the more color you add the closer you get to white. For computers, the RGB format is created with the help of scales ranging from 0 to 255. Thus, the black would be R = 0, G = 0 and B = 0. The blank would be R = 255, G = 255 and B = 255.

     Additive color model with center RGB

    When you create a color on a computer, your color module usually lists RGB and CMYK numbers. In practice, you can use either to search for colors and the other color scheme will adjust accordingly.

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

    Now that we have all the basics of color theory, let's discuss how to actually use this new knowledge to create a design that enhances your brand and resonates. with your audience.

    You've probably already noticed that some colors go well together and others do not. The colors we choose can help improve a design or remove a design.

    When deciding how to draw a graphic, it is important to remember that the way we perceive colors depends on the context in which we work. see it.

    1. Examine the context of your color.

    The context of color refers to the way we perceive colors when they contrast with another color. Look at the pairs of circles in the example below to see what I mean.

    The middle of each of the circles has the same size, shape and color. The only thing that changes is the background color. However, the middle circles look softer or shinier depending on the contrasting color behind. You may even notice changes in movement or depth based only on a color change.

     Four pairs of colored circles showing a different color context

    Indeed, the way we use two colors together modifies the we perceive it. So, when choosing colors for your graphic designs, think about the level of contrast you want throughout the design.

    For example, if you are creating a simple bar chart, do you want a dark background with dark bars? Probably not. You will probably want to create a contrast between your bars and the background itself, because you want your viewers to focus on the bars, not on the background.

    The choice of high-contrast colors is not always so difficult. Choose colors that go well together.

    For me, this is where the choice of color is the most delicate. I could spend hours choosing colors for an infographic just because it takes a while to get an idea of ​​what is best for a set.

    In reality, however, I usually do not have hours to spend choosing colors. (And it would probably be a waste of time even if I had a few hours.)

    Fortunately, there are logical rules for creating color schemes that work together.

    2. Refer to a color wheel to identify analog colors.

    Analogous color schemes are formed by associating a main color with the two colors located next to the color wheel. You can also add two extra colors (located next to the two outer colors) if you want to use a set of five colors instead of just three colors.  Chromatic wheel with five similar colors drawn between blue and yellow

    Similar structures do not create themes with contrasting colors. They are therefore generally used to create a softer and less contrasting design. For example, you can use a similar structure to create a color scheme with fall or spring colors.

    I like to use this color scheme to create warmer colors (red, orange and yellow) or cooler ones (purple, blue and green). ) color palettes like the one below.

    I would probably use this palette to design an image rather than an infographic or a bar graph because I would like to have all the elements. in the picture to blend well.

    3. Refer to a color wheel to identify complementary colors.

    You may have guessed it, but an additional color palette is based on the use of two colors directly one in front of each other on the color wheel and on the appropriate hues of these colors. [19659002] The complementary color palette provides the greatest amount of color contrast. For this reason, you should pay attention to how you use the complementary colors in a scheme. It is best to use a predominantly color and use the second color as accents in your drawing.

    The complementary color scheme is also ideal for diagrams and graphics. High contrast allows you to highlight important points and elements to remember.

    However, if I had to use these colors in an infographic, it would probably be necessary to use a much brighter color for the actual background. Can you imagine choosing one of the oranges as a background with the blues as the accent and text? It would probably be too powerful and difficult to read.

    4. Concentrate on monochrome colors in the same shade.

     A round of color with two monochrome colors drawn along the red hue

    The use of a monochromatic pattern allows you to create a color scheme based on various hues and shades. hue. Although it lacks color contrast, it often ends up looking very clean and polite. It also allows you to easily change the darkness and brightness of your colors.

    I like to use monochrome color schemes for graphics and graphics, but that's only in cases where the creation of high contrast is not necessary. However, monochromatic patterns do not tend to "pop", so if you are looking for a bright and eye-catching color scheme, this one is not your best choice.

    Discover all the monochrome colors that fall under this criterion. the red hue, a primary color.

     Bar of red color with a hue, hue, red tone and shade

    5. Use a triadic color scheme to create a high contrast.

    Triadic color schemes offer highly contrasting color schemes while maintaining the same tone. Triadic color schemes are created by choosing three colors that are also placed in lines around the color wheel.

     A color wheel with three triadic colors traced between purple, green and orange

    useful for creating a high contrast between each color of a pattern, but they can also seem irresistible if all your colors are chosen at the same point in a line around the color wheel.

    To tie some of your colors into a triadic pattern, you can choose a dominant color and use the others sparingly, or simply soften the other two colors by choosing a softer shade.

    The triadic color scheme looks great in graphics such as bar graphs and pie charts, as it offers the desired contrast. create comparisons.

    However, if I used this color scheme to create an infographic, I would be more likely to choose a color as the background color, such as yellow or light green, and a darker contrasting color like dominance. color. I could then use the other three colors as accents. By changing the color intensity in the drawing, I can highlight important points and elements to remember.

     Color bar with purple, green and orange triadic colors

    6. Create a complementary set of complementary colors.

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

    It may be difficult to balance the complementary complementary color scheme because, unlike similar or monochrome colors, the colors used all provide a contrast (similar to the complementary pattern).

    I can imagine using the following complementary color scheme in different ways. I could use it in a chart or chart because it gives me the contrast I need and the colors stay visually appealing.

    I could also imagine using these colors in an infographic, even if I would have a little more fun with the colors. to see which pairs look the best.

    The positive and negative aspect of the split complementary color scheme is that you can use any two colors in the scheme and get a good contrast … but that also means that it can also be tricky. find the right balance between the colors. As a result, you can play with this one a little more to find the right combination of contrast.

    Whichever color palette you choose, try to keep your graphics needs in mind. . If you need to create a contrast, choose a color scheme that will give you that. On the other hand, if you just need to find the best "versions" of certain colors, play with the monochromatic color scheme to find the perfect shades and hues.

    I discovered that just understanding how color schemes are used constructs me a lot to help choose the right color scheme. If I just think, "What is the purpose of this chart?" I can begin to determine the contrast I need.

    Do not forget that if you create a five-color color scheme, that does not mean you have to use all five colors. Sometimes the simple choice of two colors in a color scheme is much more aesthetic than grouping the five colors into a single graphic.

    7. Think beyond the predefined parameters, but start with one color.

    Before I send you amazing pictures to improve your blog and social posts, let me give you some more tips for choosing the colors:

    • Do not stick to the presets. Almost every program you use will automatically give you preset colors. Exceed the predefined parameters and explore the colors yourself. Do not let the program decide how you use color in your drawing.
    • Start with a color you like. Whenever I see something, I start with one color and create the color scheme from there. If you try to start with more than one color, you will have a harder time finding a harmony between your colors.
    • Save your color palettes. If you find a color (or color scheme) that you like, it will probably come in handy later. I would not suggest using the same color scheme for every graphic or graph you create, but you can still use different games differently in the future.
    • The practice is perfect. The more you play with color and design, the better you are. The first time, nobody creates his masterpiece.

    Color Tools

    There is a lot of theoretical and practical information to understand which colors are best suited and why. But when it comes to choosing colors when designing, it is always good to have tools to get the job done quickly and easily.

    Fortunately, there are many tools to help you. you find and choose the colors for your designs.

    Adobe Color

    Adobe Color (formerly Adobe) is one of my favorite color tools to use for designing any type of graphics. Kuler).

    This free online tool allows you to quickly create color swatches based on the color structures explained earlier in this article. Once you have chosen the colors in the desired game, you can copy and paste the HEX or RGB codes into the program you are using.

    It also features hundreds of predefined color schemes that you can explore and use. in your own designs. If you use Adobe, you can easily save your themes to your account.

     Color wheel on the dashboard of Adobe Color

    Illustrator Color Guide

    I spend a lot of time in Adobe Illustrator, and one of my most used features is the color guide. The color guide allows you to choose a color and automatically generates a set of five colors. This will also give you a range of hues and shades for each color in the game.

    If you change the main color, the color guide will change the corresponding colors in this game. So, if you have chosen a complementary color palette With the main blue color, once you switch from the main color to red, the complementary color also goes from orange to green.

    Like Adobe Color, the color guide has a number of predefined modes for choosing the type of color scheme you want. This helps you choose the right color scheme style in the program you are already using.

    Once you have created the desired color scheme, you can save it in the "Color Themes" module. your project or in the future.

     Color Options in Illustrator Color Guide Tool

    Preset Color Guides

    If you are not an Adobe user, you have probably used at least once Microsoft Office products. All Office products have predefined colors that you can use to create color combinations. PowerPoint also contains a number of pre-defined color scheme settings that you can use to find inspiration for your designs.

    The location of color schemes in PowerPoint depends on the version you are using, but once you have found the color "theme" of your document, you can open the preferences and locate the RGB and HEX codes for the colors used.

    You can then copy and paste these codes for use in the program you use to do your design work.

    [1965 Color Swatches and Meters in PowerPoint

    There is a lot of theory in this post, I know it. But when it comes to choosing colors, understanding the theory behind color can work wonders for your use of color.

     download more than 195 free design templates "src =" https://no-cache.hubspot.com/cta/default/53/9bda8699-e0ac-428c-a987-bdc898b44747.png

     195 free design templates "src =" https://no-cache.hubspot.com/cta/default/53/2dfbcc5f-c525-40ad-aaea-e07537253b80.png

Leave a Reply

Close Menu