Designing with Color: An Introduction to Color Theory

Elevate your design game by learning the basics of color theory; including color schemes and wheels!

Jay Perlman

It's easy to forget just how profound colors can be. Claude Monet described color as his "day-long obsession, joy and torment", while Marc Chagall was quoted as saying "Color is all. When color is right, form is right. Color is everything."

It's not just world-renowned artists who've come to realize the deep impact color has on humans. Color is so meaningful that it can be broken down into both science and art, and the definitions, ideas and concepts surrounding color theory are seriously abundant.

But why is color theory so important? Why have people poured countless hours into the mastery of hues?

Well, for one, whether you are a professional or novice designer, having a basic sense of color theory will do wonders for making stunning creations that are more visually pleasing.

Two, the science and art of color theory are directly connected to human behavior and psychology, and having a firm understanding of this is a quick way to make brands, products, and visual projects much more appealing to customers.

So before you start plastering red font all over your green website (please don't do that...),  a general understanding of the following will help avoid color combination faux pas while also elevating your design game dramatically:

  • Color wheel, primary colors, secondary colors, tertiary colors
  • The RGB model
  • The CMYK model
  • Color schemes and how to use them

All the info that you soak up today will help you shape your projects into even more spectacular creations. Plus, this knowledge will give you a deeper understanding of our collections of customizable illustrations, and how to use them in the most effective and fun way possible.

But first, a little more about color

Merriam-Webster's definition of color is "the aspect of the appearance of objects and light sources that may be described in terms of hue, lightness, and saturation for objects and hue, brightness, and saturation for light sources".

color theory hues

What that essentially means is that color is how we humans perceive the wavelengths of light that are bouncing off different objects.

For example, imagine gawking at a little pink puppy marching along the sidewalk. Other than the fact that you are mind-blown by a pink dog, your brain is actually processing the combinations of wavelengths that are reflecting off this cute lil pup, and forming these wavelengths into what you perceive as pink.

The way color theory helps us visualize the range of these wavelengths is through the color wheel. While this may seem like elementary knowledge, colors can be broken down into primary, secondary, and tertiary colors, while also be split between the warm spectrum of colors and the cool spectrum.

the basic colors

Neat fascinating stuff, right!?

Seriously though, considering how much human behavior is affected by all of these colorful combinations is pretty astounding.

That being said, there is some subjectivity behind the psychology of color, many of the moods and behaviors that colors evoke are close to universal. For example, red often is associated with warmth, passion, intensity, and excitement, while green is more closely associated with feelings of tranquility, growth, calmness, and harmony.

The mix of the science and emotional understanding behind colors is part of the reason that people put so much importance on them when designing a website or building a brand. Often times, the colors are the difference between a brand that goes unnoticed and one that is successful!

Color Mixing Models

There are two main forms of color mixing methods: RGB additive color mixing method, and the CMKY subtractive color mixing method. Which method you use will mainly be determined by the project you're working on.

RGB: Additive Color Mixing Method

What do mobile apps, websites, digital display ads, and tv screens have in common? They use RGB to display their colors!

All of those examples have screens that blend red, blue, and green light sources of varying degrees, and our brains read these light waves and translate them into what we know as color.

rgb color

The main point here is that if you're designing a fresh looking user interface for an app, or launching a brand new website of a product, the color system you'll be working with is RGB.

If you're looking to maintain consistency of colors across branding, using RGB for screens and digital is crucial. Using the wrong system on screens or projectors can produce colors that are off, like a dull blue instead of a bright blue, for example.

So, if you're not printing anything, and you're looking to keep things digital, sticking with the RGB color mixing system is definitely your best bet.

CMKY: Subtractive Color Mixing Method

If you're not working on a digital project, no worries, there is still a color mixing method for you! CMKY (cyan, magenta, yellow, and key/black), or the subtractive color mixing method is used on physical surfaces like print and signage. Subtractive simply means that the pigments and ink that are added to the physical surface "subtract" light which generates our sensation of color.

In terms of a real-world example, if you're designing an eye-popping book cover for the latest NY Times best-seller, you'll absolutely be working within the CMKY realm.   Or if you're looking to print out a menu with a bunch of bright and bold doodles? CMKY all the way!

cmyk color

This all falls back on the consistency of what you're creating. If your project involves print, from magazines, flyers, and packaging and onward, you'll want to create brand consistency by working with CMYK.

Color Schemes

Now that you know which method you'll be using for your projects, it's finally time to come back to the color wheel and the importance of mixing and matching those lovely hues.

There are three main color schemes that designers will generally follow:

  • Complementary
  • Analogous
  • Triadic

Again, these are the three basic schemes and the most recognizable, so for now, let's deconstruct each one to learn more about what they really mean.

1. Complementary

Complementary colors are colors that are on the opposite side of each other on the color wheel. Complementary combinations tend to be bold and vibrant, but can be a bit overwhelming when used in large doses together, and are well known for being poor choices for text.

BUT! When used appropriately, they can be excellent for creating something that is eye catching (think CTA or small details for UX), so make sure not to write off complementary colors all together!

complementary color

2. Analogous

Colors that sit next to each other on the wheel make up analogous schemes. These pairings are often found in nature, which gives them a tranquil and calming sense. Some of the most recognizable companies in the world us these pleasant color combos for their branding and logos (think Paypal, Mastercard, and Subway)

If you're not a globally recognized corporation, no worries! There are still plenty of ways analogous colors come in handy for creations. User interfaces, UX design, and web design can greatly benefit from a well picked analogous color scheme.

analogous color

3. Triadic

This type of combination involves colors that are of equal distance from each other. These blends can have an impactful and dramatic effect, hence the reason that many big brands use this type of color harmony for their logos.

For example, when you conjure up the oh-so-delicious chalupas of Taco Bell, those beautiful colors surrounding that doodled-up bell is triadic. Or the Tide laundry detergent you use to clean those sweatpants you've been living in the last month, those brand colors are triadic as well!

For those looking to create a brand logo that stands out and has some muscle, pondering a harmonic blend of triadic colors is a great place to start.

triadic color

Play with Colors Using Blush

It'd be a bold-faced lie to say that we aren't a little obsessed with colors here at Blush. We know that having complete creative control requires the ability to pick and choose your hues and palettes, which is why we knuckled down and created color filters.

With this new feature, it's super easy to customize and create all your favorite color palettes. With a few simple clicks, you can create an infinite range of your own personal color schemes, helping you stay consistent with all your creations

As mentioned, picking your own personal colors for your illustrations is easy as doodle pie. Once you've clicked on one of your doodles, in the bar, a 'Color Filters' tab will pop up. Once you've clicked that you can start adding, mixing and matching all of your traidic and analogous pairings you want!

Basically the issues of remaining on-color across marketing and production content are long gone. Now, colors can be flipped and flopped with ease with all your doodles, which, if I may say so myself, is pretty darn dope!

The Colorful Takeaway

Creating beautiful color combinations doesn't take a master's degree in design, even a young child hopped up on Red Bull can make awesome finger paintings! The difference is that having knowledge of color theory is a great way to make creations more successful.

So whether it's customizable illustrations for a website that feature an RGB friendly triadic color scheme, or some doodles with a analogous colorway for a physical menu, knowing your way around hues will always help elevate your creativity.

Tweet us your colorful projects! We always want to see them.

Design
Design