Color Palette Generator
Generate harmonious color palettes from a base color. Export as HEX codes or CSS custom properties.
#6467f2
#f26467
#67f264
How to Use
- Pick a base color using the color picker or enter a HEX code. The generator will create a complete palette based on color theory rules — choose from complementary, analogous, triadic, tetradic, or monochromatic harmony modes.
- Browse the generated palette swatches. Each swatch shows its HEX value and a preview chip. Hover to see the color's role (primary, secondary, accent, background) and its suggested usage in UI design.
- Export your palette by copying individual HEX codes or the full set at once. You can also copy all colors as a CSS `:root` block with custom property names — ready to paste into your design system or stylesheet.
Frequently Asked Questions
- What color harmony rules are available?
- The generator supports five harmony modes: Complementary (two colors opposite each other on the color wheel), Analogous (colors side-by-side), Triadic (three evenly-spaced colors), Tetradic (two complementary pairs), and Monochromatic (variations of a single hue). Each creates a different visual mood.
- Can I generate palettes for dark mode?
- Yes — the palette includes light and dark variants of your base color. Use the monochromatic mode to create a full range from lightest tint to darkest shade, which maps naturally to light and dark theme tokens.
- How do I use the generated palette in my project?
- Copy the CSS custom properties block and paste it into your `:root` selector. Each color gets a semantic name like `--color-primary` or `--color-accent`. You can also copy individual HEX values for use in design tools like Figma or Sketch.