Color Palette Generator
Create harmonious color palettes with an interactive color wheel.
Click to copy · Double-click a color to set it as the base color
The color wheel and all harmonies update live
Export
/* CSS Custom Properties */ :root { --color-1: #6366f1; --color-2: #f26467; --color-3: #67f264; }
Frequently Asked Questions
What is color harmony and why does it matter?
Color harmony refers to aesthetically pleasing color combinations based on their positions on the color wheel. Harmonious palettes create visual balance and make designs feel intentional. Complementary colors (opposites) provide high contrast, analogous colors (neighbors) feel cohesive, and triadic colors offer vibrant variety while staying balanced.
How do I choose the right palette type for my project?
For bold call-to-action designs, use Complementary for strong contrast. For calm, unified layouts like dashboards, use Analogous or Monochromatic. Triadic works well for playful brands or illustrations. Split-Complementary is a safer alternative to Complementary — it keeps contrast without being as jarring. Tip: start with Triadic and adjust the extra colors slider for versatility.
What do the WCAG contrast ratios mean?
WCAG (Web Content Accessibility Guidelines) contrast ratios measure readability between foreground and background colors. A ratio of 4.5:1 or higher is 'AA' compliant for normal text, 3:1 is sufficient for large text, and 7:1 meets the stricter 'AAA' level. This generator shows these ratios so you can verify your palette is accessible before using it.
How can I use the generated palette in CSS or Tailwind?
Use the Export section to switch between output formats. For CSS, you get custom properties (e.g. --color-1: #6366f1) you can reference anywhere. For Tailwind, you get a config snippet to paste into tailwind.config.ts. JSON, JavaScript, TypeScript, Python, Swift, and Kotlin formats are also available for non-web projects.
Can I fine-tune individual colors after generating a palette?
Yes. Double-click any swatch to promote it to the base color, then adjust hue, saturation, or lightness on the wheel. Lock the saturation (🔒 icon) to keep vibrancy constant while rotating through hues. You can also type a precise hex value into the color input to get an exact match, and use the Extra Colors slider to fill gaps between harmony stops.