Color Guide

What Is Color Harmony?

Color harmony describes relationships between colors that can help a palette feel visually organized and intentional. Many of these relationships are based on positions on a color wheel.

Monochromatic, analogous, complementary, and split complementary relationships are useful starting points. They do not guarantee good design: proportion, saturation, lightness, contrast, context, and accessibility all affect the result.

Understanding the Color Wheel

A color wheel arranges hues around a circle so you can see which color families are nearby or opposite. This guide uses a digital HSL hue wheel for web colors. Traditional artist color wheels use different models and do not necessarily place the same colors opposite each other.

Clockwise from the top: 0° Red → 30° Orange → 60° Yellow → 120° Green → 180° Cyan → 240° Blue → 300° Magenta → 360° Red. The circle returns to red at 360°.

The angle describes hue, rather than how light, dark, or saturated a color is. Learn how hue works in HSL →

Common Types of Color Harmony

These examples illustrate hue relationships, rather than fixed recipes for every design. The visible HSL values identify each sample without relying on color alone.

Monochromatic Color Harmony

One hue, several variations

Darkhsl(220 60% 20%)

Basehsl(220 60% 50%)

Lighthsl(220 60% 85%)

Mutedhsl(220 25% 50%)

Vivid variationhsl(220 90% 55%)

Definition: Variations centered around a single hue. How it works: Keep the hue at 220° here and change saturation and lightness. Real designs may also use very close hue variations.

Typical characteristics: Visual consistency, simple hierarchy, and a cohesive appearance. Things to consider: Similar colors can lack contrast; check text and background combinations separately.

Analogous Color Harmony

Neighboring hues: blue → blue-green → green

Blue side · 210°hsl(210 60% 40%)

Blue-green · 190°hsl(190 60% 45%)

Base · 170°hsl(170 60% 40%)

Green side · 150°hsl(150 50% 55%)

Green · 130°hsl(130 40% 80%)

Definition: Hues located near one another on a color wheel. How it works: Choose a base hue and neighboring color families; there is no universal angle spacing for analogous palettes.

Typical characteristics: Related hue families, smooth visual transitions, and cohesion. Things to consider: Colors that are too similar may weaken hierarchy or contrast. Vary lightness and assign clear roles.

Complementary Color Harmony

Blue at 210° ↔ orange at 30°: a 180° relationship

Dominant bluehsl(210 70% 45%)

Supporting bluehsl(210 45% 88%)

Dark bluehsl(210 60% 20%)

Orange complement / accenthsl(30 80% 55%)

Neutralhsl(0 0% 96%)

Definition: Hues opposite each other on a color wheel. How it works: In this simple digital model, think of hues roughly 180° apart, such as blue at 210° and orange at 30°, or red and cyan. The particular colors depend on the color system and context.

Typical characteristics: A noticeable difference between hue families, with room for dominant, supporting, accent, and neutral roles. Things to consider: Large, equal areas of highly saturated complements can feel intense or visually unsettled. Adjust proportion, saturation, lightness, and neutral space; opposite hues do not guarantee readable text.

Split Complementary Color Harmony

Base 210° + two hues near its 30° complement

Base blue · 210°hsl(210 65% 45%)

Complement side · 10°hsl(10 70% 55%)

Complement side · 50°hsl(50 75% 55%)

Supporting bluehsl(210 40% 90%)

Dark basehsl(210 50% 20%)

Definition: A base hue plus two hues near its complement. How it works: Replace the direct complement with a hue on each side of it. Here, blue at 210° is paired with 10° and 50°, either side of orange at 30°.

Typical characteristics: More hue variety than a two-family complementary approach while retaining a contrasting hue relationship. Things to consider: Decide which color leads and which supports it, so the accents do not compete. These angles are examples, not a required formula.

Color Harmony Is a Starting Point

A color-wheel relationship helps you choose hues, but it does not decide how much of each color to use, how light or saturated it should be, or which color should dominate. It also does not determine text contrast or whether the palette fits your design context.

Turn the relationship into a palette by choosing concrete values and roles, then test those choices in the actual design.

Hue Is Only Part of a Color Palette

Both palettes below use blue at 210° and orange at 30°, with the same hue in each corresponding position. Only saturation and lightness change: a harmony relationship is not an exact palette.

Bright Complementary

Bluehsl(210 90% 45%)

Light bluehsl(210 85% 75%)

Dark bluehsl(210 90% 25%)

Orangehsl(30 95% 50%)

Light orangehsl(30 90% 75%)

Muted Complementary

Bluehsl(210 30% 65%)

Light bluehsl(210 25% 88%)

Dark bluehsl(210 25% 45%)

Orangehsl(30 35% 70%)

Light orangehsl(30 30% 90%)

Color Proportion Changes the Result

The same blue, orange, and neutral can feel different when their roles and proportions change. Compare the dominant hue in these examples:

Blue dominant / Orange accent

70% dominant #2473C2 · 20% neutral #E6E6E6 · 10% accent #E68019

Orange dominant / Blue accent

70% dominant #E68019 · 20% neutral #E6E6E6 · 10% accent #2473C2

These percentages are educational examples, not a universal rule. Adjust the proportions to the content and surfaces in your design.

Using Color Harmony in a Design

Try this beginner workflow and revisit earlier choices whenever the design needs it:

Choose a starting hue.
Select a harmony relationship.
Adjust saturation and lightness.
Decide color roles.
Set proportions.
Test the palette in context.
Check accessibility.

For example, begin with blue and an orange complementary family, then turn that relationship into a set of practical roles:

A complementary palette with design roles

Dark blue · text#17324D

Blue · dominant header#245C94

Light blue · supporting surface#E7F1FA

Soft neutral · background#F7F5F0

Orange · accent#F0A14A

Project notes Blue header

A place for your next idea

Dark blue text on a light blue card, surrounded by a soft neutral background.

Orange accent

Static UI illustration: header, card, text, background, and button-like accent use the labeled palette above. The accent is an example surface, not an interactive control. Evaluate the actual text/background pairs when applying these roles.

Color Harmony and Accessibility

Harmonious colors are not automatically accessible colors. Complementary hues do not automatically have enough text contrast. Analogous palettes can have sufficient or insufficient contrast depending on the actual values and foreground/background pair.

Check each foreground/background combination separately, including text size and any transparency. For status, errors, success messages, and chart categories, combine color with text, icons, or shapes so important information does not depend on distinguishing hues.

Explore Color Harmony on Paletile

Explore palettes on Paletile and look for the hue relationships introduced here. The public Explore area lets you browse by color and mood; it does not currently offer a harmony filter. Compare the actual colors, proportions, and possible roles rather than judging a palette from its harmony name alone.

Explore Color Palettes →

Frequently Asked Questions

What is color harmony?

Color harmony describes relationships between colors that can help organize a palette visually.

What are the main types of color harmony?

Common approaches include monochromatic, analogous, complementary, and split complementary color relationships.

What are complementary colors?

They are colors positioned opposite each other on a color wheel. The exact pair depends on the wheel or color model.

What are analogous colors?

They are colors located near one another on a color wheel.

What is a monochromatic palette?

It uses variations around a single hue, often changing saturation and lightness.

What is split complementary harmony?

It combines a base hue with two hues located near the base color’s complement, one on each side.

Does color harmony guarantee a good palette?

No. Harmony is a useful starting relationship, but proportion, contrast, saturation, lightness, context, and accessibility also affect the result.

Are complementary colors always accessible?

No. Color-wheel relationships do not determine text/background contrast. Check the actual foreground and background values separately.

How do I choose a color harmony?

Start with the purpose of the design and a base color, then experiment with harmony relationships and adjust the result in context.