Color Palette Generator
Generate color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
Generate color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
Generate color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
base
complement
analogous-1
base
analogous-2
base
triadic-1
triadic-2
base
tetradic-1
tetradic-2
tetradic-3
shade-1
shade-2
shade-3
shade-4
shade-5
/* Complementary */
:root {
--complementary-base: #6366f1;
--complementary-complement: #f2ef64;
}
/* Analogous */
:root {
--analogous-analogous-1: #64adf2;
--analogous-base: #6366f1;
--analogous-analogous-2: #a864f2;
}
/* Triadic */
:root {
--triadic-base: #6366f1;
--triadic-triadic-1: #f26467;
--triadic-triadic-2: #67f264;
}
/* Tetradic */
:root {
--tetradic-base: #6366f1;
--tetradic-tetradic-1: #f264ad;
--tetradic-tetradic-2: #f2ef64;
--tetradic-tetradic-3: #64f2a8;
}
/* Monochromatic */
:root {
--monochromatic-shade-1: #04052f;
--monochromatic-shade-2: #0c0e8d;
--monochromatic-shade-3: #1418eb;
--monochromatic-shade-4: #7274f3;
--monochromatic-shade-5: #d0d1fb;
}