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.
/* 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;
}Paste any color value and instantly see it in HEX, RGB, RGBA, HSL, HSLA, and HSV. Copy any format with one click.
Check foreground and background color pairs against WCAG 2.1 AA and AAA requirements for normal and large text.
Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
Runs in your browser.
Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.