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.
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).
Secondary Colors
Secondary colors are created by mixing two primary colors in equal amounts. In the RGB model:
Tertiary Colors
Tertiary colors are made by mixing a primary color with an adjacent secondary color, producing six intermediate hues:
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.
Analogous Colors
Three colors side by side on the color wheel (±30°). Harmonious and calming.
Triadic Colors
Three colors equally spaced on the color wheel (120° apart). Vibrant and balanced.
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.