Generate beautiful palettes instantly. Press Space to randomize. Lock colors to keep them.
Base Color:
How to Use the Palette Generator
Press the Generate button or hit the Space key to create a new palette. Choose a palette type from the row of buttons to control the color harmony: Random picks any five colors, Complementary generates colors from opposite sides of the color wheel, and Analogous creates colors that sit next to each other for a cohesive look.
Lock any swatch by clicking the lock icon below it. Locked colors stay fixed while the rest regenerate. This lets you build a palette around a specific brand color or a color you particularly like.
For the harmony-based types (Complementary, Analogous, Triadic, Monochromatic), set a Base Color using the color picker. The generator will produce a palette that harmonizes around that starting hue.
Click any HEX code in the palette to copy it. Use Copy All HEX to get all five codes at once separated by commas. Download CSS Variables exports a .css file with all five colors as CSS custom properties ready to paste into any project.
Frequently Asked Questions
A complementary palette uses two colors that are directly opposite each other on the color wheel, like blue and orange or purple and yellow. This creates high visual contrast and is commonly used in logos and advertising to make elements stand out.
Start with a base color and use a color harmony rule: analogous (neighbors on the wheel) for calm, cohesive palettes; complementary (opposites) for vibrant contrast; triadic (three evenly spaced colors) for dynamic, energetic palettes. Monochromatic (one hue, different lightness) is easiest to work with for beginners.
The 60-30-10 rule is a design principle where 60% of a design uses the dominant color, 30% uses a secondary color, and 10% uses an accent color. This ratio creates visual hierarchy and balance. Your palette generator can help you identify which colors from a generated palette should fill each role.
Use the Download CSS Variables button to get a .css file with all five colors as CSS custom properties (--color-1 through --color-5). You can import this file into any CSS project. Alternatively, use Copy All HEX to get a comma-separated list for pasting into design tools like Figma.
There is no single best color scheme, but successful websites typically use one dominant brand color, a neutral background (white, off-white, or dark), and one or two accent colors used sparingly. Ensure sufficient contrast between text and backgrounds for accessibility -- use the Contrast Checker tool to verify.