How to choose a website color palette
Quick practical rules for picking a website color palette: what to choose first, how to structure colors, which accessibility checks to run, and testing in…
Emma Collins
September 27, 2026
Updated September 27, 2026
8 min read
Quick, practical rules to pick a website color palette: what to choose first, how to structure colors, which accessibility checks to run, and which tools to use. Consulted sources and dates are listed in the method block below.
Why color choice matters for a website
Color shapes first impressions and supports usability. A coherent palette helps readers orient themselves and recognize functional elements such as links and buttons. At the same time, poor color choices create readability problems and can hide important signals when contrast is too low.
Accessibility trade-offs are central: contrast between text and background affects legibility for many users. The Web Content Accessibility Guidelines (WCAG) set objective thresholds for contrast that must be considered when choosing text, background and UI surface colors. Rely on those thresholds rather than subjective taste when readability is a requirement.
Testing palettes in real UI contexts is essential. Colors that look balanced on an isolated swatch can fail when applied to body text, small interface labels, disabled states or overlapping elements. Plan to verify how chosen colors behave on headers, paragraphs, buttons, form fields and hover/focus states. Use component-level previews rather than judging palettes only on isolated swatches.
Basic color theory for web designers (quick primer)
Color on screen is commonly handled with RGB, and HSL is useful for tweaking hue, saturation and lightness. For practical work, document colors in web-friendly formats such as HEX, RGB or HSL so developers can use them directly.
Use the color wheel and standard harmony rules as a structural starting point. Common harmony systems include monochromatic (variations of one hue), analogous (neighbouring hues on the wheel), complementary (opposite hues) and triadic (three evenly spaced hues). These rules help ensure visual cohesion and make it easier to generate harmonising secondary and accent colors.
Saturation and lightness are as important as hue. A highly saturated accent can draw attention but may clash with low-saturation neutrals; a lightness range is the main tool to build legible neutrals for backgrounds and text. When adjusting a hue, keep an eye on its luminance so contrast targets remain achievable.
For reference material on color theory adapted to web work, consult the W3C colour-theory primer linked in the resources section.
A practical palette structure to start from (rules + proportions)
Adopt a simple system that separates intent and function: one dominant (primary) color, one secondary color, a neutral scale for backgrounds and text, and one or two accent colors for calls to action and highlights. This structure keeps the UI predictable and makes tokenization straightforward for implementation.
Use the 60/30/10 proportion guideline as a visual-balance rule of thumb: dominant ~60%, secondary ~30%, accent ~10%. State this as a guideline to weigh areas of the interface: the dominant color governs large surfaces or brand-mark accents, the secondary color appears in components and supporting graphics, and accents mark interactive or attention-critical elements.
Build a neutral scale that covers background, surface and text roles. Neutrals should provide reliable contrast ratios against the chosen text colors and serve as stable anchors when the brand hue changes. Document a small set of neutral tokens (for example: background, surface, text-primary, text-muted) to reduce ambiguity in implementation.
Accessibility-first checks to run before you pick
Run contrast checks for all text sizes and for critical UI elements. WCAG defines minimum contrast ratios: normal text must meet a contrast ratio of at least 4.5:1; large text has a lower threshold of 3:1. Use those thresholds as hard checkpoints when selecting text and background pairs.
Do not rely on color alone to convey information. Provide text labels, icons or patterns alongside colour cues so that error states, required fields or status indicators remain readable and actionable for users who cannot distinguish a given hue.
Test hover, focus and disabled states as part of the accessibility checks. Some colors that pass contrast as a static pair fail once a semi-transparent overlay, focus ring or icon tint is applied. Verify interactive states with the same contrast tooling used for static text.
Use an established contrast checker to compute ratios and flag failures. Repeated checks during the palette development process prevent last-minute regressions when colors are shifted for branding reasons.
Practical step-by-step method to choose a palette
Step 1 — Define purpose and constraints. Specify whether the site must feel formal, friendly, neutral or energetic, and list any brand constraints such as an existing logo color or mandated primary hue. Avoid absolute psychological promises; treat mood as a constraint that narrows choices rather than a guaranteed outcome.
Step 2 — Pick a dominant color. Start from the brand or context if one exists; otherwise select a hue that matches the defined purpose. Use color wheel harmony rules to derive one or two supporting colors that sit well with the dominant hue.
Step 3 — Build neutrals. Create a neutral range for background, surface and text that preserves legibility. Verify that body text and small labels meet the 4.5:1 contrast requirement against their backgrounds; check large headings against the 3:1 threshold where applicable.
Step 4 — Add accents for calls to action. Choose accent colors that are visually distinct from the secondary palette and that meet contrast targets when used for text or icons on buttons. Reserve accents for interactive or critical elements to preserve their salience.
Step 5 — Test on real components. Place the palette into header, body, buttons, links, form fields and disabled states. Test multiple background surfaces and multiple sizes. Use both automated contrast checks and in-context previews to catch issues that raw numbers miss.
Throughout these steps, use palette generators and color wheel tools to explore harmonies, then verify accessibility using dedicated contrast checkers before finalizing tokens for development.
Tools and quick workflows (generators, contrast checkers, preview)
Adobe Color — use for exploring harmony rules and exporting swatches for handoff. Consulted September 27, 2026: https://www.adobe.com/products/color.html
Coolors — rapid palette exploration and image-to-palette extraction; useful for mood-board work and quick iterations. Consulted September 27, 2026: https://coolors.co/
Contrast checking tools and WCAG reference — run automated checks against WCAG thresholds and verify target ratios. Core reference: W3C Understanding Contrast (minimum). Consulted September 27, 2026: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum
In-context preview — test palettes inside design tools or live pages (design files, static prototypes or developer staging pages) to validate component states, overlays and responsive behaviour. Re-check tool docs on publication day for updates to features and workflows.
Common pitfalls and how to avoid them
Relying on tool-generated palettes without accessibility tests. Automated generators produce balanced swatches but do not guarantee readable combinations; run contrast checks and in-context previews.
Using color as the sole indicator for state or status. Provide redundant signals such as labels and icons to ensure information is accessible to users with color vision deficiencies.
Choosing low-contrast accents for CTAs. Accent hues must be distinct from surrounding elements and meet contrast requirements when used for text or iconography.
Ignoring color blindness. Simulate common deficiencies (for example, deuteranopia and protanopia) and adjust hues to preserve distinctiveness where functional differences rely on color.
Special cases and examples
Dark mode — derive a dark palette by inverting roles: choose dark neutrals for surfaces and lighter tones for text while preserving contrast ratios. Adjust saturation and hue gently so accents remain visible against darker backgrounds.
High-brand vs low-brand projects — a brand-heavy site can let the primary hue occupy larger areas, while content-heavy sites benefit from a neutral-first approach that reserves brand color for accents and identity marks.
Minimal UI or content-heavy sites — prioritise high-contrast neutrals and subtle accents so long-form text remains the primary focus and interactive elements remain visually distinct.
Illustrative example structure (editor note: examples here are structural only and not universal solutions): Primary: a single dominant hue; Secondary: one complementary/supporting hue; Neutral: a range of background and text tokens; Accents: one or two high-contrast colors for CTAs.
Quick checklist to ship a palette (copyable)
Resources and how this guide was made
How we made this guide. This guide is based on public accessibility standards and color theory references consulted on September 27, 2026 (sources listed below). It does not replace a site-specific accessibility audit. Where we list tools, we name the tool and the consult date; verify the tool’s current behavior on its official site before applying it to production.
Accessibility warning: This guide explains WCAG thresholds and testing practices; it is not a certificate of compliance. Run a site-specific audit to confirm compliance.
Primary references consulted on September 27, 2026:
How many colors should I use?
Use a dominant hue, one secondary, and one or two accents, plus a neutral scale. This keeps the system manageable and predictable across components.
Do I need to hire a designer?
Basic palettes can be built using the steps above and the listed tools. For complex brands or when accessibility audits are required at scale, involve a professional to validate edge cases and implementation.
How to test color blindness?
Simulate common deficiencies with dedicated simulators and verify that functional differences remain distinguishable when colour cues are removed. Choose alternatives (icons, patterns, labels) where necessary.
What this guide could not determine (items left to check)
No single “best palette” HEX values exist for all websites; palette suitability depends on site context and must be validated per project. Tool features and vendor UIs may change after the consult date; re-check Adobe Color and Coolors on the day of production. Site-specific accessibility compliance requires an audit; this guide does not issue compliance certificates.
Related guides
Emma Collins
Emma covers e-commerce, website builders, design and AI tools. She compares platforms on the criteria a small business actually feels: setup time, running costs and lock-in.
Updated on September 27, 2026
