Choosing Color Palettes for Your Website

What You’ll Learn

• How to translate brand adjectives into color directions.
• How to build a 5–7 color palette that scales (primary, accents, neutrals, states).
• How to apply the 60–30–10 rule for layouts and components.
• How to check accessibility (contrast ratios) and avoid common mistakes.
• How to implement your palette in WordPress + Elementor with global colors.

Start With Strategy (Not Swatches)

Choose colors that reinforce your positioning and audience. Pick 3 brand traits and map colors to them:

Palette Structure (5–7 Colors)

1. Primary (1): Main brand color for buttons/links.
2. Accent (1–2): Support highlights, badges, charts.
3. Neutral (2–3): Backgrounds and text (e.g., near-white, gray-700, gray-900).
4. State Colors (optional 1–2): Success/Warning/Error for UI feedback.

Guideline: Limit intense, saturated hues to CTAs and small elements; keep backgrounds and long-form text calm.

Layout Rule: 60–30–10

• 60% Neutral background and surfaces (page BG, cards).
• 30% Secondary neutrals and subtle accents (headings, dividers).
• 10% Primary color for calls-to-action and key highlights.

Sample Palettes (Copy & Adapt)

/* Only affects this lesson block */ #lesson-branding-colors .palette{border:1px solid #eee;border-radius:14px;padding:1rem;margin:1rem 0} #lesson-branding-colors .swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.75rem} #lesson-branding-colors .swatch{border-radius:10px;height:56px;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#111;font-weight:600;border:1px solid rgba(0,0,0,.05)} #lesson-branding-colors .swatch.is-dark{color:#fff} #lesson-branding-colors code.color{background:#f6f8fa;padding:.15rem .35rem;border-radius:6px} #lesson-branding-colors .legend{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem} #lesson-branding-colors .legend span{font-size:.85rem;background:#f7f7f9;border:1px solid #eee;border-radius:6px;padding:.2rem .5rem}

Accessibility: Contrast & Legibility

• Body text: Aim for contrast ratio ≥ 4.5:1 against its background.
• Large text (≥ 24px or 18.66px bold): ratio ≥ 3:1.
• Buttons/links: Check text color vs button color; also ensure focus/hover states are visible.
• Never use color alone to convey meaning (pair with icons, labels, or patterns).

Tip: Keep one “ink” color for long text (usually near-black on light backgrounds) for comfortable reading.

Implementing in WordPress + Elementor

1. Set Global Colors: In Elementor, go to Site Settings → Global Colors. Add Primary, Accent, Text, Muted Text, Background, Surface.
2. Map Components: Buttons use Primary (normal) and a slightly darker shade on hover; links inherit Primary.
3. Sections: Alternate Background and Surface for visual rhythm (e.g., white → light gray).
4. Templates: Save a button + card as reusable templates to lock in consistent color usage.

Hands-On: Build Your Palette (15–20 min)

1. Pick a Direction: Choose one of the three sample vibes above or define your own in 3 adjectives.
2. Select Colors: Choose 1 primary, 1 accent, 2 neutrals (text + surface), and 1 background.
3. Name Tokens: Create names like --brand-primary, --brand-accent, --brand-bg, --brand-surface, --brand-text.
4. Test Contrast: Try your headline, paragraph, and button over your background and surface colors.
5. Apply Sitewide: Set them as Global Colors and update your Header, Buttons, and Footer templates.

Common Mistakes to Avoid

• Choosing colors first, strategy later.
• Too many saturated hues (fatiguing to read).
• Low-contrast text on colored sections.
• Inconsistent button colors across pages.
• Using “pure black” (#000) on white; prefer deep charcoal for softer reading.

Reusable Tokens (Copy/Paste)

Use these names in your design system documentation or CSS (if applicable):

:root{
  --brand-primary: #2563EB;  /* Buttons, links */
  --brand-accent:  #0EA5E9;  /* Badges, highlights */
  --brand-bg:      #F8FAFC;  /* Page background */
  --brand-surface: #E2E8F0;  /* Cards, sections */
  --brand-text:    #0F172A;  /* Body & headings */
  --state-success: #16A34A;
  --state-warning: #F59E0B;
  --state-error:   #EF4444;
}

Note: If you don’t use custom CSS, simply mirror these names when creating Elementor Global Colors.

Example: Applying Colors to Components

Quick Color Checklist

• Primary, Accent, Background, Surface, Text defined.
• Contrast checked: body text ≥ 4.5:1; large text ≥ 3:1.
• Buttons and links are unmistakable and consistent.
• Global Colors set in Elementor; applied to templates.
• Usage follows 60–30–10 across pages.

FAQ: Common Beginner Questions

Next Steps

1. Finalize your 5–7 color palette and document names/tokens.
2. Set Global Colors and update your Header, Footer, and Button templates.
3. Audit 2–3 pages for contrast and link visibility.

Continue learning: Typography Basics (Fonts, Pairing, Readability).