Color theory for developers who can't design

You can center a div, optimize a query, and ship a feature — but the moment you have to pick colors, you freeze. Same. Here's the small bit of color theory that gets you 90% of the way, no design degree required.

Rule #1: Start with ONE color

Don't pick five colors. Pick one you like — your accent/brand color — and build everything else around it. Say your accent is:

--color-accent: #6366f1; /* indigo */

Now generate the rest from it using the color wheel.

The 3 relationships you actually need

Complementary — the color directly opposite on the wheel. Maximum contrast. Use it sparingly for one highlight (a button, a badge).

• 
  #6366f1 → complement ≈ #f1c46a (warm gold)

Analogous — the colors right next to yours. Calm and cohesive. Great for backgrounds and gradients.

• 
  #6366f1 → #8b5cf6 and #5c8bf6
  

Triadic — two colors evenly spaced around the wheel. Vibrant but balanced.

• 
  #6366f1 → #f16366 and #66f163
  

Rule #2: Most of your UI is neutral

Beginners color everything. Pros use one accent + lots of neutrals:

--color-bg:     #f7f7f8; /* off-white, not pure white */

--color-text:   #1f2937; /* near-black, not pure black */

--color-muted:  #9ca3af;

--color-accent: #6366f1;

Pure black on pure white is harsh. Pull both back and everything instantly looks more intentional.

Rule #3: Check contrast before you ship

A palette can look great and still fail accessibility. Aim for a 4.5:1 contrast ratio for body text (WCAG AA). Test your text against your background — if it's borderline, darken the text.

The shortcut

If you'd rather not do the wheel math by hand, I built a free tool — PaletteCSS — that shows the complementary, analogous and matching colors for any base color and lets you copy them as CSS variables or Tailwind. But honestly, the three rules above get you most of the way.

What's your go-to for colors when there's no designer on the team? Drop it in the comments — always looking to steal good ones.