Farver

Triadic colors and split-complementary palettes, explained

Three evenly spaced colours can make a palette feel bold and balanced at once, or like a children's toy box. The difference is almost entirely about which colour leads.

GradientlyVerificeret Gradiently-konto··5 min. læsning
Forside: Mint Hearth · GR·WG46·J5

Denne guide findes ikke på dit sprog endnu, så her er den på engelsk.

Kort fortalt

  • Triadic colors are three hues spaced evenly around the colour wheel, a third of the circle apart, such as red, yellow and blue on the painter's wheel.
  • A triadic palette works when one colour dominates, a second supports and the third is used as a small accent.
  • Muting two of the three colours is the fastest way to make a triadic palette look grown-up.
  • A split-complementary palette uses one hue plus the two hues either side of its opposite, which gives strong contrast with less tension.
  • Triadic colours are usually better used as separate areas than blended together in a single gradient.
På denne side

Triadic colors are three hues spaced evenly around the colour wheel, each a third of the circle from the others. On the painter's wheel, red, yellow and blue form a triad, as do orange, green and violet. Because the three are equally far apart, none overpowers the others by position alone, which makes triadic palettes feel vivid and balanced. It also makes them easy to overdo.

This guide covers triads, the rule that keeps them from looking like a toy box, and the split-complementary scheme, a close relative that is easier to control. The colour wheel guide explains the two kinds of wheel referred to below.

Triadic colour schemes on the wheel

TriadWheelCharacter
Red, yellow, bluePainter's (primaries)Bold, graphic, familiar
Orange, green, violetPainter's (secondaries)Earthy, unusual, rich
Red-orange, yellow-green, blue-violetPainter's (tertiaries)Modern, less expected
Red, green, blueScreen (RGB)Technical, loud at full strength
Cyan, magenta, yellowScreen (RGB)Print-like, playful
Common triads. Rotate the triangle anywhere on the wheel for more.
The primary triad and the secondary triad, each deepened from full saturation so they sit together more easily.

The dominance rule: one colour leads

Three bright colours in equal amounts compete for attention and read as childish. The fix is to rank them. One colour covers most of the design, a second supports, and the third appears only where you want the eye to land. A 60, 30 and 10 split is a good starting point, as in the 60-30-10 rule.

The same kind of triad in different proportions. Ranking the colours turns noise into a palette.

Which colour should lead? Usually the darkest or least saturated, because large areas of a bright colour are tiring. Keep the brightest for the accent. If your brand colour is part of the triad, it is often the obvious lead.

Muting a triad

The second tool is saturation. Keep one colour strong and pull the other two towards grey, darker or lighter. The triad's structure survives, so the palette still feels balanced, but it loses the primary-school brightness. Many editorial and heritage palettes are triads in disguise: navy, ochre and brick, or olive, plum and rust.

A muted primary triad with a warm neutral. It reads as editorial rather than playful.

Where triadic palettes work

Triads suit brands and projects that want to feel energetic, inclusive or playful without looking random: children's education, games, festivals, food and community projects. They are also useful for systems that need three clearly separate categories, such as three product lines, three course levels or three kinds of event, because each colour is as far as possible from the other two.

  • Three categories: give each its own colour of the triad and keep layouts identical, so colour does the sorting.
  • One brand, one lead: use the lead colour everywhere and bring in the other two for illustration, charts and highlights.
  • Posters and packaging: a muted triad on a warm neutral gives a printed, mid-century feel. Plan the colours for ink; see printing gradients.
  • Interfaces: keep the triad for status and illustration and let neutrals carry the screens, or every page will feel loud.

Split-complementary colours

A split-complementary scheme starts with one hue and, instead of its direct opposite, uses the two hues either side of that opposite. You keep most of the contrast of a complementary pair but lose the head-on clash, and you gain a third colour to work with. It is one of the most forgiving schemes for beginners.

Violet's opposite on the painter's wheel is yellow. The split uses the colours either side of it, lime and amber.
  • Base colour: the lead, used for most of the design.
  • First split colour: support, in smaller areas or a quieter version.
  • Second split colour: the accent, used sparingly.
  • Neutral: a near-white or near-black to hold it together.

Triadic colours in gradients

Blending all three colours of a triad in one gradient forces the blend through every hue between them, and at least one transition usually goes dull. Triads work better as separate areas, or as a two-colour gradient with the third colour kept as an accent.

Two triad colours blend; the third stands apart. The yellow-to-blue half of the first example shows why.

Triadic palette mistakes

Avoid

  • Three saturated colours in equal amounts
  • Text set in the accent colour
  • All three blended in one gradient
  • No neutral to rest the eye

Do

  • One lead, one support, one accent
  • Text in a neutral with strong contrast
  • Separate areas, or two blended plus an accent
  • A near-white or near-black alongside

If a triad still feels too loud, step down to an analogous palette, where the colours are neighbours instead of opposites.

Spørgsmål, folk stiller

What are triadic colors?

Triadic colors are three hues evenly spaced around the colour wheel, each a third of the circle apart, such as red, yellow and blue on the painter's wheel.

How do you use a triadic colour scheme?

Let one colour dominate, a second support and the third act as a small accent. Muting two of the three makes the palette easier to live with.

What is a split-complementary colour scheme?

A base hue plus the two hues on either side of its complement. It keeps strong contrast with less tension than a direct complementary pair.

What is the difference between triadic and complementary colours?

Complementary uses two opposite hues; triadic uses three hues spaced evenly around the wheel. Triads are more varied and usually a little less tense.

Del denne guide

Skrevet af GradientlyVerificeret Gradiently-konto

Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.

Se vores profil