How to Pick Colors That Work Together (Color Theory Basics)

Picking colors that work together means applying a small set of rules about how colors relate to each other on the color wheel. Choose colors that follow one of the established harmony relationships — complementary, analogous, triadic, or split-complementary — and they will look intentional. Pick randomly, and the result will usually feel off even if you cannot immediately say why. This guide walks through exactly how those rules work and how to apply them from scratch.

Why random color picking fails

Our eyes are tuned to detect tension between colors. When two colors have a relationship that does not fit any recognized pattern — neither close enough on the wheel to feel harmonious, nor far enough apart to create satisfying contrast — the brain registers the combination as uncomfortable without identifying the cause. This is why so many amateur designs feel "a bit off" despite using individually attractive colors.

Color theory gives you a shortcut: instead of testing thousands of possible combinations by eye, you work from a small number of relationships that are reliably pleasant, then adjust saturation and lightness to taste. The harmony structure does the heavy lifting; you handle the fine-tuning.

The color wheel and HSL: your two fundamental tools

Every harmony rule is defined in terms of angles on the color wheel, so it helps to understand the two coordinate systems you will use most often.

The traditional artist's color wheel places red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300°, cycling back to red at 360°. Digital tools use HSL (Hue, Saturation, Lightness), which maps almost directly onto that wheel: the hue number is the angle in degrees.

Understanding HSL means you can do color math in your head. Want a lighter version of a button color? Increase lightness. Want a muted background version of your brand color? Drop saturation. Want a dark-mode text color that matches your primary hue? Set lightness to around 85–90% and saturation to 15–20%. The same logic scales to every color decision in a project.

The six main color harmony relationships

A color harmony is a rule about which hues to combine. Each one produces a reliably usable relationship — what differs is the mood and the level of visual tension.

A worked example: building a palette from scratch

Suppose your brand blue is #2563eb, which in HSL is approximately hsl(221, 83%, 53%). Here is how each harmony rule maps out:

The 60-30-10 rule: how much of each color to use

Knowing which colors to combine is only half the problem. The other half is proportion — how much of each color appears in the design. An even split between three equally saturated colors produces visual chaos even when the harmony relationship is correct.

The 60-30-10 rule is the simplest reliable guide:

• 60% — dominant color. Usually a neutral or low-saturation tone (white, off-white, light gray, or a very desaturated tint of your brand hue). This is backgrounds, large surfaces, cards.
• 30% — secondary color. Often your primary brand color or a darker neutral. Navigation, sidebars, section dividers, headlines.
• 10% — accent color. Your most vibrant or contrasting hue. Buttons, links, highlights, badges, icons that need attention.

The rule is a starting proportion, not a rigid law. What it prevents is putting a fully saturated complementary pair at equal weight, which exhausts the eye. The accent color earns its vividness by being rare.

Saturation and lightness: where amateurs stop and professionals continue

Raw color wheel hues at full saturation — think the pure red, blue, and yellow of a kindergarten color chart — clash unless deliberately used for that effect. Professional palettes almost always involve adjustments to saturation and lightness that reduce tension while preserving the harmony relationship.

A few reliable moves:

• Desaturate backgrounds. Use a very low-saturation tint of your primary hue for large background areas. A blue-gray background (hsl(221, 10%, 97%)) reads as "on-brand" without fighting for attention against content.
• Push lightness apart. When two colors need to coexist in adjacent regions, make sure their lightness values differ by at least 40 points. This maintains readability and prevents the colors from muddying each other visually.
• Match saturation level across colors in a palette. A 90%-saturation blue next to a 40%-saturation green looks mismatched even if the hues are theoretically harmonious. Keeping saturation in a similar band unifies the palette.
• Use lightness scales for depth. Generate five to nine lightness steps (10%, 20%, 30% … 90%) for your primary hue. This gives you a consistent language for hover states, disabled states, borders, and subtle fills without introducing new hues.

Contrast and accessibility: the constraint you cannot ignore

Color choices in digital products are not just aesthetic — they affect whether people can read your content. The WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background, measured on a scale where 1:1 is identical colors and 21:1 is black on white.

• 4.5:1 — minimum for normal body text (WCAG AA level)
• 3:1 — minimum for large text (18pt+ or 14pt bold) at AA level
• 7:1 — AAA level, the stricter standard, recommended for body text on public services

The most common mistake is choosing a light brand color — a cheerful medium-saturation blue or teal — and using it as text color on a white background. Many such combinations fail the 4.5:1 threshold. The fix is always to darken the text color (increase contrast) rather than lighten the background further, which typically reduces it.

A practical four-step process for any project

You now have all the concepts. Here is a repeatable workflow that applies them in order:

1. Pick one anchor color. This is usually a brand hue, a color the client specifies, or the dominant color in a photograph or illustration you are designing around. Start with its HSL values.
2. Choose a harmony rule. For a corporate product: analogous or monochromatic. For a consumer app or marketing site: complementary or split-complementary. For an illustration or rich brand identity: triadic or tetradic.
3. Adjust saturation and lightness. Desaturate backgrounds, ensure lightness differences between adjacent colors, and build a scale of tints and shades for your primary hue.
4. Check contrast. Run every text-on-background combination through a contrast ratio check. Fix anything below 4.5:1. Record the passing combinations as your approved text pairings.

That process produces a palette that is harmonious, proportional, and accessible. From there, every color decision in the project has an answer: use what is in the palette. Adding arbitrary new colors mid-project is how palettes lose coherence.

When to break the rules

Color theory rules describe what reliably works, not what is mandatory. Skilled designers break them intentionally for specific effects: a deliberately discordant color combination can signal urgency, humor, or irreverence when the context calls for it. The key word is intentionally — breaking a rule you understand is a design decision; breaking one you did not know existed is an accident. Learn the rules first, then decide which ones to violate and why.

Figro's guides are educational and independent. They are not professional design advice. Some pages include affiliate links; if you purchase through them we may earn a commission at no extra cost to you.