Colour Theory Basics: How to Build a Palette That Works
Some palettes just work, and it is rarely luck. Behind almost every combination that feels right there is a simple geometric relationship between the colours — and once you can name those relationships, choosing a palette stops being guesswork. Here is the practical version of colour theory: enough to build something that works, without a design degree.
The three things every colour has
Before the relationships, the vocabulary. Any colour can be described by three properties, and most palette problems are really problems with one of them:
- Hue — the colour itself, its position on the wheel: red, teal, amber.
- Saturation — how intense it is, from grey to vivid.
- Lightness — how close it sits to black or white.
That is what HSL means, and it is why HSL is often easier to think in than HEX. If a palette feels muddy, it is usually saturation. If it feels flat, it is usually lightness — not hue.
The five relationships worth knowing
Pick one base colour, then let geometry do the work:
- Complementary — the colour directly opposite on the wheel. Maximum contrast, high energy. Brilliant for a call-to-action against a calm background; exhausting if you use both at full strength over a large area.
- Analogous — the two or three colours either side of your base. Naturally harmonious and calm, because they share undertones. The safest choice, and the one that risks being bland without a contrast accent.
- Triadic — three colours evenly spaced around the wheel. Vibrant and balanced, but it needs discipline: let one dominate and keep the other two as accents.
- Monochromatic — one hue, varied by saturation and lightness. Effortlessly cohesive and the easiest to make look professional. This is what most well-behaved interfaces actually use.
- Tetradic — two complementary pairs. The richest and the hardest to control; works when one colour leads and the rest support.
The 60-30-10 rule
Knowing the colours is half of it; the split matters just as much. A reliable starting ratio is 60% dominant, 30% secondary, 10% accent. Most palettes that look chaotic are not badly chosen — they are evenly distributed, so nothing leads and the eye has nowhere to rest. Decide which colour is in charge.
Steal from the real world
The fastest route to an original palette is not the colour wheel at all — it is a photograph. A market stall, a shopfront, a landscape, a book cover: nature and good photography have already balanced the hues for you. Pull the colours out of an image you like and you start from something that demonstrably works.
Then check it, because pretty is not the same as usable
This is the step most palettes skip. Two colours can look lovely side by side and still be unreadable as text on a background. The WCAG standard puts a number on it: a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to meet AA, or 7:1 for AAA. It is also worth previewing your palette the way a colour-blind reader sees it — around one in twelve men has some form of colour vision deficiency, so a red/green distinction that carries meaning is a distinction some of your audience will not see.
Do all of it in one place
That is exactly what Tintbox is for. It is a free Android app that generates all five harmonies from any base colour (with precise HEX, RGB and HSL entry), extracts a palette from any photo or eyedrops a single pixel, checks any two colours against WCAG with clear AA and AAA marks, simulates three types of colour blindness, and then exports the result straight into your project — CSS custom properties, SCSS, Tailwind, SwiftUI, Jetpack Compose, Flutter and more. It works completely offline with no account, and there are thirty curated packs for when you would rather start from something already balanced.
More on the app: the Tintbox page.
Frequently asked questions
How many colours should a palette have?
Three to five is plenty for most work: a dominant, a secondary, an accent, plus a light and a dark neutral. More than that and you are usually deciding the same thing twice.
What is the easiest colour scheme to get right?
Monochromatic — one hue varied by saturation and lightness. It is almost impossible to make it clash, which is why so many polished interfaces use it with a single contrasting accent.
What contrast ratio do I need?
For WCAG AA, at least 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1. A contrast checker gives you the number rather than a guess.
Can I get a palette from a photo?
Yes, and it is often the best starting point. Tintbox extracts a palette from any photo from your camera or gallery, or samples one exact pixel with the eyedropper.
Comments
Post a Comment