Color Palette Guide

What Is a Color Palette

A color palette is a curated set of colors you use consistently across a design project. Instead of picking colors on the fly, a palette gives you predefined choices that work together. This keeps your interface visually coherent and your brand recognizable.

Most web projects use between 5 and 7 colors. Fewer colors feel unified but may lack variety. More colors risk visual clutter and inconsistent styling. The sweet spot depends on your project's complexity—a simple landing page needs fewer colors than a data-heavy dashboard.

A good palette is not just a collection of pretty colors. Every shade has a role. When each color serves a purpose, your design communicates clearly and looks intentional.

The Typical Palette Structure

A well-rounded palette assigns each color a specific job. Here are the six roles you see most often:

You do not need all six roles in every project. A minimal site might have primary, background, and text alone. The important thing is that every color in the palette has a job—no orphans.

Primary and Secondary

Your primary color is the face of your brand. It appears on key buttons, links, and headline accents. Your secondary color supports the primary—it works for secondary buttons, hovered states, or sidebar highlights without competing for attention.

Accent

Accent colors break the pattern. Use them sparingly to draw the eye to badges, notifications, or a single call-to-action button. One accent is usually enough. Two accents work if they serve clearly different purposes, like warnings versus success states.

Neutrals, Backgrounds, and Text

Neutrals do the invisible work: borders, dividers, disabled states, and subtle backgrounds. Background colors set the stage—most sites use at least two (a page background and a card surface). Text colors need sufficient contrast against every background they sit on.

Color Harmony Modes

Harmony modes apply geometric formulas on the color wheel to produce combinations that feel balanced. Instead of guessing, you pick a base hue and let the math generate the rest.

Complementary

Two colors sitting 180° apart on the wheel. High contrast, high energy.

• Blue (240°) + Orange (60°)
• Use one as dominant, the other as a pop accent
• Avoid equal-area complementary pairs—they cause optical vibration

Analogous

Two to four colors within 30° of each other. Smooth, natural feel.

• Blue, Blue-Violet, Violet (240°–270°)
• Works well for backgrounds and gradients
• Add a neutral or dark value for text contrast

Triadic

Three colors 120° apart. Balanced and vibrant.

• Red (0°), Yellow-Green (120°), Blue (240°)
• Let one color dominate; use the other two sparingly
• Great for illustrations and data visualizations

Split-Complementary

One base color plus the two neighbors of its complement (roughly 150° and 210° from the base). Contrast with less tension than pure complementary.

• Base: Blue (240°), Splits: Yellow (60° + 30°) and Red-Orange (60° − 30°)
• Easier to balance than complementary
• Good for dashboards and multi-section layouts

Tetradic (Rectangle)

Four colors forming two complementary pairs. Rich and complex.

• Blue (240°) + Orange (60°) and Red (0°) + Green (120°)
• Requires careful dominance hierarchy—let one pair lead
• Best for experienced designers with established brand rules

Monochromatic

Variations of a single hue at different saturation and lightness levels.

• Blue at 95%, 70%, 50%, 30%, 15% lightness
• Clean, professional, safe
• Add one contrasting accent for interactive elements

How to Choose a Base Color

Your base color anchors the entire palette. Start here before branching into harmony modes.

Start with Brand or Emotion

If you have a brand color, that is your base. If not, think about the emotion you want to convey:

• Trust and professionalism: Blue hues (200°–240°)
• Energy and urgency: Red-orange hues (0°–30°)
• Growth and calm: Green hues (120°–160°)
• Creativity and luxury: Purple hues (270°–300°)

Practical Steps

1. Choose a hue that matches your brand or mood
2. Set saturation between 60% and 90% for screen legibility
3. Pick lightness around 50% as your "500" shade
4. Generate lighter (50–400) and darker (600–950) variants by adjusting lightness in 10–15% steps

Test in Context

Always preview your base color against both white and dark backgrounds. A color that looks vibrant on a light background may look washed out in dark mode. Adjust lightness and saturation until the color reads well in both contexts.

Building a Complete Palette Step by Step

1. Pick a primary hue using the brand or emotion approach above
2. Choose a harmony mode based on the mood you want—analogous for calm, complementary for bold
3. Generate accent colors using your chosen mode
4. Add neutral grays — warm (slate) or cool (zinc) depending on your primary
5. Define background and text colors with sufficient contrast (4.5:1 minimum under WCAG AA)
6. Create shade scales (50–950) for your primary and accent colors
7. Validate contrast for every text-and-background pairing

Key Takeaways

• A color palette assigns specific roles to 5–7 colors so every shade has a purpose
• Primary drives brand identity; secondary supports it; accent draws the eye
• Harmony modes give you geometric formulas for picking colors that work together
• Complementary and split-complementary create contrast; analogous and monochromatic create cohesion
• Start with a single base hue, then branch using your chosen harmony mode
• Always generate shade scales and validate WCAG contrast before shipping
• Context matters—test your palette in both light and dark modes

Try It Yourself

Ready to build a palette? Use our free Color Palette Generator to experiment with six harmony modes and export CSS variables instantly. Need to convert your hex values to RGB or HSL? Try the Color Converter.