On a landing page, the 10% accent color has one job: make the CTA impossible to miss. If accent bleeds into headers, icons, or testimonial borders, your CTA loses its visual monopoly.
The 60-30-10 rule works especially well on landing pages because the conversion goal is singular. You're not building a dashboard with 15 actions — you're directing users toward one button. That clarity makes strict accent discipline achievable.
Generate your landing page palette at sixtythirtyten.co →
The landing page palette principle
A landing page palette has one structural constraint that SaaS dashboards don't: the accent role serves conversion, not navigation. There's no active state, no selected tab, no badge count. The accent appears exactly once in any meaningful way — the CTA button.
That means you can push the accent color harder. Higher saturation, stronger contrast, more visual weight. On a dashboard, an aggressive accent might make the UI feel noisy. On a landing page, it drives clicks.
The three-role split for a landing page:
- Dominant (60%): White or near-white. Maximum surface area, minimum visual noise. The page breathes.
- Secondary (30%): Your brand's dark tone for headings, body text, and navigation. Confident but non-competing.
- Accent (10%): High-saturation, high-contrast color used exclusively for the CTA button and primary CTA links.
:root {
--color-dominant: #ffffff;
--color-secondary: #1e293b;
--color-accent: #f97316; /* CTA only */
}
The accent bleed anti-pattern
Accent bleed is when your 10% accent color appears on non-CTA elements: hero imagery, section dividers, testimonial borders, secondary link underlines, icon fills.
Each additional use of the accent dilutes the signal. If the orange appears on 12 elements across the page, when users see the CTA button they've already processed that color as "part of the design" rather than "this is where I act."
Before (accent scattered):
/* Accent used on multiple non-CTA surfaces */
.hero-badge { border-color: var(--color-accent); }
.testimonial-card { border-left: 4px solid var(--color-accent); }
.feature-icon { color: var(--color-accent); }
.secondary-link { color: var(--color-accent); }
.cta-button { background-color: var(--color-accent); }
After (accent concentrated):
/* Accent reserved for CTA only */
.cta-button { background-color: var(--color-accent); }
/* Everything else uses secondary or a neutral */
.hero-badge { border-color: var(--color-secondary); }
.testimonial-card { border-left: 4px solid #e2e8f0; }
.feature-icon { color: var(--color-secondary); }
.secondary-link { color: var(--color-secondary); }
The page looks less "designed" in one sense — fewer pops of color, more flat. That's the point. The CTA becomes the only warm element on the page.
CTA color selection: contrast ratios matter
Your CTA color choice has a technical requirement: it must pass WCAG AA contrast for the text on it (typically white).
For large text (18px+ or 14px bold), the minimum contrast ratio is 3:1. For normal body text, it's 4.5:1. CTA button text is almost always 16px bold, which counts as large text in WCAG terms — but targeting 4.5:1 gives you more flexibility. Verify with the WebAIM contrast checker.
Orange #f97316 on white button text:
#f97316(button background) vs#ffffff(button text): approximately 3.1:1- Passes WCAG AA for large text. Falls short of the 4.5:1 threshold for normal text.
If you want a higher-contrast orange that clears 4.5:1 for normal text, use #ea580c (Tailwind orange-600):
#ea580cvs#ffffff: approximately 4.6:1- Passes WCAG AA for all text sizes.
The CTA button CSS:
.cta-button {
background-color: var(--color-accent);
color: #ffffff;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
/* No other element uses --color-accent */
}
.cta-button:hover {
/* Darken the accent slightly — don't switch to a different color family */
background-color: #ea580c;
}
The hover state comment matters: don't shift to a completely different hue on hover. Use a darker or lighter shade of the same accent. Color family switching on hover creates visual confusion.
Below-the-fold CTA placement
Landing pages often have multiple CTA instances: above the fold, after the feature section, at the footer. Each should use the same accent color and button style.
What breaks accent discipline: using the accent on non-button elements between CTA instances to "fill in" the visual space. Resist this. The space between CTAs is served by your dominant and secondary — the accent sits quiet, then reappears at the next action point.
/* Section divider — use secondary or a neutral, not accent */
.section-divider {
border-top: 1px solid #e2e8f0;
}
/* Feature list icon — secondary, not accent */
.feature-check-icon {
color: var(--color-secondary);
}
/* All CTA buttons — same accent every time */
.cta-button-primary {
background-color: var(--color-accent);
color: #ffffff;
}
Putting it together
Full landing page palette setup with strict accent discipline:
:root {
--color-dominant: #ffffff;
--color-secondary: #1e293b;
--color-accent: #ea580c; /* WCAG AA+ for all text */
}
/* CTA — only element using accent */
.cta-button {
background-color: var(--color-accent);
color: #ffffff;
font-weight: 600;
}
/* Headings — secondary, not accent */
h1, h2, h3 {
color: var(--color-secondary);
}
/* Body text — secondary */
p {
color: var(--color-secondary);
}
/* Navigation — secondary, transparent background on scroll */
.nav-link {
color: var(--color-secondary);
}
The result: a page where every warm element is the CTA. Users don't consciously notice the restraint — they just convert faster.
What to do next
Generate your landing page palette at sixtythirtyten.co — enter your brand color, get the dominant/secondary/accent split ready to paste.
For more landing page palette starting points and hex color examples, see 60-30-10 Hex Color Palette Examples.
For the CSS variables setup to wire this palette into your stylesheet, see CSS Variables Color System Cheat Sheet.
If you're using Tailwind, see 60-30-10 Tailwind Color Palette for the @theme and module.exports formats.
For the foundational 60-30-10 rule, see The 60-30-10 Rule: A Developer's Guide to UI Color Balance.
Enter your brand color and get your landing page palette in one step.