Published on

How to Not Suck at Colors

Authors
  • avatar
    Name
    Rosa Tiara
    Twitter

Overview

Choosing color combinations is very frustrating, and everybody knows that (duh). Even though you’ve been visiting color generator websites and search for your color preferences, sometimes it still feels like you’re getting more and more confused than before (well at least for me). These are 5 tips I got from surfing across the web to learn about color theory.


Color Harmonies

Color Harmony is a science-based technique to pair colors together in visually pleasing ways. There are some color harmonies terms like Monochromatic, Complementary, Analogous, and more!

color harmonies

What's the function of these terms, seriously?

Those terms describe the relationship of the colors to create a particular look or feel. You can create harmonious color schemes by placing these geometric shapes on top of the color wheel and adjusting saturation and brightness as needed. There are two types of color wheel, RYB (red-yellow-blue) and RGB (red-green-blue). RYB is usually used by artists as it helps to combine paint colors. RGB is designed for digital use as it refers to mixing light.

How does color harmony work?

We’ll start with a great example by Chris. Let’s say you love this orange color and you want this to be applied to your design, but you’re not quite sure what’s the most pleasing color to pair with it.

orange color with rgb value of 245,144,60

rgb(245, 144, 60)

With color harmonies, you can play with Monochromatic,

orange color with rgb value of 245,144,60

Analogous,

orange color with rgb value of 245,144,60

Split Complementary,

orange color with rgb value of 245,144,60

Or any color harmonies that fit you best! All you need to do in this first step is find one color that you like & let color harmonies do the rest. This website by Adobe is a great resource to help you finding color harmonies.


Neutral Colors

Neutral colors are like the supporters for your main color either it's warm, cool, light, or dark. Think about the colors that pop to your mind when you hear the words "neutral colors". You might be imagining light colors similar like the image below.

neutral colors

What's the benefit of using neutral colors?

They offer visual restful for your primary colors. Why would color need to be visually restful? Your eyes did absorb the beautiful and colorful colors out there but it can be extremely exhausting if you see too many strong and colorful colors at once.

For a clear example, well, this room feel more peaceful for me

neutral colors

than this room (and I'm sure you feel the same!).

neutral colors

Not to say that those are ugly colors, though. In fact, every strong color you can think of creates a reaction in your mind, but neutral colors don't. Another interesting thing about neutral colors is when they are combined correctly, they'll create more depth, especially compared to stronger colors. This makes an area look bigger or deeper, which is usually a good thing.


Less is More

Overused and oversaturation are the two most common mistake on color combinations Chris sees. Remember, the more colors you have to work with, the more difficult to make them all work together.

Think about when you cook. You don't just use all the spices from the rack.

When you're making a pudding and add sugar as well as salt, peper, and vinegar, oh jeez, I'm pretty sure that'd taste awful. So before you go wild with those 25 colors for your website, think again, think about the mood (visual flavor) you wanna create when visitors come in.


Contrast

Low contrast is undoubtedly a great way to frustrate people while seeing your work. Take a look at the comparison below.

low contrast dog

General rule & tip: If it (your color combination) works well in grayscale, it'll work well in color as well. Get in a habit of checking your color values by converting your work into grayscale.


Balance

When it comes to colors, balance is the key. You have to make sure that there's a nice range of value, hue, and saturation. You can't have light without dark, and vice versa. Not every color has to be the center of attention either. Using the 60-30-10 rule is a great way to start.

What is 60-30-10 rule?

It is a rule for using primary colors 60% of the time, 30% for neutral colors, and 10% for accent colors. This rule will help you to make your design understandable to the viewers.


Conclusion

Understanding color theory is not as easy as it seems. Understanding basic concepts of the theory will of course help you to make your design prettier. However, you can make your own rule for your design. One thing that you have to keep in mind is to be consistent about your rule so your customers could also understand what is the aim of your design and color choices. Have a colorful day!