How to Choose a Color Palette: A Step-by-Step Guide

I have never once started a palette by opening a color picker and hunting for "nice colors." That's the fastest route to the exact problem this guide exists to solve: a screen full of individually pretty colors that have no reason to be together. Choosing a palette is a process, not a moment of inspiration, and the process is repeatable. Do it in the same order every time and you'll get a coherent, accessible scheme in fifteen minutes instead of three days of nudging hex values.

What follows is the workflow I actually use, start to finish, with real hex codes and the trade-offs at each step. You can run the whole thing with a color wheel and a contrast checker — I'll point out where the color palette generator does the arithmetic for you, but the method matters more than the tool.

Step 1: Decide where the palette comes from

Before you pick a single color, answer one question — what is anchoring this palette? There are only four honest answers, and they change everything downstream.

• Brand. You already have a logo color, a fixed primary, or a client's existing identity. The palette has to live around a hue you don't get to choose. This is the most common real-world case and the most constrained.
• Mood. You want the product to feel a certain way — trustworthy, energetic, calm, premium. Here you're choosing colors for design by the emotion first, hue second. A fintech app leans cool and restrained; a kids' learning app leans warm and saturated.
• Content. The product itself dictates it. A photography portfolio wants near-neutral chrome so the work supplies the color. A data dashboard needs a set of distinguishable category colors more than it needs a vibe.
• An anchor color. You've fallen in love with one specific hex — say a deep teal #0F766E — and you're building outward from it.

Most people skip this step and quietly default to "anchor color" without admitting it, which is fine if it's a deliberate choice. The trap is choosing a mood color emotionally and then discovering it fights your brand. Name your starting point out loud. If it's mood, the psychology of color in branding is worth a read before you commit, because the associations are more culturally specific than people assume.

Step 2: Pick one base hue and pin it down

Whatever your starting point, collapse it into a single base hue. One color. This is the seed everything else grows from, and trying to choose three or four "main" colors at once is precisely why palettes go wrong — there's no spine.

If you have a brand color, that's your base. If you're working from mood, pick the hue that carries the feeling: cool blues and teals for calm and trust, warm oranges and reds for energy (the warm vs cool distinction is the fastest lever you have on mood). Then nail down its HSL, because hue, saturation, and lightness are the three dials you'll actually turn for the rest of the process. A base like #2563EB is roughly H 217, S 91, L 60 — a saturated, mid-light blue.

I deliberately think in HSL here rather than hex, because the harmony rules in the next step are angular — they're all about rotating the H value around a 360-degree wheel. If hex, RGB, and HSL still feel interchangeable to you, this breakdown of the three formats is worth ten minutes; HSL is the one that makes palette-building intuitive.

Step 3: Choose a harmony rule for *this* situation

Now you rotate around the wheel to find colors that relate to your base by a fixed geometric distance. That's all a harmony rule is — a recipe for picking points on the circle at specific angles, so the eye reads them as a family rather than an accident. There are seven classic rules, and the honest truth is that you only need two or three of them most of the time.

Here's how I actually choose, by situation rather than by listing definitions:

• Marketing site, landing page, or anything that needs a confident call-to-action: start with complementary (base plus its 180-degree opposite) or, better, split-complementary (the two hues flanking that opposite). Complementary gives you maximum contrast for a button that has to pop; split-complementary gives you most of that pop with less eye-strain and a second accent for free.
• Content-heavy app, dashboard, or reading experience: go analogous — two or three neighbors within about 30 degrees, like #0EA5E9 through #0D9488. It's calm and almost impossible to make ugly. The cost is contrast, so you'll usually borrow one opposite hue purely for the CTA.
• **You need colors that carry distinct *meanings* (success, warning, error; or chart categories): triadic (three hues 120 degrees apart) or square** (four at 90 degrees). Indigo #6366F1, emerald #10B981, amber #F59E0B is a triad doing semantic work.
• A single-brand product that should feel unmistakably "one color": monochromatic — one hue expanded across lightness and saturation.

My default recommendation for a first serious palette is split-complementary, for exactly the reasons in this comparison with triadic: it's more forgiving than straight complementary and more contained than a three-hue scheme. If you want the full geometry of each rule, understanding color harmony in UI design lays out all seven. Set the wheel to your chosen rule, and the generator will spit out the related hex codes instantly — but now you know why those particular colors appeared.

Step 4: Assign proportions before you assign colors

This is the step that separates palettes that work from palettes that merely "match," and it's the one almost everyone skips. Harmony tells you which colors are allowed in the room. It says nothing about how much of each to use — and three perfectly harmonious colors used in equal amounts is its own kind of ugly, a balanced argument where everyone shouts at the same volume.

Assign roles using roughly a 60/30/10 split:

• Dominant (~60%) is your backbone — page surfaces, large fills, the color the eye lands on most. Critically, this is usually not your saturated base hue. It's a near-neutral derived from it: a tinted off-white like #F8FAFC for light mode, or a desaturated dark like #1E293B.
• Secondary (~30%) supports it — section backgrounds, cards, secondary buttons, hover states. This carries more of your actual hue.
• Accent (~10%, and ideally far less) is the loud one — the primary button, the active tab, the notification dot. This is where your saturated base color or its complement lives. The rarer you make it, the harder it works.

The single most common mistake I see is using the harmonious hues at full saturation across large areas. Your base #2563EB is gorgeous on a button and exhausting as a full-page background. Big surfaces want the desaturated, lightened version; the pure hue is reserved for the 10%. If you want the proportions explained in depth, the 60/30/10 rule goes further, but the headline is simple: pick your colors, then ruthlessly decide how little of the loud one you can get away with.

Step 5: Check contrast — harmony does not guarantee readability

Here is the fact that catches people out: the color wheel says nothing about contrast. Two colors can be perfectly harmonious and completely unreadable together. Harmony and accessibility are independent problems, and you have to solve both.

Run every text-on-background and UI-element pairing through a contrast checker. The targets, straight from the W3C, are not negotiable if you care about your users:

• 4.5:1 minimum for normal body text against its background.
• 3:1 for large text (roughly 18pt, or 14pt bold) and for the rest.
• 3:1 for UI components and meaningful graphics — button outlines, form borders, icons — against adjacent colors.

These are threshold values, so don't round up: a computed 4.49:1 fails the 4.5:1 bar. The generator's WCAG checker flags this live as you pair colors, which is the moment to discover that your beautiful accent-on-secondary combination is illegible — not after you've shipped. For the full picture of AA versus AAA and where the ratios come from, see WCAG contrast ratios explained and the canonical WCAG success criterion 1.4.3.

One more check that costs nothing: don't let color be the only thing carrying meaning. Roughly 1 in 12 men has some form of color vision deficiency, most commonly red-green, so a red error and a green success that differ only in hue are invisible to a real slice of your audience. Pair color with an icon, a label, or a position. A color-blind-friendly approach is mostly about redundancy, not avoiding colors.

Step 6: Test in real context, then iterate

Swatches lie. A palette that looks balanced as five rectangles side by side behaves completely differently once it's a real layout — because area, adjacency, and amount of white space all change how colors read. The classic example: an accent that looks tame as a small chip becomes overwhelming as a full-width banner, and a pair that passed contrast as big blocks fails once the text is 14px.

So before you commit, drop the palette into something that resembles the actual product — a button, a card, a header, a paragraph of real text. Look at it on a cheap phone screen in daylight, not just your calibrated monitor. Then iterate by adjusting saturation and lightness, almost never the hue. If something feels off, your harmony is usually fine; it's the proportions or the tonal values that need work. Pull the dominant lighter, knock the saturation off a surface, deepen an accent until contrast passes.

If you're building for both light and dark, plan it now rather than inverting later — dark mode is not "the same palette flipped," and dark mode color palettes covers why desaturating your accents for dark backgrounds matters. And the moment your palette outgrows a handful of swatches, graduate each color to a proper tonal scale and name them by role, which is the whole premise of scalable color tokens.

The short version

Choosing a palette is six decisions in order, not one lucky guess. Name your starting point. Reduce it to one base hue. Rotate the wheel with a harmony rule that fits the job — split-complementary if you're unsure. Assign 60/30/10 proportions before you fall in love with any color. Check contrast against the WCAG numbers, because the wheel won't. Then test it in a real layout and adjust lightness, not hue.

Do those in sequence and the "how to pick colors that go together" problem mostly dissolves — not because you got lucky with taste, but because every color in the set earned its place by relationship, role, and ratio. That's the difference between a palette and a pile of colors that happen to be pretty.