Color Theory for Non-Designers

You don’t need a design degree

You need three things: a primary color, a sense of contrast, and a way to generate the supporting shades. With those, you can build a design system that doesn’t look amateurish.

Step 1: Pick a primary

Avoid pure red (#FF0000), pure blue (#0000FF), pure green (#00FF00). They are eye-fatiguing on screens. Pick a color one or two notches off — a slightly warmer red, a slightly muted blue.

A good way to find your primary: open the color picker, pick a color you like, then drop the saturation by 10–15%. The result usually looks more professional.

Step 2: Generate shades

A complete UI needs at least 9 shades of your primary color (50, 100, 200 … 900). The easiest way to generate them is to convert your primary to HSL and adjust the lightness while keeping hue and saturation constant.

• 50: lightness 95%
• 100: lightness 90%
• ...
• 500: your primary
• ...
• 900: lightness 15%

Step 3: Pick a neutral

A good design system has *one* neutral with subtle warmth or coolness — not pure gray. If your primary is warm (red, orange, yellow), pick a slightly warm neutral. Cool primary, cool neutral.

Step 4: Check contrast

Text on backgrounds must hit WCAG AA contrast (4.5:1 for body text). A color that looks fine to you may be unreadable for someone else. Use a contrast checker, every time.

Step 5: Avoid color-only meaning

Never communicate state with color alone. Pair red with an icon. Pair "success" green with a checkmark. About 8% of men and 0.5% of women have some form of color blindness — design accordingly.

A 15-minute palette

Pick a primary, drop its saturation, generate the 9 shades, choose a matching neutral, check contrast on the most-used pairs. You now have a design system that won’t embarrass you.