Color Palette Generator

Pick a base color and generate a full 10-step shade scale or color harmonies (complementary, triadic, analogous). Export as CSS custom properties.

:root {
  --color-50: #F1F6FD;
  --color-100: #DFEAFB;
  --color-200: #BAD2F7;
  --color-300: #83ADF1;
  --color-400: #518CEC;
  --color-500: #4786EB;
  --color-600: #1968E6;
  --color-700: #1453B8;
  --color-800: #0F3E8A;
  --color-900: #0A295C;
}

Frequently Asked Questions

What is a color palette generator?

It takes a base color and generates a full range of shades (50–900, similar to Tailwind) and color harmonies (complementary, triadic, analogous).

Can I export the palette as CSS?

Yes. In Shades mode, click 'Copy CSS' to get CSS custom properties (--color-50 through --color-900) ready to paste into your stylesheet.

What color harmonies are available?

Complementary, triadic (×2), analogous (×2), and split-complementary (×2) — 8 swatches total in Harmony mode.

How do I pick the base color?

Use the color picker or type a HEX code (e.g. #3B82F6) directly into the text input.