Color Palette Generator
Generate color harmonies from any base color. Export as CSS variables, Tailwind config, SCSS, or JSON.
Base Color
H239
S84
L67
Complementary
Analogous
Triadic
Tetradic
Monochromatic
CSS Variables
/* 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;
}Related Tools
3 Tools · See Also
- 01·COLColor Format Converteraccent · #3A86FF
Paste any color value and instantly see it in HEX, RGB, RGBA, HSL, HSLA, and HSV. Copy any format with one click.
- 01·COLContrast Checkeraccent · #1F1F1F
Check foreground and background color pairs against WCAG 2.1 AA and AAA requirements for normal and large text.
- 02·CSSGradient Generatoraccent · #E91E63
Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
✱ Privacy
Runs in your browser.
Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.
Local-only