Color Palette Generator
Generate harmonious 5-color palettes with random, analogous, complementary, triadic, and monochromatic modes. Copy HEX, RGB, or HSL values.
About Color Palette Generator
Choosing colors that work well together is one of the most challenging parts of visual design. This palette generator creates harmonious five-color combinations based on proven color theory principles, giving you a solid starting point for websites, apps, presentations, or any creative project.
Five Harmony Modes
Select from Random, Analogous, Complementary, Triadic, or Monochromatic generation modes. Each mode applies a different color theory rule to produce palettes that are visually balanced. Switch between modes and regenerate until you find the combination that fits your project.
Lock and Regenerate
Found a color you love but want to explore different companions? Click the lock icon on any swatch to pin it in place, then hit Generate to refresh only the unlocked colors. This workflow lets you iteratively build a palette around your key brand or accent colors.
Detailed Color Values
Click any color swatch to reveal its value in HEX, RGB, and HSL formats. Copy a single value with one click, or use the Export as CSS Variables button to get the entire palette as a block of CSS custom properties ready for your stylesheet.
Keyboard Shortcut
Press the spacebar to instantly generate a new palette without reaching for the button. This makes it fast to cycle through options until something catches your eye.
All color generation happens in your browser using HSL color math. No external services are involved, and no data leaves your device.
Frequently Asked Questions
What do the different palette modes mean?
Random generates five unrelated colors. Analogous picks colors that sit next to each other on the color wheel for a cohesive look. Complementary uses colors from opposite sides of the wheel for high contrast. Triadic uses three evenly spaced hues plus variations. Monochromatic generates shades, tints, and tones of a single hue.
How does the lock feature work?
Click the lock icon on any color swatch to keep it fixed while regenerating the rest of the palette. This is useful when you have a brand color you need to match and want to generate complementary colors around it. Multiple colors can be locked at the same time.
What color formats are supported?
Each color can be viewed in three formats: HEX (e.g. #3B82F6), RGB (e.g. rgb(59, 130, 246)), and HSL (e.g. hsl(217, 91%, 60%)). You can copy individual color values or export the full palette as CSS custom properties.
Can I use the generated palette in my project?
Yes. Use the Export as CSS Variables button to get a ready-to-paste block of CSS custom properties. You can also click any individual color to copy its value in your preferred format. All palettes are free to use in any project.