Macademics: Color Theory

Updated: Oct 3, 2019

Hi Everyone! We're back with a new installment of Macademics. If you're new to our blog, Macademics is a series that we started to highlight different topics within our fields. This week, I am going to be writing about color theory. Hope you enjoy!

Color Theory is used to explain how humans perceive color and the visual effects of how color is when it is mixed, contrasted, or compliments each other. It combines the use of both science and for technologists it's really important to understand in order to try and produce the best product that is appealing to their users. Here are some terminologies to use when understanding how color can interact with one another and what different colors tend to represent.

Color Basics

Primary colors are red, blue, and yellow these colors are considered primary colors because you use these colors to mix secondary colors which are green, orange, and purple.

Given a single color you have different shades, tones, and tints to create a variety of hues. Shades are when you add more black to a color, tones are when you add more grey to a color and tints are when you add more white to a color.

blue shades, tones, and tints.

Color Schemes

When trying to create your color palette there's a variety of different ways you can go to build it. Here are some common color schemes:

Complimentary color schemes are two colors directly opposite of each other.

Monochromatic color schemes are when you use the same color and use different shades, tints and tones.

Analogous color schemes are when you use colors that are directly next to each other.

There isn't a right or wrong answer to which color scheme framework to use but whichever you do decide to pick does have an effect on how people will perceive your brand.

Color Psychology

Colors have meaning and they can be used to influence a user whether or not they want to make a decision on your application. Here are some of the word associations to different colors:

Red: excitement, strength, love, energy, danger, fire, war.

Orange: confidence, success, bravery, sociability, enthusiasm, attraction

Yellow: creativity, happiness, warmth, cheer, sunshine, joy

Green: nature, healing, freshness, quality, growth, fertility, and harmony

Blue: trust, peace, loyalty, competence, faith, stability, and wisdom

Pink: compassion, sincerity, sophistication

Purple: royalty, luxury, spirituality, ambition, creativity, and mystery

Brown: dependable, rugged, trustworthy, simple

Black: formality, dramatic, sophistication, security, power, death, and mystery

White: clean, simplicity, innocence, honest, pure, goodness.


You shouldn't pick colors solely based on aesthetics, you should also pick colors based on what's accessible to all demographics of people so that everyone can perceive and understand your designs. One of the most common visual impairments is color blindness. The most common types of color blindness are red-green color blindness, blue-yellow color blindness, and complete color blindness. In order to make sure your designs/work is accessible to everyone you can use:

  • Color Blind Webpage Filter: Allows you to view a live url and see what it looks like for someone of varying color blindness

  • Color Safe Co: Allows you to see what background is the most accessible against a specific color of text.

Accessibility should be a priority and not an afterthought. It's important to make sure all your work is inclusive.

I hope this post helps you pick colors for your next project. As you look at different sites, pay attention to what emotions or feelings come from interacting to that site. They are doing it on purpose.


Recent Posts

See All