Color Theory for Engineers Who Skipped Art School

Most engineers treat color as configuration: drop a hex code in, ship it. This works until it doesn't — until a designer looks at your UI and immediately knows something is wrong, even if they can't articulate it instantly. Here's the underlying model.

HSL Is the Right Mental Model

RGB is for machines. HSL — hue, saturation, lightness — is for humans. When you want a color lighter, increase lightness. When you want it less saturated, decrease saturation. When you want a related color, shift hue.

--color-primary: hsl(220, 90%, 55%);
--color-primary-light: hsl(220, 90%, 70%);
--color-primary-muted: hsl(220, 40%, 55%);

Contrast Is Not Optional

WCAG AA requires a 4.5:1 contrast ratio for body text. This is not an accessibility checkbox — it's a readability floor. Below this ratio, text is difficult to read in ambient light, on glossy screens, for users with any degree of visual impairment.

Use the browser devtools or a tool like Polychrome to check ratios before shipping. A color that looks fine on your calibrated display at 100% brightness may fail on a phone screen in sunlight.

Semantic Color Tokens

Don't name your tokens by value. Name them by role:

| Bad | Good | |-----|------| | --blue-500 | --color-interactive | | --gray-200 | --color-surface-subtle | | --red-600 | --color-destructive |

When you rename blue to indigo in the rebrand, semantic tokens don't break. Value-named tokens require a search-and-replace across the codebase.

The 60-30-10 Rule

Sixty percent of your UI should be a neutral (background, surface). Thirty percent is your secondary tone (cards, sidebars, borders). Ten percent is accent — the color that carries intent (buttons, links, highlights).

Violate this ratio and you get visual noise. Apply it and things look intentional even before the designer reviews them.

Color is not decoration. It is a signaling system. Learn its grammar.