Color Theory

What is Color Theory?

Color theories create a logical structure for color. It describes how color is perceived, as well as how colors mix, match, and contrast with each other. Generally, it involves a color’s darkness or lightness, with different tints and tones created from adding white or gray, respectively.

Color often affects branding, and can increase/decrease sales for businesses, so it’s important to understand basic color theory, as it can boost business engagement immensely.

There are three basic categories of color theory: the color wheel, color harmony, and the context of how colors are used.

Color Wheel

The color wheel is split into three different types: primary, secondary, and tertiary — each one having more colors than the last.

The Colour Wheel - Simple Colour fundamentals - Iconic Creative Blog

The color wheel has two different types of colors: warm and cool colors. Warm colors are generally associated with energy, brightness, and action. Cool colors are generally associated with clam, peace, and serenity.

Hue, Shade, Tint, Tone:

Hue: the pure color itself

Shade: the color with black added to it

Tint: the color with white added to it

Tone: the color with grey added to it

Color Harmony

Color harmony delivers visual interest, aesthetic, and a sense of order. There are a few different formulas for color harmony, but the most popular formulas are:

  • Analogous Colors: Any three colors that are side by side on the color wheel
Yellow-green, yellow, and yellow-orange
  • With analogous colors, you can use the 60-30-10 Color Rule:
  1. 60% of your design is dominated by one color
  2. 30% for the secondary color
  3. 10% for the tertiary/accent colors
  • With more colors, you can use to 60-20-10-10 or 60-15-15-10 Color Rule.

Complementary Colors

  • Any two colors that are directly opposite of each other
EXAMPLES: Red and green, red-purple and yellow-green
  • Other Examples:
  • Website to help you with color harmony:  Paletton

Color Context

Color behavior changes in relation to other colors and shapes.

The same shade of red can show up differently depending on what color backgrounds are there.
  • Red appears brighter against the black background, but duller against the white background. Respectively, red acts the same behind the orange and blue backgrounds.
  • Good Color Combinations: Royal blue & peach, blue & pink, charcoal & yellow, lime green & electric blue, lavender & teal

Color Theory for Websites

  • The 60-30-10 rule should generally be applied for websites:
  • 60% of the website is dominated by one color
  • 30% for the secondary color
  • 10% for accent colors

How to Choose Your Colors

  • What kind of brand/impact would you like to have?
  • Different colors can impact mood/perception (color psychology):
  • Red: generally associated with danger, excitement, and energy (which can often lead to impulsive behavior — good for brands that are selling products)
  • Example: Coke’s red is easily recognizable, deliberately so because red often triggers impulse buys
  • Pink: associated with a feminine energy that is sentimental and romantic or youthful (different shades can also mean different things)
  • Example: Barbie brand uses a light pink to present youth
  • Orange: fresh and full of vitality; creative, adventurous, cost-effective
  • Example: Nickelodeon logo
  • Yellow: optimism, associated with playfulness and happiness
  • Example: McDonalds (paired with red to increase consumer’s appetite)
  • Blue: has a calming effect, and is often used to comfort those in distress
  • Green: has an association with nature, and is often used to demonstrate sustainability
  • Brown: conveys a down-to-earth and honest appeal, often used for organic or wholesome products and services
  • Purple: royalty and majesty; often associated with spirituality and mystery
  • White: pureness, simplicity, innocence, often with a minimalistic feel
  • Black: sophisticated and elegant style, which can be formal and luxurious
  • Multicolored: a united company that is open to all (ie. Instagram)
  • What kind of brand do your competitors have? Why did your competitors choose those colors, and how can you avoid being mistaken for your competitor?
  • Think about your target audience (ie. a company that provides fun products for children will have a completely different site compared to one for a funeral home)
  • You can also use coolors to browse different, popular color palettes