Color Palette Generator

Generate five-color UI palettes from light to dark. Press Space for new ideas, lock the colors you like, pick a harmony, and copy CSS variables, Tailwind v4 or JSON.

or press Space

Background

hsl(258 56% 96%)

Surface

hsl(255 76% 85%)

Accent

hsl(256 82% 68%)

Primary

hsl(256 59% 50%)

Ink

hsl(257 52% 16%)

Code

:root {
  --color-background: #f4f1fb;
  --color-surface: #cbbdf6;
  --color-accent: #8f6bf0;
  --color-primary: #5b34c9;
  --color-ink: #20143f;
}