Color Palette Generator

Pick a base color and generate harmonious palettes with HEX, RGB, and HSL values.

How to Use

  1. 1Pick a base color using the color picker or enter a hex code.
  2. 2Select a color harmony rule to generate a palette.
  3. 3Adjust individual colors or regenerate for new variations.
  4. 4Export the palette as CSS variables, an image, or a Tailwind config.

Frequently Asked Questions

What is a complementary color palette?

A complementary palette uses two colors that sit opposite each other on the color wheel, such as blue and orange. This creates high contrast and visual impact, making it ideal for designs that need elements to stand out.

How many colors should a palette have?

A typical design palette includes 3 to 5 colors: a primary color, a secondary color, an accent color, and neutral shades. This provides enough variety without overwhelming the design.

Can I export the palette for use in code?

Yes. Export options include CSS custom properties (variables), Sass variables, Tailwind CSS config, and JSON. You can also download the palette as a PNG swatch image.