Color Palette Generator
Generate beautiful color palettes from any base color. Get complementary, analogous, triadic, and monochromatic schemes, copy HEX, RGB, or HSL with one click.
Your Palette
#6467F2
HSL 239° 84% 67%
#F2EF64
HSL 59° 84% 67%
#C2C3FA
HSL 239° 84% 87%
#FAF9C2
HSL 59° 84% 87%
#7577E1
HSL 239° 64% 67%
How to create a color palette with Color Palette Generator
Go from a single color to a complete, harmonious palette in a few clicks, no design software needed.
- 01
Pick a base color or generate randomly
Enter a hex color code, use the color picker, or click 'Generate' to get a random starting palette. The tool builds a harmonious set of colors around your choice.
- 02
Choose a harmony rule
Select a color harmony (complementary, analogous, triadic, split-complementary, or monochromatic) to control the relationship between the colors in your palette.
- 03
Adjust and lock individual swatches
Click any swatch to fine-tune its hue, saturation, or lightness. Lock colors you want to keep, then regenerate the rest until the palette feels right.
- 04
Copy or export your palette
Copy individual hex codes with one click, or export the full palette as a CSS variables snippet, JSON, or image file ready to drop into your project.
What people use it for
Color palettes are the foundation of any visual project. Here are the most popular ways designers and developers use this tool.
UI and web design
Build a consistent color system for buttons, backgrounds, and typography that looks polished across light and dark modes.
Brand identity
Develop a primary and secondary color palette for logos, marketing materials, and brand guidelines that stay cohesive across every touchpoint.
Illustration and digital art
Generate harmonious color sets for character design, scene illustration, or concept art without spending time on color theory.
Interior and product design
Explore color combinations for room palettes, furniture finishes, or product colorways before committing to physical samples.
Social media graphics
Create on-brand color palettes for Instagram posts, story templates, and presentation decks that look intentional and consistent.
CSS design tokens
Export palettes directly as CSS custom properties to use as design tokens in your component library or Tailwind config.
How each harmony picks its colours
Every palette has five colours built from your base colour's hue, saturation and lightness. The modes rotate the hue around the colour wheel by fixed angles, and some add lighter versions:
| Mode | Hues used (relative to the base) | Extra variation |
|---|---|---|
| Complementary | 0° and 180° | Lighter versions of both, plus a less saturated base |
| Analogous | −30°, −15°, 0°, +15°, +30° | None; all at the same lightness |
| Triadic | 0°, 120° and 240° | Lighter versions of the two new hues |
| Split-complementary | 0°, 150° and 210° | Lighter versions of the two new hues |
| Monochromatic | 0° only | Lightness −30, −15, 0, +15 and +30 points |
So a blue at 217° gives an orange near 37° in complementary mode, and blues from 187° to 247° in analogous mode. Complementary and triadic palettes have the most contrast and suit accents and calls to action; analogous and monochromatic palettes are calmer and work well for backgrounds and data charts.
Turning a palette into a usable scheme
- Pick one colour as dominant, one as secondary and use the rest sparingly for accents; using all five equally looks busy.
- Check text against background colours with a contrast checker. WCAG AA needs at least 4.5:1 for normal text, which bright mid-tones often miss on white.
- Lightness changes are capped at 5% and 95%, so very dark or very light base colours give flatter palettes. Start from a mid-tone for the most range.
- The random button picks any colour, including muddy ones. Run it a few times, then adjust the base colour by hand.
Frequently asked questions
Common questions about generating and using color palettes online.