Skip to main content

Palette Generator

Generate five-colour palettes by colour theory, mood, era, nature or art, lock the ones you like, and export CSS, SCSS, JSON or SVG.

Palette

Random cohesive palette.Space bar does it too. Locked colours stay.

Preview

Export

Export
:root {
  --palette-1: #264653;
  --palette-2: #2a9d8f;
  --palette-3: #e9c46a;
  --palette-4: #f4a261;
  --palette-5: #e76f51;
}
Two to eleven codes, separated by spaces, commas or new lines. Press Enter.

Runs in your browser; nothing you enter leaves this page.

How it works

Strategies

Each strategy is a recipe for choosing hues, saturation and lightness together: colour-theory schemes, moods, eras, natural scenes and cultural palettes. Press the space bar or the generate button for a new draw.

Lock a colour with its padlock and it stays while the others change. You can add or remove colours, from two to eleven.

Export and import

Export the palette as CSS custom properties, SCSS variables, a JSON array, a plain list, or an SVG strip. To start from your own colours, paste two to eleven hex codes separated by spaces, commas or new lines.

More tools

All 238 tools