Color Palette Guide

How to create beautiful, functional color palettes — from choosing a base color to structuring and exporting the final palette.

What Makes a Good Palette?

A professional color palette has four qualities:

  • Harmony: Colors relate to each other through hue or lightness
  • Hierarchy: One dominant color, one secondary, one accent — not equal weight
  • Versatility: Enough shades to cover backgrounds, surfaces, text, borders and accents
  • Accessibility: Text passes WCAG contrast against every relevant background

Step 1: Choose a Base Color

Every palette starts with one base color — usually the brand color. Considerations:

  • Brand personality: Blue = trust, orange = energy, green = growth, purple = luxury
  • Industry norms: Look at competitors, then either match (safety) or break (differentiation)
  • Accessibility: Ensure the base color passes contrast against white or a specific text color
  • Print compatibility: If the palette will be printed, check the CMYK equivalents

If you do not have a base color yet, explore using the Color Wheel or Color Picker.

Step 2: Pick a Harmony

Choose the color theory relationship:

  • Monochromatic: Safest. One hue, many lightness values.
  • Analogous: Calm and cohesive. Neighboring hues.
  • Complementary: High contrast. Opposite hues.
  • Split-complementary: Moderate contrast. Base + two neighbors of complement.
  • Triadic: Vibrant balance. Three hues 120° apart.
  • Tetradic: Rich variety. Four hues in two complementary pairs.

Open the Color Palette Generator to see all six from your base color.

Step 3: Build the 60-30-10 Structure

Once you have your harmony colors, assign them to roles:

  • 60% dominant: The most-used color. Usually a neutral (white, off-white, light gray) or the brand background tint.
  • 30% secondary: Supporting elements. Cards, secondary surfaces, muted text.
  • 10% accent: Attention-grabbing. Primary buttons, CTAs, highlights.

This proportion is not arbitrary — it mirrors how human vision prioritizes information. Designs that break this rule can work but usually feel visually chaotic.

Step 4: Expand to a Full Scale

A complete palette needs more than 3-5 colors. Most designs need:

  • Primary scale (10 steps): Lightness from 50 to 900 for the brand color
  • Neutral scale (10 steps): Text and backgrounds
  • Semantic colors: Success, warning, danger (typically 5 steps each)

Use the UI Color Palette Generator to produce full 50-900 scales from any base.

Step 5: Test Accessibility

Before finalizing:

  • Test text colors against background colors with the Contrast Checker
  • Test primary colors against white and dark surfaces
  • Test secondary and accent colors at their intended use sizes
  • Test against color blindness with the Simulator

Failures at this stage mean rework downstream, so test now.

Step 6: Export

Once the palette is finalized, export it in the formats your project needs:

Palette Examples

Landing page palette

Off-white background (60%), dark navy text (30%), bright blue accent (10%). Blue primary button, light-blue hover state, subtle gray borders.

Dashboard palette

Light gray background (60%), white cards (30%), 3-4 distinct series colors for data (10%). Series colors must be distinguishable, including for color-blind users.

Brand identity palette

One primary brand color, one secondary support color, one accent for rare emphasis, plus neutrals. Documented as CSS variables and design tokens for consistent usage across all touchpoints.

Editorial palette

White background (60%), black text (30%), single muted accent (10%). The accent is used for pull quotes, drop caps and section markers — nothing else.

Common Mistakes

Too many colors

Six colors is fine. Sixteen is chaos. Real palettes usually have 3-6 colors plus neutrals.

Equal visual weight

All colors at 20% visual weight means no color is dominant. Always establish a clear hierarchy.

No neutrals

Without neutral grays or near-whites, the palette has no resting place for the eye. Neutrals are not "extra colors" — they are the foundation.

Skipping contrast checks

Beautiful palettes that fail WCAG are unusable. Test before committing.

Copying a palette without understanding it

A palette designed for a luxury brand will not feel right for a fitness app. Learn the reasoning behind the colors you admire.

Related Tools

Frequently Asked Questions

Open Palette Generator →