50 Beautiful Color Palettes for Web Design (with Hex Codes)
A hand-picked collection of beautiful color palettes for web design, each with copy-ready hex codes for backgrounds, buttons and accents.
Choosing the right color palette for web design can make a good layout look great — and a great layout look unforgettable. Below we break down how to use palettes effectively, then point you to a living library of fifty-plus schemes you can copy in one click.
Explore the full, constantly-updated collection of color palettes on PaletteCSS.
What makes a good web design color palette?
- One dominant color for brand identity and primary actions.
- One or two accent colors for highlights, links and calls-to-action.
- Neutrals (a near-white, a near-black, a mid-gray) for text and backgrounds.
- Sufficient contrast — aim for the WCAG AA contrast ratio of at least 4.5:1 for body text.
Popular palette styles
Minimal & modern
Soft neutrals with a single saturated accent — clean and timeless. Great for SaaS and portfolios.
Pastel
Gentle, low-saturation hues that feel friendly and calm. See our roundup of pastel color palettes.
Vibrant & bold
High-energy combinations for landing pages and creative brands. Pair them with a punchy CSS gradient for extra depth.
How to apply a palette in your CSS
Define your colors as variables so they're easy to reuse and theme:
:root {
--brand: #6366f1;
--accent: #ec4899;
--ink: #111827;
--paper: #f9fafb;
}Building with a framework? Read how to build a custom Tailwind CSS color palette.
Frequently asked questions
How many colors should a palette have?
Most effective web palettes use 3–5 core colors plus neutrals. Too many colors dilute your brand.
Where can I copy color palettes with hex codes?
Every palette on PaletteCSS includes copy-ready hex codes — just click a swatch.
Not sure where to start? Our guide on how to choose a color palette walks you through it step by step.
