What export formats are available?

CSS custom properties, Tailwind config, and JSON design tokens.

Color Palette Generator Online Free

New

Generate harmonious color palettes from a base color. Export as CSS variables, Tailwind config, or JSON.

Processed in your browser
Privacy-first
No account required
Nothing uploaded by default

Base color

Complement#960d18

10#042f2b

20#085e57

30#0c8d82

40#10bcad

50#14ebd9

60#43efe0

70#72f3e8

80#a1f7f0

90#d0fbf7

CSS variables

:root {
  --color-10: #042f2b;
  --color-20: #085e57;
  --color-30: #0c8d82;
  --color-40: #10bcad;
  --color-50: #14ebd9;
  --color-60: #43efe0;
  --color-70: #72f3e8;
  --color-80: #a1f7f0;
  --color-90: #d0fbf7;
}

JSON tokens

{
  "10": "#042f2b",
  "20": "#085e57",
  "30": "#0c8d82",
  "40": "#10bcad",
  "50": "#14ebd9",
  "60": "#43efe0",
  "70": "#72f3e8",
  "80": "#a1f7f0",
  "90": "#d0fbf7"
}

Examples

Generate from hex

Creates a full palette with shades and tints.

#6366f1

How Color Palette Generator works

Generate harmonious color palettes from a base color. Export as CSS variables, Tailwind config, or JSON. Runs locally in your browser.

1. Add input. Paste, type, or upload. Use a sample if you just want to see it work.
2. Run it. Processing happens in the browser.
3. Copy or download. Take the output and close the tab.