Color Theory for Developers: Building Palettes That Actually Work

You don't need a design degree. Learn HSL colour relationships, complementary and analogous palettes, contrast ratios and how to build a coherent design system palette.

Colour is where most developer-built UIs fall apart. Not because developers can't code — but because colour selection without theory is essentially guesswork. Here's the minimum theory you need to stop guessing.

HEX is for machines. HSL is for humans. HSL means Hue, Saturation, Lightness:

• Hue (0–360) — the colour itself. 0=red, 120=green, 240=blue.
• Saturation (0–100%) — how vivid. 0% is grey, 100% is pure colour.
• Lightness (0–100%) — 0% is black, 50% is full colour, 100% is white.

When you need a lighter version of a colour, increase L. Darker? Decrease L. More muted? Decrease S. This is predictable and systematic — the opposite of adjusting HEX values by trial and error.

/* A systematic button state set */
--btn-bg:       hsl(38, 92%, 45%); /* base */
--btn-hover:    hsl(38, 92%, 50%); /* lighter */
--btn-active:   hsl(38, 92%, 38%); /* darker */
--btn-disabled: hsl(38, 30%, 55%); /* desaturated */

Monochromatic — one hue, varying saturation and lightness. Safe, cohesive, never clashes. Good for focused UIs.

Analogous — two or three adjacent hues on the colour wheel (e.g. orange + yellow + amber). Harmonious and natural-feeling. Most professional UIs use this.

Complementary — opposite hues (e.g. orange + blue). High contrast, energetic. Use the secondary colour sparingly as an accent only.

For most web apps: pick one primary (your brand), one neutral scale (grey with a slight colour cast), and one accent for interactive elements. That's it.

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios:

• 3:1 — minimum for large text (18px+ or 14px+ bold)
• 4.5:1 — minimum for normal text (WCAG AA)
• 7:1 — enhanced for normal text (WCAG AAA)

A contrast ratio of 4.5:1 means the lighter colour is 4.5× as bright as the darker one. White on a dark background almost always passes. Where it gets tricky is coloured text on coloured backgrounds.

Test your palette with our Color Picker tool, which includes contrast ratio checking.

Most developers obsess over accent colours and ignore their greys. But 80% of your UI is neutral. A slightly warm or cool neutral scale defines the entire character of your interface.

/* Warm neutral — feels friendly, editorial */
--neutral-900: hsl(30, 8%, 8%);
--neutral-700: hsl(30, 6%, 25%);
--neutral-400: hsl(30, 5%, 55%);
--neutral-100: hsl(30, 8%, 95%);

/* Cool neutral — feels technical, precise */
--neutral-900: hsl(220, 10%, 8%);
--neutral-700: hsl(220, 8%, 25%);
--neutral-400: hsl(220, 6%, 55%);
--neutral-100: hsl(220, 10%, 95%);

Note that both scales use the same hue as their corresponding accent. A warm orange accent pairs with a warm neutral. A cool blue accent pairs with a cool neutral. This subtle consistency is what makes a palette feel considered.