Analogous colors

Analogous colors are three to five hues that sit next to each other on the color wheel, such as yellow, yellow-orange and orange, used together as one color scheme. In color theory they form the most cohesive and low-tension harmony, because neighboring hues share a common parent color and differ only by small steps of hue angle.

In design, an analogous scheme usually assigns one dominant hue, one or two supporting hues and an accent, then builds contrast through lightness and saturation rather than through opposing hues. The result feels natural and unified, which is why such palettes are common in nature imagery, editorial layouts, brand systems and interface themes.

How analogous colors are selected on the wheel

An analogous scheme is defined by a narrow arc of hue angle. On a 12-part artist wheel, the classic set is three adjacent segments, covering about 60 to 90 degrees. On a continuous digital wheel, such as the hue channel in HSL, designers typically choose hues 15 to 30 degrees apart and keep the whole arc below roughly 90 degrees.

The member colors share a common component. Yellow-green, green and blue-green all contain green; red, red-orange and orange all contain red. This shared parent hue is what makes the group read as a family, and it is the main reason the eye perceives the combination as harmonious rather than busy.

The following table shows how the width of the arc changes the character of a scheme.

Building contrast inside an analogous palette

Because neighboring hues differ little, hue alone cannot create hierarchy. Designers therefore separate the roles of the colors through lightness, saturation and proportion. A widely used starting point is the 60-30-10 proportion: about 60 percent dominant hue, 30 percent supporting hue and 10 percent accent.

The roles below describe how a working analogous palette is usually organized.

A common refinement is to vary lightness in steps, for example a dark blue-green for text, a mid green for surfaces and a light yellow-green for highlights. Without such steps, an analogous palette tends to look flat and muddy, especially when all three hues share the same saturation and value.

Analogous colors compared with other harmonies

Analogous colors occupy the calm end of the color harmony spectrum. They contain more variety than a monochromatic color scheme, which uses a single hue, and far less tension than complementary colors, which sit 180 degrees apart. Triadic colors spread three hues evenly at 120-degree intervals and are therefore much more vivid.

A frequent hybrid is the analogous scheme with a complementary accent: the palette stays analogous for 90 percent of the area, and a small element in the opposite hue provides a single focal point. This keeps the calm character while solving the analogous scheme’s weakest point, which is lack of emphasis.

Warm, cool and mixed analogous sets

The position of the arc on the wheel determines the temperature of the palette. An arc between red and yellow produces a warm analogous set associated with energy, food and autumn. An arc between green and blue-violet yields a cool analogous set associated with trust, water and technology. An arc that straddles yellow-green or red-violet mixes temperatures and needs more careful balancing.

• Warm sets advance visually and feel close, so they suit headlines and promotional surfaces.
• Cool sets recede visually and feel spacious, so they suit dashboards and long reading.
• Mixed sets can feel fresh but risk an unintended temperature clash between foreground and background.

Applying analogous colors in digital and print work

In digital design, analogous palettes are easiest to build in HSL or a perceptual space such as OKLCH, where hue is a single numeric angle. Rotating the hue by a fixed step while holding lightness and chroma constant gives a predictable set. In plain RGB or hex color codes, the relationship between hues is hidden, so designers usually derive values from a color wheel tool and then store them as tokens.

In print, the same scheme must be checked in CMYK or against Pantone references, because saturated greens, oranges and blue-violets often fall outside the printable gamut. Adjacent hues can then collapse into nearly identical printed colors, erasing the subtle steps that define the scheme.

The table below lists frequent problems and their usual fixes.

Accessibility deserves special attention. Because neighboring hues often have similar luminance, text placed on an analogous background can fail the WCAG contrast thresholds of 4.5:1 for body text. Hue difference does not help readers with color vision deficiency, so legibility must always come from lightness contrast, never from hue alone.

The short version

Analogous colors are colors that are neighbors on the color wheel, like yellow, orange and red-orange, or green, teal and blue. Because they are related, they look good together almost automatically.

Think of a forest in summer or a sunset: the colors change gradually, without sharp jumps. An analogous palette copies that effect. The key is to let one color lead, use the others as helpers, and make some shades lighter and some darker so the design still has clear focus and readable text.

Where it makes a difference

A design team is creating the visual identity for a regional hiking app. They choose a cool analogous palette built around green at about 140 degrees in HSL, a blue-green at 165 degrees and a yellow-green at 95 degrees. Green dominates the map backgrounds and navigation, blue-green marks water features and secondary panels, and yellow-green highlights trail difficulty badges.

Early prototypes look pleasant but the primary button disappears into the map. The team keeps the analogous base and adds a small orange accent for the main action and safety alerts, and darkens body text to a deep blue-green that passes 4.5:1 contrast. The final app feels calm and outdoorsy while every important action remains immediately visible.