Applying color in your design: Basic Color Theory

Wakana Sakai
4 min readNov 24, 2023

Overview

Color is a designer’s powerhouse, influencing emotions, communicating messages, and building brand identity. It guides attention, considers cultural context, enhances aesthetics, and ensures inclusivity for all users. In essence, it’s a fundamental tool that shapes how people perceive and interact with designs.

cover image of color wheel

Psychological Effects of Color

Color psychology is related to how colors impact emotions and behaviors. It explores the links between colors and feelings, influenced by childhood memories, cultural associations, and personal preferences. Consider color psychology when choosing the colors for your project.

Let’s describe these colors instead of interpreting them:

Several colors’ boxes
common interpretation of each color

This is just an example of a common interpretation, it may be different from your imagination or maybe the same.

Color association refers to how various colors trigger specific images, concepts, or connections in our minds.

For example:

  • Red: Passion, activity, excitement, fire, flames, heat, etc.
  • Yellow: Happiness, energy, optimism, sunshine, energy, etc.
  • Blue: Calmness, freshness, cleanliness, ocean, sky, coolness, etc.
  • Green: Relaxation, trust, safety, nature, trees, forests, etc.

In this way, colors have the effect of giving various impressions.

Types of color harmonies

During the project, designers often create a color scheme which is a set of colors that will work well together to fit the concept.

To select effective colors, start with color harmony basics. Utilize the color wheel or our color calculator to discover harmonious combinations. These color harmonies derive from geometric relationships on the color wheel, represented as shapes. Rotate these shapes around the wheel’s central point for an unlimited array of color combinations.

Monochromatic

Monochromatic is a color scheme based on variations of a single hue. This scheme applies using different saturations and values of the same base color, resulting in emphasizing the intention.

Shake’s website as an example of Monochromatic
Shake

Complementary

Complementary is a color scheme based on hues that are opposite each other on the color wheel. This scheme creates a high contrast when used together, making each other appear more vibrant and intense.

For example:

  • Red and Green
  • Blue and Orange
  • Yellow and Purple
FANTA’s website as an example of Complementary
FANTA by The Coca-Cola Company

Analogous

Analogous is a color scheme of hues that are next to each other on the color wheel. This scheme shares similar undertones and usually blends well together, creating a harmonious and unified look for more harmony and less contrast.

For example:

  • Red and Purple
  • Orange and Yellow
  • Blue and Green
FreeAgent’s website as an example of Analogous
FreeAgent

Analogous + Accent

An analogous color scheme with an accent color is to combine neighboring colors from the wheel (analogous) with a contrasting accent color from elsewhere. This accent color provides a visual contrast to the analogous scheme, adding interest and highlighting specific elements in a design.

For example:

  • Blue and Green + Red (Accent)
  • Purple and Magenta + Yellow (Accent)
  • Orange and Yellow + Blue (Accent)
A Short Journey’s website as an example of Analogous + Accent
A Short Journey

Triadic

Tradic is a color scheme based on three hues that are evenly spaced around the color wheel. If it connects the selected color on the wheel with a line, it forms an equilateral triangle. This color scheme creates a strong visual contrast while maintaining balance is energetic, and dynamic.

For example:

  • Red, Blue, and Yello
  • Orange, Green, and Purple
Semrush’s website as an example of Triadic
Semrush

Split complementary

Split complementary is a color scheme based on variations of the complementary color scheme. Split complementary colors use two neighboring hues alongside a base color, offering a contrast with less tension than strict complements.

For example:

  • Base Color: Red + Split Complements: Yellow-Green and Blue-Green
  • Base Color: Orange + Split Complements: Green-Blue and Purple-Blue
  • Base Color: Yellow + Split Complements: Pink-Violet and Blue-Violet
WACOAL’s website as an example of Triadic
WACOAL

Conclusion

In summary, color is a design cornerstone, influencing emotions, conveying messages, and establishing brand identity. It directs focus, respects cultural nuances, elevates aesthetics, and prioritizes inclusivity. Therefore applying color to their designs is an extremely crucial process for designers.

Thank you for reading the article! Enjoyed this content? Stay updated by following me for more insightful posts!

--

--

Wakana Sakai

A UX designer for 4+ years with a background in Web design. As an instructor, I teach UX/UI in a Canadian college and a Japanese design school. 🏠 designwkn.com