Color Palette Generator

Use our free Color Palette Generator to quickly build color schemes for your website or brand.

Enter a base color and instantly see matching palettes with HEX and RGB codes you can copy and use in your design.

Get Our Free Inspiration Guide

Learn More
Ad - Managed WordPress Hosting from SiteGround - Powerful, yet simple to use. Click to learn more.

Generate Website Color Palettes

Website Color Palette

Pick a color. Choose a style. Get a clean, usable palette for your site.

Headline looks like this

Paragraph text with a sample link using your palette.

Card Title

Cards use your surface and border tokens.
You’ll get: --primary, --secondary, --accent, --neutral-100, --neutral-900, --text.

How to Use the Color Palette Generator

1. Enter Or Pick Your Primary Color

  • Click the color square or paste a HEX (e.g., #0F6CBD).

  • The tool keeps this exact color as Primary every time.

2. Choose a style

  • Modern = crisp + cool neutrals

  • Retro = warm, slightly muted

  • Minimal = soft, low-contrast

  • Playful = bright, lively

  • Luxury = deep, rich

  • Earthy = natural, grounded

  • Pastel = light, airy

  • Bold = high contrast

3. Click Generate

You’ll get six colors with quick tips:

  • Primary – links, main buttons, highlights

  • Secondary – headers, badges, subtle accents

  • Accent – attention-grabbers (sale, CTA)

  • Neutral Light – page backgrounds

  • Neutral Dark – footers, borders

  • Text – body copy

4. Check the Live Preview

Skim how the palette looks on:

  • Headline & paragraph

  • Link + hover

  • Primary / Secondary / Accent buttons

  • Card on a surface
    If anything feels off, switch styles and click Generate again—the Primary stays the same.

5. Export for your site

  • Click Copy CSS → paste into Divi > Theme Options > Custom CSS (or Appearance > Customize > Additional CSS).

  • (Optional) Click Download PNG to share a simple brand sheet.