Colour Theory Basics

Colour theory gives designers a vocabulary for talking about colour and a handful of predictable ways to combine colours so that the result feels intentional. This guide covers the core concepts — how colours are described, how they relate to each other, and how to turn a single base colour into a working palette — at a level useful for web, brand, and illustration work.

How colour is described

Every colour on a screen can be described by three independent properties:

• Hue — the name of the colour on the colour wheel (red, orange, blue, and so on). Measured in degrees from 0 to 360.
• Saturation — how "pure" the colour is. A fully saturated colour is vivid; at zero saturation it becomes grey.
• Value (sometimes called lightness or brightness) — how light or dark the colour appears. A value of 0 is black; 100 is white.

Together these three values form the HSL or HSV colour models, which most design tools expose. HEX codes and RGB values describe the same colour differently — useful for code — but HSL is the easier model for thinking about relationships between colours.

Warm, cool, and neutral

Hues are loosely grouped by temperature:

• Warm hues sit between roughly 330° and 60° on the wheel — reds, oranges, and yellows. They feel energetic and close.
• Cool hues sit between roughly 150° and 270° — greens, blues, and violets. They feel calm and distant.
• Neutrals are colours with little or no saturation — black, white, greys, and near-greys. They provide structure without introducing a new hue.

Designs almost always benefit from mixing temperatures. All-warm or all-cool palettes can feel monotonous unless they're doing a specific job (think a summer travel ad or a medical-tech landing page).

The colour wheel

The colour wheel is the traditional map of hue relationships. On it, colours directly opposite each other are complementary; colours adjacent to each other are analogous; evenly spaced triangles and squares describe triadic and tetradic relationships. The interactive colour wheel tool on iPalette draws these relationships live so you can see them update as you move the base colour.

The five common harmonies

Most harmonies are ways of picking points on the colour wheel that are mathematically related.

• Monochromatic — one hue at multiple saturations and values. Easy to use; can feel flat without strong value contrast.
• Analogous — three hues that sit next to each other on the wheel (for example, yellow, yellow-orange, and orange). Naturally harmonious; useful for atmospheric designs.
• Complementary — two hues opposite each other (red and green, blue and orange). High contrast; attention-grabbing.
• Split-complementary — a base hue plus the two hues adjacent to its complement. Retains the energy of complementary without the harshness.
• Triadic — three hues evenly spaced around the wheel (for example, red, yellow, and blue). Vibrant and balanced.
• Tetradic (and square) — four hues arranged as a rectangle or square. Lots of variety but difficult to balance; easier to use if you pick one as dominant.

Turning a base colour into a palette

One practical workflow:

1. Pick a single base colour that represents the core idea of the brand or design.
2. Choose a harmony that matches the mood you want — analogous for calm, complementary for energy, triadic for variety.
3. Use the harmony to generate three to five related hues. Don't include them all at equal weight.
4. Add neutrals — a near-white, a mid-grey, and a near-black — for type, dividers, and surfaces.
5. Test the final set for accessibility using the contrast checker.

Tint, shade, tone

Most palettes end up needing more than just three or five hues — they need multiple values of each. The basic moves:

• Tint — a hue mixed with white. Lighter and softer than the original.
• Shade — a hue mixed with black. Darker and more dramatic than the original.
• Tone — a hue mixed with grey. Muted, with less saturation but the same hue.

Ramping each chosen hue through a handful of tints, shades, and tones turns a three-colour concept into a complete design system.

What theory doesn't cover

Colour theory is a starting point, not a finish line. Cultural meaning, trend cycles, print reproduction, and screen calibration all affect how a palette actually lands. Theory tells you which colours are likely to combine well; the rest comes from testing in context.

Next steps

• Try generating a palette with a specific harmony using the palette generator.
• See real worked examples in the curated palette collections.
• Check accessibility for the colours you chose with the contrast checker.