Color Palette Generator

Generate harmonious colour palettes from any base colour.

Free forever No signup Runs in your browser
The short answer

Start with one brand colour and get a full working palette: pick analogous for calm, complementary for punch, or a 5-step shade scale for UI. Every swatch shows HEX and RGB, ready to paste into CSS or Tailwind.

How to use the color palette generator

  1. Pick or enter your base colour.
  2. Choose a harmony type.
  3. Copy the HEX/RGB codes.

Color Palette Generator — FAQs

What is colour harmony?

Colour combinations that look balanced: analogous (neighbours on the wheel), complementary (opposites), triadic (three evenly spaced).

How many colours should a palette have?

5 is the sweet spot for most designs: a dominant, a secondary, an accent, plus light and dark neutrals.

What about dark mode?

Generate a second palette around a dark base, or use the shade scale — your 700–900 shades become dark-mode surfaces.

How do I check accessibility?

Run your text/background pairs through the contrast checker — aim for 4.5:1 for body text (WCAG AA).

Keep exploring

People who used this also opened:

dev

HEX to RGB Converter →

Convert HEX colours to RGB and HSL — and back.

 dev

Contrast Checker →

Check text contrast ratios against WCAG accessibility standards.

 dev

PX to REM Converter →

Convert px to rem (and back) for accessible, responsive CSS.

 generate

QR Code Generator →

Turn any link or text into a scannable QR code — free download.