Color Theory Basics: How to Choose Colors That Work Together
Color theory is the set of rules and relationships that explains why some color combinations feel balanced and others clash. You use it by picking a base hue on the color wheel, then choosing other colors according to a harmony rule (complementary, analogous, triadic, or split-complementary), and finally adjusting saturation and value so the result stays readable. This guide covers the mechanics behind each step and a workflow you can apply in any design tool, including Paletton, a color scheme designer built around the color wheel.
The color wheel and its three dimensions
The color wheel arranges hues in a circle so that relationships between colors become visible. Every color you place on it can be described along three dimensions:
- Hue — the position on the wheel (red, orange, yellow, green, blue, violet). This is what people usually mean by "color."
- Saturation — how pure or muted the hue is. A fully saturated red is vivid; desaturating it moves toward gray.
- Value — how light or dark the color is. Adding white raises value (tint); adding black lowers it (shade).
Two colors can share a hue but read completely differently once saturation and value diverge. This is why a palette built only from hue choices often looks flat: the harmony rule sets the relationships, but saturation and value do the work of separating elements.
Primary, secondary, and tertiary colors
In the traditional subtractive model used for mixing pigments:
- Primary colors — red, yellow, blue. They cannot be created by mixing others.
- Secondary colors — orange, green, violet. Each is made by mixing two primaries (red + yellow = orange, yellow + blue = green, blue + red = violet).
- Tertiary colors — the six in-between hues such as red-orange or blue-green, made by mixing a primary with an adjacent secondary.
Note that on-screen color (additive RGB) uses red, green, and blue as primaries, so digital mixing behaves differently from paint. The wheel's relationships still hold; only the mixing mechanics change.
Harmony rules: how to pick colors that work together
A harmony rule is a geometric pattern on the wheel. Pick a base hue, apply the pattern, and you get a set of colors with a built-in relationship.
| Rule | How it works | Best for |
|---|---|---|
| Complementary | Two hues directly opposite each other | High-impact contrast, calls to action |
| Analogous | Two to four hues next to each other | Calm, cohesive, low-tension designs |
| Triadic | Three hues evenly spaced (120° apart) | Lively palettes that still feel balanced |
| Split-complementary | A base hue plus the two hues adjacent to its complement | Strong contrast with less clash than pure complementary |
A practical caution: pure complementary pairs at full saturation vibrate uncomfortably when placed side by side. Softening one color's saturation or shifting value usually fixes this while keeping the contrast.
Warm vs cool: controlling mood
Warm colors (reds, oranges, yellows) tend to advance and feel energetic. Cool colors (blues, greens, violets) tend to recede and feel calm or distant. Mixing warm and cool in one palette creates depth, but the ratio matters — a small warm accent against a cool field draws the eye immediately, which is useful for buttons or highlights.
Contrast and value: keeping text and UI readable
Harmony governs aesthetics; contrast governs usability. For any text or interface element, the deciding factor is usually value difference, not hue difference. Two hues can be complementary and still unreadable if their values are too close.
A workable rule of thumb:
- Body text needs a large value gap between text and background.
- Interactive states (hover, focus, disabled) should be distinguishable by value or saturation shifts, not hue alone, so they remain clear to users with color vision differences.
- Reserve your highest-contrast pairing for the most important element on the screen.
A workflow for turning theory into a real palette
- Choose a base hue that matches the intended mood — warm for energy, cool for calm.
- Apply a harmony rule on the wheel to generate candidate colors. Paletton's color wheel is designed for exactly this: you select a base and it produces combinations that work together.
- Assign roles: pick one dominant color (largest area), one or two supporting colors, and one accent for emphasis.
- Adjust saturation and value so each role is visually distinct, then check text contrast.
- Test in context — place the palette into a real layout, not just swatches, and verify that hierarchy and readability hold.
The theory narrows your options; the workflow confirms them against actual use.