Colour theory basics: combine colours with confidence
You don't need an art degree to build palettes that look deliberate. You need the colour wheel, three dials, and five reliable patterns. Here they are.
The colour wheel is a map, not a rulebook
Every harmony pattern in design traces back to the colour wheel — the familiar circle that runs red, orange, yellow, green, blue, violet and back to red. Its usefulness is simple: distance on the wheel predicts how two colours will feel together. Colours that sit close together share an undertone and read as related; colours that sit far apart create tension and energy. Neither is better — they are different tools. A spa brand wants closeness; a sale banner wants distance.
The three dials: hue, saturation, lightness
Digital colour becomes far easier to reason about when you stop thinking in hex codes and start thinking in HSL — the model designers quietly use even when their files store RGB:
- Hue is the position on the wheel, measured in degrees: 0° is red, 120° is green, 240° is blue. When people say "colour", they usually mean hue.
- Saturation is intensity: 100% is the purest version of a hue, 0% is grey. Dropping saturation is the fastest way to make a loud palette feel expensive.
- Lightness runs from black through the pure hue to white. Most palettes fail not on hue choice but on lightness — everything sits in the same middle band, so nothing has hierarchy.
A practical habit: when a palette feels "off", leave the hues alone and vary the lightness first. Two colours that clash at the same lightness often sit together beautifully once one is clearly darker than the other.
Five harmony patterns that always work
Monochromatic — one hue, several lightness and saturation steps. The safest scheme there is, which is why it dominates fintech and SaaS branding. Its risk is monotony; fix that with one strong accent or generous use of near-black and near-white.
Analogous — two to four neighbouring hues, such as teal, blue and indigo. Nature is full of analogous schemes (forest greens, sunset oranges), which is why they feel organic and calm. Keep one hue clearly dominant and use the neighbours for support, or the palette turns muddy.
Complementary — two hues opposite each other: blue and orange, red and green, violet and yellow. Maximum contrast, maximum energy. The classic mistake is using both at full strength in equal amounts; instead, let one colour dominate and use its complement sparingly, at perhaps a tenth of the visual area, where you need the eye to land.
Split-complementary — take a hue, then use the two colours either side of its complement. You keep most of the contrast of a complementary scheme but the result is softer and easier to balance — a good default for beginners who want vibrancy without risk.
Triadic — three hues spaced evenly, 120° apart. Lively and balanced, popular for playful brands, children's products and illustration. As always, pick one leader; the other two work best in supporting roles.
Temperature and mood
The wheel also splits into warm (reds through yellows) and cool (greens through violets) halves. Warm colours advance — they feel close, energetic and social. Cool colours recede — they feel calm, clean and trustworthy, which is why banks are blue and sales stickers are red. Mixing one temperature as the base with a small accent from the other is a dependable way to add life to a scheme without destabilising it.
Try the theory, instantly
All of this is built into the JUMI Colour Generator: the harmony modes (Analogous, Mono, Complement, Triadic and more) apply these wheel relationships for you, and locking a swatch lets you keep an anchor colour while you audition companions around it. When your palette is ready, check text pairs in the contrast checker and export to CSS, SCSS, Tailwind or JSON — or blend it into a background with the gradient generator.
Related guides: HEX, RGB, HSL & OKLCH explained · Accessible colour · Choosing brand colours