← Zaps Colors
Design Tool

Trending Color Palettes

Browse 129 curated color schemes by color, style, and topic.

Color
Style
Topic
Sort

Browse and copy color palettes

This page has 129 hand-picked color palettes, most with five colors. Filter them by color, style, or topic, then copy the hex codes, copy a ready-made block of CSS variables, or open the palette in the generator to edit it.

  1. Filter by color, by style (vibrant, pastel, dark, earth, neon, muted), or by topic (nature, tech, minimal, food, fashion, retro, seasonal).
  2. Click the copy icon on a card to copy all of its hex codes.
  3. Click a palette to open it, then copy one color or the whole palette as CSS.
  4. Click Open in Generator to lock colors, add more, and export.

How to use a color palette in CSS

The CSS copy gives you one custom property per color. This is the Autumn Leaves palette:

:root {
  --color-1: #E63946;
  --color-2: #F4A261;
  --color-3: #E9C46A;
  --color-4: #2A9D8F;
  --color-5: #264653;
}

.button {
  background: var(--color-3);
  color: var(--color-5);
}

That pair, dark teal on gold, measures 6.03:1 and passes WCAG AA for normal text. Rename the variables to match their job, such as --brand or --accent, once you know which color does what.

How to choose a color palette for a brand or website

Pick one main color, one or two supporting colors, and neutrals for text and backgrounds. A common split is 60-30-10: 60% a dominant color, 30% a secondary one, and 10% an accent for buttons and links. Before you commit, test each text and background pair in the color contrast checker. To find colors that sit well together by color theory, use the color wheel, or pull a palette from a photo you already like.

All 129 color palettes

Color palettes FAQ

How do I copy a palette's hex codes?

Click the copy icon on a palette card to copy all of its hex codes as a comma-separated list. Open a palette to copy a single color, or to copy the whole palette as a :root block of CSS variables.

What does Open in Generator do?

It loads the palette into the color palette generator with every color unlocked. From there you can lock the colors you want to keep, generate new ones for the rest, add up to 10 colors, and export CSS, Tailwind, PNG, or SVG.

How many colors should a palette have?

Most brand and website palettes use three to five colors: a main color, one or two supporting colors, and an accent. Add neutrals such as off-white and charcoal for text and backgrounds. Nearly every palette here has five colors.

Are these color palettes free to use?

Yes. Use the hex codes in any website, app, or design. Browsing and copying are free and need no account.