Analogous vs Complementary vs Triadic vs Monochromatic Colours

The short answer

The four classic colour schemes differ in how far apart the colours sit on the colour wheel. Monochromatic uses one hue in lighter and darker shades. Analogous uses neighbouring hues, which feels calm. Complementary pairs a hue with its opposite (180° away), which creates the strongest contrast. Triadic uses three hues spaced 120° apart, which is lively but harder to balance. The free Color Palette Generator builds each of these from any base colour you pick and gives you the hex and RGB codes.

How the colour wheel numbers work

Each colour can be described by hue (its position on a 360° wheel), saturation (how vivid it is) and lightness. Red sits at about 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240° and magenta at 300°.

Colour schemes are just rules for picking hues. For the examples below, the base colour is the generator's default blue, #4f6ef7, which works out to a hue of about 229°, saturation 91% and lightness 64%.

The four schemes compared

Scheme	Hues used	Feel	Difficulty
Monochromatic	One hue, different lightness	Clean, calm, professional	Easiest
Analogous	Neighbours within about 30° to 60°	Harmonious, natural	Easy
Complementary	Base plus the hue 180° away	High contrast, energetic	Medium
Triadic	Three hues 120° apart	Vibrant, playful	Hardest

Monochromatic

One hue, varied in lightness. From #4f6ef7 the generator produces:

#ced7fd, #99abfa, #4f6ef7, #0b35ef, #0825a6

These are the base colour plus two lighter and two darker versions (lightness raised by 15 and 30 points, then lowered by 15 and 30). Monochromatic palettes are hard to get wrong and suit dashboards, documentation and corporate sites. The risk is dullness, which you can fix by adding one neutral grey or one accent colour.

Analogous

Hues next to each other on the wheel. The generator steps 15° and 30° either side of the base:

#50c2f7 (199°), #5098f7 (214°), #4f6ef7 (229°), #5b50f7 (244°), #8550f7 (259°)

This runs from sky blue to violet. Analogous schemes look natural because they appear in nature (sunsets, forests, the sea). Because all the colours have similar strength, pick one to dominate and use the others for supporting elements, or the design will feel flat.

Complementary

A hue and its opposite. The opposite of 229° blue is about 49°, a warm yellow (#f7d850). Complementary pairs give the strongest contrast, which is why they work for call-to-action buttons, sale badges and sports branding.

The generator's Complementary option gives five colours: #4f6ef7, #8550f7, #d850f7, #f7d850, #c2f750. That is the base, two hues stepped 30° and 60° from it, the true complement at +180°, and one more at +210°. Treat the base and #f7d850 as the main pair and the others as optional supporting colours.

Use the complement sparingly. A layout that is half blue and half yellow is tiring to look at; a mostly blue layout with a yellow button draws the eye exactly where you want it.

Triadic

Three hues evenly spaced, 120° apart. From 229° the triad is 229°, 349° and 109°: blue, a pinkish red and green.

The generator's Triadic option returns five colours: #4f6ef7, #d850f7, #f7506e, #f7d850, #6ef750. Its hues are the base plus 60°, 120°, 180° and 240°, so the strict triad is the first, third and fifth swatch: #4f6ef7, #f7506e and #6ef750. The second and fourth swatches sit between them and are extras you can use or drop.

Triadic schemes are common in children's products, games and illustrations. To keep them under control, let one colour dominate, use the second for accents, and use the third very sparingly, often in a muted or lighter form.

How to build a scheme with the generator

Open the Color Palette Generator.

Click the Base color box and choose your starting colour, often your logo or brand colour.

Click Analogous, Complementary, Triadic or Monochromatic. The five swatches update instantly. If you change the base colour later, the current scheme is rebuilt from the new colour.

Read the hex code and RGB value under each swatch. Click a swatch to copy its hex code, or click Copy all HEX codes to copy all five, separated by commas.

Random (and the ↻ Random button) ignores your base colour and creates five random colours. Use it for inspiration, not for a scheme built on your brand.

The generator keeps the same saturation and lightness as your base colour for every hue it rotates (only Monochromatic changes lightness). So if you start with a very pale base, every colour in the scheme will be pale too.

Turning a scheme into a real palette

A colour scheme is not yet a usable website or slide palette. You also need neutral colours for text and backgrounds. A practical recipe:

• Background: white, off-white or a very light tint of your base.
• Text: near-black or dark grey, not pure colour.
• Primary: your base colour for headings, links and main buttons.
• Accent: one colour from the scheme (the complement works well) for highlights.

Then decide how much of each to use. The 60-30-10 colour rule is a simple way to set proportions so one colour leads and the others support it.

Common mistakes

• Using all five colours equally. Choose one dominant colour and keep the others small.
• Putting text on a saturated colour. Yellow text on blue, or blue text on red, is hard to read. Keep body text dark on light.
• Ignoring colour blindness. Red and green together can be hard to tell apart for many people. Do not rely on colour alone to show meaning; add icons or labels.
• Forgetting dark mode. Bright, saturated colours that look fine on white can glow on a dark background. Test both.

Which scheme should you pick?

• Professional, minimal or text-heavy: monochromatic or analogous.
• Need one element to stand out: complementary, used as a small accent.
• Playful and colourful: triadic, with one colour in charge.

For more on picking brand colours, read the colour palette generator guide. To grab an exact colour from a screenshot or logo first, use the colour picker.