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.
How to Use Color Theory?
- 1Choose a base color using the interactive picker or enter HEX, RGB, HSL values.
- 2Generate matching color palettes, schemes, or color space transformations instantly.
- 3Click on any color code block in the results to copy it instantly to your clipboard.
Designer Friendly
Easily match colors, check contrast ratios, and generate custom palettes for your designs.
Multi-Format Support
Supports copy-paste in HEX, RGB, RGBA, HSL, HSLA, and CSS variables formats.
Runs Locally
No internet connection required. Our color engines run instantly and cleanly inside your web browser.