How to choose a color palette

Color palette selection is where taste meets math. Pick well and your product, slide, or branding reads as intentional. Pick badly and every downstream choice feels off — buttons too loud, backgrounds muddy, accessibility broken. This guide covers the color-theory foundation (HSL beats RGB for reasoning), the four palette schemes that cover 95% of use cases, how to hit WCAG contrast without losing aesthetic, tools that actually produce palettes worth using, and the mistakes that signal “amateur” at a glance.

HSL — the color model to think in

RGB (red-green-blue) tells you what the screen does. HSL (hue- saturation-lightness) tells you what humans perceive. Reason about palettes in HSL, convert to hex/RGB at implementation time.

Hue (0-360°): the color family — red (0), orange (30), yellow (60), green (120), cyan (180), blue (240), purple (270), magenta (300).

Saturation (0-100%): how vivid. 0% = grayscale. 100% = neon.

Lightness (0-100%): 0% = black. 50% = pure color. 100% = white.

Once you’re fluent in HSL, you can generate variants systematically: hold hue, vary lightness for shades and tints; hold lightness, rotate hue for color harmonies; drop saturation for backgrounds and borders.

The four palette schemes — pick one and stick with it

1. Monochromatic. One hue, multiple lightness/ saturation variants. Hardest to screw up, easiest to look cohesive. Great for utilitarian UIs, minimalist brands. Drawback: can feel flat. Fix: strong accent color (white, black, or a single complementary pop).

2. Analogous. 2-3 hues adjacent on the wheel (e.g., teal + blue + indigo). Harmonious, calm, natural. Good for landscape-feeling brands, editorial design. Drawback: lacks contrast for CTAs. Fix: use complementary accent for action items.

3. Complementary. Two hues opposite on the wheel (blue + orange, red + green). High contrast, vibrant, good for call-to-action heavy designs. Drawback: overuse feels loud. Fix: 60-30-10 rule — one color dominates, the complement is the accent, neutrals carry the rest.

4. Triadic. Three hues evenly spaced (120° apart). Playful, energetic. Good for kids’ brands, entertainment. Drawback: very hard to balance without one dominating. Use only if you have a strong design instinct or a designer reviewing.

The 60-30-10 rule

Professional palettes rarely use more than 3-4 colors in any meaningful amount. A reliable distribution:

60% — dominant (usually a neutral: white, light gray, dark background).

30% — secondary (brand color, used for sections and larger UI).

10% — accent (CTAs, highlights, interactive elements that need to pop).

If you find yourself using 6 equal colors, you’ve made a rainbow, not a palette. Strip back.

Neutrals — where amateurs cut corners

“Neutral” doesn’t mean pure gray. Warm-tinted neutrals (slight yellow/brown) feel inviting; cool neutrals (slight blue) feel clinical. Match neutral temperature to your brand color for coherence.

Instead of #888888 gray, try HSL(220, 10%, 53%) — a very slightly blue-tinted neutral. Notice the difference on large surfaces.

Build a tonal ramp: 9-10 values of each neutral from near-white to near-black. Tailwind’s gray-50 through gray-900 is the canonical example. Having named steps lets you pick consistently (“borders are gray-200, muted text is gray-500”) rather than picking new hex codes each time.

Accessibility — WCAG contrast is non-negotiable

Contrast ratio is the perceived brightness difference between two colors. WCAG defines minimums:

4.5:1 for normal text on background (AA).

3:1 for large text (18pt+), UI components, graphical elements (AA).

7:1 for AAA — higher accessibility.

Check every text/background pair with a contrast checker before shipping. Light gray text on white looks elegant in Figma but fails accessibility and is unreadable for users with low vision or on dim screens.

The common failure: “muted” gray text around #aaaaaa on white. 2.3:1 — fails even the relaxed standard. Bump to #6b7280 (Tailwind gray-500) minimum for body copy.

Semantic colors — not just aesthetic

Beyond brand, you need roles. Common semantic pairs:

Success: green (hue 120-140).

Warning: amber/yellow (hue 40-50). Use sparingly — contrast on white is poor; pair with stronger background.

Danger/error: red (hue 0-15).

Info: blue (hue 200-220).

These should live outside your brand palette so a “delete” button looks dangerous even if your brand is blue.

Dark mode — not just inverting

A proper dark-mode palette is its own design, not an inverse.

Backgrounds: not pure black (#000). Very dark gray (#0a0a0a, #111) reduces eye strain and makes shadows work.

Text: not pure white (#fff) on dark. Slightly off-white (#e5e5e5, #f5f5f5) reduces glare on OLED screens.

Saturation: de-saturate brand colors by 20-30% for dark-mode UIs. Full-saturation brand colors feel violent on dark backgrounds.

Elevation: use slightly lighter backgrounds (not shadows) to indicate elevation — Material Design’s surface system is the canonical reference.

Tools that generate real palettes

Coolors (coolors.co) — press space to generate, lock favorites, iterate. The fastest way to explore palette directions.

Adobe Color (color.adobe.com) — color-wheel driven, with harmony rules built in. Shows live WCAG contrast on generated palettes.

Tailwind’s palette (tailwindcss.com/docs/ customizing-colors) — pre-built 11-step ramps for 22 color families. Use as-is for ~80% of web projects.

Radix Colors (radix-ui.com/colors) — 12-step ramps designed with accessibility built in. Matched light and dark variants. Aimed at design systems.

Huemint (huemint.com) — AI-based palette generation that considers brand applications.

Site inspiration: Awwwards, Dribbble, Mobbin. Don’t copy — observe how combinations work.

Industry conventions — when to follow, when to break

Banking/finance: blues and greens (trust, stability). Navy is dominant.

Healthcare: teal, green, white. Avoid red (clinical red = emergency).

Food delivery: oranges, reds (appetite).

Tech/SaaS: blues, purples. Notion-esque pastels are the current trend.

Luxury: black, gold, deep navy, white.

These are defaults, not rules. Differentiation often means deliberately choosing against the category (Mailchimp’s yellow in a SaaS world, Liquid Death’s punk black). Intentional deviation is brand strategy; accidental deviation is noise.

Common mistakes

Too many colors. A 7-color palette with no dominance reads as chaos. Strip to 3-4 with the 60-30-10 rule.

Pure black everywhere. #000000 is harsh. Soften to #1a1a1a or #0f172a (slate-900) for better perceived warmth.

Vibrating combinations. Red text on blue background, etc. Full-saturation colors adjacent create visual buzz. De-saturate one or shift lightness.

Untested on real content. Palette looks great as 9 swatches; looks broken once you apply to a page with real copy, buttons, forms. Build a test page, not just swatches.

No dark-mode plan. Users expect it. Decide early or be stuck retrofitting.

Run the numbers

Pick exact colors and explore variants with the color picker. Pair with the color converter for HSL/RGB/HEX conversion, and the gradient generator to build multi-stop transitions for heroes and backgrounds.