KOEN

Color Palette Generator

PALETTE ยท GENERATOR

Press Space to generate a 5-color palette, lock the colors you love, pick a harmony rule and export as CSS variables, SCSS, Tailwind config or JSON.

Space generate ยท Ctrl+Z undo
HOW TO

How to use

  1. Press Space or click New palette to generate five colors.
  2. Lock the colors you want to keep. Locked colors stay put when you generate again.
  3. Choose a harmony rule: Random, Analogous, Complementary, Triadic or Mono.
  4. Click a HEX code to copy it, or use the picker icon to set a color yourself. Ctrl+Z undoes a step.
  5. Click Export to copy the palette as CSS variables, SCSS, a Tailwind config or JSON, or share it with Copy link.
PAIRS WELL WITH

Pairs well with

FAQ

FAQ

How do the harmony rules work?

They pick hues based on the color wheel: Analogous uses neighboring hues, Complementary uses opposite hues, Triadic spreads three hues evenly, and Mono varies one hue's lightness and saturation.

Can I share a palette?

Yes. The palette is saved in the page URL, so Copy link gives you a link that opens the exact same colors.

Can I rename the exported variables?

Yes. Change the variable name in the export window (for example brand) and the code updates to --brand-1, --brand-2 and so on.