How to pick a color palette for a landing page

Most landing-page palettes fail not because they’re ugly but because they’re the wrong palette for the job.

A landing page has a narrow set of things to do — get attention on the thing you want clicked, convince the reader you’re not a scam, stay legible on every screen, and leave a faint after-image of the brand once they close the tab. Color can help with all four, but only if you’ve picked one palette with a job, not five because you couldn’t decide.

This is the framework I use when starting from zero.

What a landing page actually needs from color

The order matters here.

1. Attention on the CTA.One thing on the page should be louder than everything else. That thing is where the reader’s eye has to land first. Your brand color should be able to carry this weight — saturated enough to cut through, paired with enough contrast against its background to be readable.
2. Trust.Trust comes from restraint, not saturation. A palette that looks like a paint store threw up suggests the product is the same. Two or three closely-related hues feel curated; seven don’t.
3. Legibility. Body text over backgrounds. Placeholder text over inputs. Muted labels over quiet sections. You need at least two neutrals — one for surfaces and one for text — that hit WCAG AA (4.5:1) together.
4. A brand note. The color people describe when they tell a friend about the product. This is usually the same as the hero color, or something adjacent.

Notice what didn’t make the list: “looks beautiful in Figma.” Beautiful is a side-effect of the four above, not a separate goal.

The five-color framework

Five is the canonical number for a reason — it’s big enough to build a full UI system without forcing you to reuse the hero for body text, and small enough to force you to actually pick.

• One hero. The CTA. Saturated, confident, appears on the page maybe three to five times total. Examples: coral, cobalt, mustard.
• Two support.Secondary buttons, badges, section accents, iconography. These sit in the same temperature family as the hero but at different saturations or values so they don’t compete.
• Two neutrals. One for surfaces (background, cards), one for text (body, headings). The text neutral should be close to — but not exactly — black. Pure black on pure white is harsh. Try #1a1a18 on #fafaf7.

Using Sunset as a worked example:

• Hero: #ff6b4a — hot coral, primary CTA.
• Support: #f97316 burnt orange for secondary CTAs, #f5a524 gold for icon accents.
• Neutrals: #5c1e5f deep plum for body text on implied white.

Every interactive element inherits from this map. The rose (#e85a8d) sits unused as a wildcard — save it for promotional banners or an empty-state illustration, not for anything in the hot path.

Check the palette against the job

Before you ship, run three checks. Two are fast, one is non-negotiable.

Contrast.The CTA background against its text color needs to clear 4.5:1. Body text against surface needs to clear 4.5:1. Large headings (18pt+) can drop to 3:1 but I wouldn’t. Use the contrast checker— don’t eyeball it.

Redundancy. Take the palette to grayscale for thirty seconds. If two colors collapse into the same gray, one of them is doing nothing for you. Swap it.

The screenshot test.Take one screenshot of the homepage, close Figma, and look at it an hour later. Which color do you remember? That’s your brand color, for better or worse.

The three mistakes I see most

Too many saturated hexes. A palette of five full-chroma colors is a fight, not a design. At most two should be at full saturation; the rest should come down to the 40–70% range.

Gradient-only thinking. Gradients hide hex count. Four colors in a radial looks great at hero scale, but when you zoom into a button you need actual individual colors with actual individual contrast ratios.

Dark mode as an afterthought.If your palette works in light mode and wrecks itself on black, it’s not a palette — it’s a light-mode palette. Pick hexes that maintain their identity across both, or commit to two separate palettes and keep them in sync. If your brand color is blue, see why your blues look muddy on dark backgrounds before you ship.

Pick your palette and move on

Half the palette decisions I see take three days because nobody will commit. Pick one. Ship it. If it’s wrong in a month you’ll know, and by then you’ll know why.