Color Palette Generator

Pick one colour and get a matching palette you can copy or export.

Private by design

Your inputs stay on your device and are not sent to our servers. Optional usage analytics does not receive your files or tool inputs.

Color Palette Generator

Harmonies from one colour, exported for code and design apps

Palette name

Export

The result appears here.

Options

Base colour

Harmony

Details

Colour wheel

Classic matches design tools. Even keeps brightness steadier between hues.

Add light and dark versions

Colour code

Colour harmonies are fixed steps around the colour wheel. Opposite colours (complementary) contrast strongly, neighbours (analogous) feel calm, and three evenly spaced colours (triadic) feel lively. Start from one colour and export the set.

Use one colour for most of the page, a second for accents and a third sparingly.
Analogous palettes are calm; complementary palettes are punchy.
Turn on light and dark versions for backgrounds and hover states.
Check contrast before using a colour for text.

Hues are rotated around the HSL wheel (classic) or the OKLCH wheel (perceptually even) by the standard angles: 180° complementary, 150°/210° split, 120° triadic, 60°/180°/240° tetradic, 90° square, 30° analogous steps. Monochrome varies OKLCH lightness. Contrast uses the WCAG 2.x formula. ASE files are written in the Adobe Swatch Exchange layout. Nothing is uploaded.

Preparing tool

How to use Color Palette Generator

Pick your base colour and a harmony.
Check the swatches and the text contrast notes.
Copy CSS or Tailwind code, or download an ASE swatch file.

Read the detailed guide →

What are the limits of Color Palette Generator?

Harmony rules give a starting point, not a finished brand palette: always judge the colours by eye and for contrast. ASE files hold RGB colours only. Your colours stay on your device.