Palette Generator
Auto-generate design palettes from a base color
About this tool
Palette Generator creates a complete 6-color design palette from a single base color. Choose from complementary, analogous, triadic, or monochrome harmonies. Includes a live design preview and one-click export to CSS, SCSS, or Tailwind config.
How to use
- Pick a base color using the color picker or enter a HEX code.
- Select a harmony mode (complementary, analogous, triadic, monochrome).
- Click any color chip to copy its HEX code, or use "View source" to copy the full palette as code.
FAQ
What is the difference between complementary, analogous, and triadic?
Complementary colors are opposite on the color wheel (180°), creating strong contrast. Analogous colors are adjacent (±30°), creating harmony. Triadic colors are 120° apart, creating vibrant balance.
How are Background, Surface, and Text colors generated?
They keep the base hue (H) but adjust saturation and lightness — Background is very light, Text is very dark — ensuring a cohesive palette.
Can I use the generated code directly in my project?
Yes. The code is provided in CSS variables, SCSS variables, or Tailwind config format, ready to copy and paste.
Results are for reference only. Please verify with official sources