Colour Palette Generator

Pick a base colour and get a full scale plus matching harmonies.

Base colour

Hex value

Output format

Click any swatch to copy it in the selected format.

Tints & shades

Complementary

Analogous

Triadic

Split complementary

CSS variables

:root {
  --brand-100: #EBEBFA;
  --brand-200: #C6C6F1;
  --brand-300: #A1A1E8;
  --brand-400: #7C7CDE;
  --brand-500: #5858D5;
  --brand-600: #3333CC;
  --brand-700: #2A2AA7;
  --brand-800: #212183;
  --brand-900: #17175E;
  --brand-1000: #0E0E39;
}

Tailwind theme

@theme {
  --color-brand-100: #EBEBFA;
  --color-brand-200: #C6C6F1;
  --color-brand-300: #A1A1E8;
  --color-brand-400: #7C7CDE;
  --color-brand-500: #5858D5;
  --color-brand-600: #3333CC;
  --color-brand-700: #2A2AA7;
  --color-brand-800: #212183;
  --color-brand-900: #17175E;
  --color-brand-1000: #0E0E39;
}