Color Theory

Fundamentals of color theory for designers and developers

What is Color Theory?

Color theory is the study of how colors work together and how they affect our emotions and perceptions. It provides a framework for creating harmonious color combinations and understanding the relationships between colors on the color wheel.

Primary Colors

Primary colors are the foundation of all other colors. They cannot be created by mixing other colors together. There are two primary color systems:

Additive Primaries (Light / RGB)

In digital screens, we use additive color mixing where light of different wavelengths combines. The primaries are Red, Green, and Blue. When all three are combined at full intensity, they produce white light.

Red#ff0000
Green#00ff00
Blue#0000ff

Subtractive Primaries (Paint / CMY)

In printing and painting, we use subtractive color mixing where pigments absorb light. The primaries are Cyan, Magenta, and Yellow. Combining all three produces black (or a very dark brown in practice, hence the addition of black K in CMYK printing).

Cyan#00ffff
Magenta#ff00ff
Yellow#ffff00

Secondary Colors

Secondary colors are created by mixing two primary colors in equal amounts. In the RGB model:

CyanGreen + Blue
MagentaRed + Blue
YellowRed + Green

Tertiary Colors

Tertiary colors are made by mixing a primary color with an adjacent secondary color, producing six intermediate hues:

Orange30°
Chartreuse90°
Spring Green150°
Azure210°
Violet270°
Rose330°

Color Temperature

Colors are broadly classified as warm or cool. This distinction affects the mood and energy that colors convey.

Reds, oranges, and yellows evoke warmth, energy, excitement, and passion. They tend to advance visually, making elements feel closer.

Blues, greens, and purples evoke calmness, serenity, and professionalism. They tend to recede visually, making elements feel farther away.

Color Harmony

Color harmony refers to combinations that are visually pleasing. These relationships are based on the positions of colors on the color wheel.

Complementary Colors

Two colors opposite each other on the color wheel (180° apart). High contrast, high energy.

#3b82f6
#f6af3b

Analogous Colors

Three colors side by side on the color wheel (±30°). Harmonious and calming.

#3bdff6
#3b82f6
#513bf6

Triadic Colors

Three colors equally spaced on the color wheel (120° apart). Vibrant and balanced.

#3b82f6
#f63b82
#82f63b

Contrast & Readability

The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios for text readability. Use the tool below to check whether your color combination meets these standards.

Large Text Preview (24px)

Normal text at 16px — check that this is readable.

14.63
Ratio
AA Normal
AAA Normal
AA Large
📏
WCAG Levels: AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA requires 7:1 for normal text.