How to Build a Color Palette That Doesn't Suck: A Designer's Framework

程序员的审美，我懂的。蓝色配绿色，红色配橙色，黑色背景配白色文字但字号太小...

I'm a designer who learned to code. I've seen too many developer-built UIs where the colors look like a bag of Skittles exploded on screen. Let me share my systematic approach.

The 60-30-10 Rule

Interior design's golden rule applies to UI:

• 60% — Dominant color (backgrounds, large surfaces)
• 30% — Secondary color (cards, sections, supporting elements)
• 10% — Accent color (buttons, links, CTAs)

:root {
  --dominant: #f8fafc;    /* 60% — backgrounds */
  --secondary: #e2e8f0;   /* 30% — cards, sections */
  --accent: #3b82f6;      /* 10% — buttons, links */
}

Building a Palette in 4 Steps

Step 1: Choose Your Brand Color

Pick ONE color that represents your brand. This becomes your accent.

Step 2: Generate Complementary Colors

Use the color wheel:

• Complementary (opposite) — High contrast, energetic
• Analogous (adjacent) — Harmonious, calm
• Triadic (equally spaced) — Balanced, vibrant

Use a Color Palette Generator to generate harmonious palettes from your brand color.

Step 3: Create a Neutral Scale

Every UI needs neutrals for text, borders, and backgrounds:

--gray-50:  #f9fafb;  /* Lightest background */
--gray-100: #f3f4f6;  /* Card backgrounds */
--gray-200: #e5e7eb;  /* Borders */
--gray-500: #6b7280;  /* Secondary text */
--gray-700: #374151;  /* Primary text */
--gray-900: #111827;  /* Headings */

Step 4: Check Accessibility

Every text/background combination must meet WCAG AA (4.5:1 contrast ratio for normal text).

Combination	Ratio	WCAG AA?
#111827 on #ffffff	17.4:1	✅
#6b7280 on #ffffff	5.0:1	✅
#3b82f6 on #ffffff	3.4:1	❌ (for text)
#3b82f6 on #111827	5.1:1	✅

Common Mistakes

1. Too many colors — Stick to 3-5 colors max
2. Low contrast text — If you can't read it easily, increase contrast
3. Pure black on white — Use #111827 instead of #000000 (softer on eyes)
4. Colored shadows — Shadows should be dark neutral, not colored
5. Different saturation levels — All your colors should have similar saturation

Dark Mode Colors

Don't just invert! Dark mode needs its own palette:

@media (prefers-color-scheme: dark) {
  --dominant: #0f172a;    /* Dark backgrounds */
  --secondary: #1e293b;   /* Card backgrounds */
  --accent: #60a5fa;      /* Lighter accent for dark bg */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
}

Tools I Recommend

• Color Palette Generator — Generate harmonious palettes
• Contrast Checker — Verify WCAG compliance
• CSS Gradient Generator — Beautiful gradient backgrounds

Build your perfect color palette with our free Color Palette Generator — generates complementary, analogous, and triadic color schemes instantly.