How to Use
- Choose a harmony mode at the top: Random, Analogous, Complementary, Triadic, or Monochromatic.
- Click Generate Palette or press Space to create a new palette.
- Click any hex code to copy it to your clipboard instantly.
- Use the lock icon to freeze colors you like — locked colors stay when you generate again.
- Click the sliders icon to fine-tune a color's hue, saturation, and lightness.
- Click Export to get your palette as CSS variables, Tailwind config, JSON, or a plain hex list.
- Click Copy URL to share your exact palette with a link.
Harmony Modes
- Random — fully random colors for maximum variety.
- Analogous — colors next to each other on the color wheel for a harmonious, natural feel.
- Complementary — colors from opposite sides of the wheel for high contrast and energy.
- Triadic — three evenly spaced hues for a balanced, vibrant palette.
- Monochromatic — one hue at different lightness and saturation levels for a cohesive look.
Tips
- Lock your favourite color, then keep pressing Space to find combinations that work with it.
- Use the L (lightness) slider to create accessible contrast between text and background colors.
- The Tailwind export gives you named palette tokens you can drop straight into a config file.
- Share palettes via URL — the colors are encoded in the link so anyone can open and tweak them.
Frequently Asked Questions
What harmony modes are available?
Five modes are available: Random (fully random colors), Analogous (neighboring hues for a natural feel), Complementary (opposite hues for contrast), Triadic (three evenly spaced hues), and Monochromatic (one hue at varied lightness and saturation).
Can I copy a single hex color code?
Yes. Click any hex code displayed on a color swatch to copy it to your clipboard instantly.
What export formats are supported?
You can export as CSS custom properties (variables), a Tailwind CSS config object, JSON, or a plain hex list — ready to paste into your project.
Can I share a palette with someone else?
Yes. Click Copy URL to generate a shareable link that encodes your exact palette colors. Anyone who opens the link will see the same palette.
How do I keep one color while regenerating the rest?
Click the lock icon on the color swatch you want to keep, then press Space or click Generate Palette. Locked colors remain fixed while unlocked colors are regenerated.
About
Color Palette Generator helps designers and developers quickly explore and refine color combinations. It uses color theory harmony rules to produce palettes that work well together, while giving you full manual control over individual colors.
Everything runs in your browser with zero dependencies — no accounts, no tracking, no installs. Works on any modern browser, desktop or mobile.
From the build: we generate palettes in HSL rather than RGB because harmony rules — analogous, complementary, triadic — are angle math on the hue wheel, and HSL makes that arithmetic readable instead of opaque. The shareable URL encodes the palette as hex pairs in the hash fragment, which keeps the link out of the server-side request and means we never see what palettes anyone is sharing. The export formats are emitted from a single in-memory representation, so adding the next one (SCSS variables, when we get around to it) is a string template, not new logic.