Creative Basics — Color Theory
Intro to color theory
Today we are going to learn the importance of color in your design and the basics of what is referred to as “Color Theory”. This article is part of my “Design for Noobs” series which is geared towards people wanting to learn the basics of design.
Who this article is for:
- Someone just starting out in design
- Designers who have never fully grasped color theory
- Developers who want to make their sites/apps look better
Color Theory is one of the most basic principles you should know as a designer, but it also very subjective and something that you become better at, the more you do it. I know that statement doesn’t really help new designers since it can make you feel like you are lost and everybody is laughing at you. Everybody starts off this way though. Confused, Searching for inspiration, maybe even borrowing (stealing) a pallet outright from some website or project. Shhh… Shhh… there there now, it will be all right, because in this post we are going to tackle the basic stuff you should know about color to help out your design game. You should walk away from this article less afraid to try and more empowered to make design decisions. Let’s get started!
What is Color Theory?
Color Theory is a loaded term and if you ask a room full of people, designers even, you may get varying definitions. At it’s most basic level Color Theory is:
The interaction of colors in a design through complementation, contrast, and vibrancy.
Wow, I just gave you a definition with more words that might need defining like “complementation”, “contrast”, and “vibrancy”. I will define those terms in a bit but first let me try to calm you with a simpler definition than the computer jargon I just vomited at you.
Color Theory is understanding how colors work together to make sense of a design to the people experiencing the design.
With all of that being said, lets dive in and to try to turn something that may have been grey for you into a black and white (pun intended).
Colors of the rainbow
There are three Primary Colors from which all others colors can be derived. The primary colors are of course Red, Blue, and Yellow and are the building block for everything that follows.
Mix two of the primary colors together and you will have created one of the three Secondary Colors which are Green, Orange, Violet. So far so good? Good, because I am about to blow your mind with how simple this next part is.
Mix a Primary and a neighboring Secondary color and you will get… You guessed it, a Tertiary color. There very well may be quaternary(4), quinary(5), and senary(6) colors but I’m pretty sure the time space continuum pretty much explodes after tertiary, So we won’t risk humanity for the sake of trying.
Below you will see a cool color wheel that doesn’t resemble a wheel at all, but it does show you all of those amazing color combos we just spoke about. You can see this is all very mathematical and un sexy at this point, but don’t worry it gets better.
Hubcaps — Modifying The Colors of the wheel
Remember those three terms from earlier I said we would talk about? This is the section where we will address them and how they affect your color selections for your next amazing design project along with some other modifiers.
- Complementation
Complementation refers to the way colors relate to one another. The way that two colors are paired can drastically change how they are perceived. For instance Orange is a beautiful color, but orange mixed with red and yellow can be a bit overwhelming and end up looking like an 90’s Power Ranger costume.
On the other hand Orange paired with the color across the color wheel from it like green, blue or violet can be more visually appealing. When colors occupy opposite sides of the color wheel it helps to establish balance. **This is not to say that like colors cannot compliment each other, but rather that it is much harder to do.**
2. Contrast
Have you ever had to quit while reading a website, magazine, or sign… Bad Contrast is the culprit. Contrast is the drama that takes place in your design. The fight between good and evil is always represented by light and dark and in design it is no different. Contrast has it’s finger in more than just color. Texture, Shape, Size, Etc… can all create some drama by adding contrast. **Contrast creates visual interest by creating clear separation between items**. One of the most obvious examples which was listed above is the use of text color on top of background color.
Contrast is not only for readability but also for User Experience, and to draw a viewers eye towards a specific element in your design contrast it’s surrounding and Voilà you got their attention now.
3. Vibrancy
Vibrancy is simply energy conveyed through color. It is one of the many ways to convey emotion in design. The best way to think about vibrancy is like thinking about famous cooking superstar Julia Child making a soup (I mean later in life Julia, not young Julia).
She’s explaining all the ingredients, walking you through like your grandmother, It’s good, you like it, But then theres Guy Fieri…
He’s loud, talks a lot, wears obnoxious shirts and don’t get me started on the hair… One might call him “Vibrant”. Do you think think this is an accident? or did the Food Network realize that there was a need for someone vibrant and so they set out looking for someone that fits that bill and bang… Guy Fieri is on the map.
Brighter colors lead the viewer to feel more energetic, upbeat and young. Darker less vibrant colors can relax viewers, giving a sense of calm and focus.
A good example of this out in the wild is a comparison between Fox News and Vox. While both news media websites that end with an “X”, Vox tends to market more towards the younger generation in content and design while Fox’s darker interface might be more your dad’s cup of tea.
4. Tint, Hue & Shade
These next few terms are all completely different yet commonly used synonymously… Weird I know. Here is the definition for **Tint and Shade**:
In color theory, a tint is the mixture of a color with white, which increases lightness, and a shade is the mixture of a color with black, which reduces lightness. A tone is produced either by the mixture of a color with gray, or by both tinting and shading.
Got it? Shade is adding black. Tint is adding white. A tone is adding grey (which is in essence back and white).
Ok… so now for Hue:
A hue refers to a pure color — one without tint or shade (added white or black pigment). A hue is an element of the color wheel.
So a Hue is the original color it can be mapped back to before it has been tinted or shaded. So let me give you an example of all three together.
I start with the hue of Red (the Primary Color of red) and mix it with the hue of Blue (the Primary Color of blue) I get a new Hue of Violet (a Secondary Color). I then decide to brighten my hue up by tinting it with white. But if someone asked me what hue it is I can still say it is a hue of… “Violet”. Good job now let me burst your bubble. People tend to use the words hue and shade as the word “color”. Just go with it :(
What color to pick?
Now the we know all about colors, You will have noticed that different colors bring out different emotions when you see them. How does this work? While color is a foundation of design, knowing when and why to use those colors are the key to good design and that my friend is color theory.
Throughout time different colors have had different meanings. Even in Hebrew culture purple is a color that represents royalty. So while the western world might see the color red as a stop sign, in other parts of the world red is a color of morning, marriage, passion, or celebration. I will not be able to cover every possible meaning to every possible color, but hope to instead make you aware of these cultural differences and get you started with a few basic color meanings.
If you are looking for a quick list and not the in depth explanation:
- Green: New Beginnings, Abundance, Nature
- Blue: Calm, Responsible, Sadness
- Purple: Creativity, Royalty, Wealth
- Red: Passion, Love, Anger
- Orange: Energy, Happiness, Vitality
- Yellow: Happiness, Hope, Deceit
- Black: Mystery, Elegance, Evil
- Gray: Moody, Conservative, Formality
- White: Purity, Cleanliness, Virtue
- Brown: Nature, Wholesomeness, Dependability
- Tan or Beige: Conservative, Piety, Dull
- Cream or Ivory: Calm, Elegant, Purity
Cool Colors
Cool colors include Purple, Green and Blue and all combinations of those three. Cool colors are generally used to represent trust, calm, nature and bring feelings of relaxation and professionalism.
Blue (Primary Color)
Blue is the only cool color that is also a primary color. To achieve other “cool colors” requires the mixing of blue with other colors. For instance mixing blue with red will produce purple etc…
Blue is a widely excepted color in design and can have extensive meanings depending on the exact shade and hue that is used. Lighter blues can be refreshing and young while darker blues can be stronger and bring a sense of trust. Blue almost always has a feeling of trust, calm and responsibility associated with it. Blue is a great color to add to a deserving design and comes with less cultural Faux Pas than other colors… so blue it up!
Meaning List
- calmness
- trust
- responsibility
- friendly
- peace
- reliable
- relaxation
- strength
Green (Secondary Color)
Green is a very stable color. What I mean by that is while green has been used in certain ways it can be flexed to accommodate meanings quite a bit in design. It is a very relatable color and can represent nature, renewal and plenty (which is why it may be used often to represent finances, not because U.S. Money is green) Brighter Greens and greens leaning towards the blue side can be more playful and young, while deeper, warmer greens like olive can be used to represent the natural world more (organic food have latched onto this and ran with it like whoa!).
Meaning List
- energy
- wealth
- stability
- renewal
- nature
- growth
- abundance
- newness
Purple (Secondary Color)
Purple is an interesting color, one that is often mis or under used and for good reason. It has a more ambiguous past and story than other colors and occurs less in nature. It has often been used to signify royalty and nobility in many cultures due to it being a combination of Red(power) and Blue(strength). Purple has also been used to represent ambition, creativity, imagination, wealth, femininity & romance. Lighter hues can represent youth and adventure while darker hues can represent wealth and luxury.
Advice: Be careful when using purple that you do not overuse it, and that you are very careful when paring it with other colors (golden yellow, calm blues, and vibrant teals are fun just to name a few).
Meaning List
- royalty
- imagination
- ambition
- devotion
- peace
- mystery
- creativity
- wealth
- femininity
- romance
- luxury
- adventure
Warm Colors
Warm colors include red, orange and yellow and all combinations of those three. Warm colors are generally used to represent passion, energy, happiness, aggression and power.
Red (Primary Color)
Red is an amazing color but use it with care. It can be powerful but also overwhelming if used in it’s purest form or too much. It is associated with fire, violence, passion, love and war and has been proven to have a physiological effect on people, raising there hear rate and metabolism. Brighter shades are more energetic and passionate, while darker shades imply more power and elegance.
Meaning List
- violence
- passion
- love
- celebration
- danger
- importance
- power
Orange (Secondary Color)
Orange is a young, energetic and vibrant color that demands attention when placed into a design but is not as overpowering as red. Less vibrant shades of Orange can be associated with the earth and the seasons and therefore can represent the passing of time, change, movement or cause. Due to the fruit associated with it by the same name it can represent health, vitality and youth.
Meaning List
- energy
- youth
- nature
- seasons
- earth
- time
- change
- movement
- health
- vitality
Yellow (Primary Color)
Yellow is another warm color and is often seen as the brightest and most energizing of them all. Due to it’s association with the sun it can produce feelings of happiness, hope, and cheerfulness. It can denotes of the same feelings of orange(young, change, health) and red(passion, celebration) although not as strong.
In your designs yellow can lend an uplifting and energetic hand to defining the designs purpose. Softer yellows are commonly used for families and small children bringing a feeling of calm happiness, while dark yellows bring a sense of history and lineage. Yellow makes a great accent color but beware of contrast issues when using it it large amounts.
Meaning List
- energy
- joy
- cheerfulness
- hope
- happiness
- family
- calm
- history
Neutrals
I won’t spend a lot of time going into neutrals but I will say that they are important and serve as the stability in any design. Colors should always be paired with a neutral color to help the accent colors stand out in the ways you want them to. A good rule to remember is
If everything is colorful, than nothing is colorful
The meanings and values of neutral colors are a lot like chicken, they tend to take on the flavor from their surroundings more than they do independently. Lighter neutrals like White, Ivory and Tan tend to simplify and promote cleanliness in your design while allowing colors to stand out. Darker neutrals like Black, Brown and Gray are commonly used to bring character to your designs like earthy-ness, edgy-ness, or Sophistication.
Whew that was a lot!
Thanks for sticking it out, I know that information can be a lot to grock when it is all dumped out on you at once, but color theory is so much more about feeling than information. When thinking about color and what colors to use in your next design think more about what you want people to feel and less about what you know. If you need quick reference please see the quick chart above and happy designing to you all.
Other Resources
Color — Wikipedia
Basics Behind Color Theory for Web Designer — Hongkiat
Tiger — Color Theory
How to master color theory | Creative Bloq
