How to use the Color Palette Generator
- Enter your base color as HEX, RGB, HSL or a CSS name, or pick it with the swatch.
- Choose a harmony such as Complementary, Triadic or Monochromatic to build five matching colors.
- Press Space or Random palette for fresh ideas. Lock any color you want to keep first.
- Copy single HEX codes, or export the palette as CSS variables, JSON or a PNG image.
Features
- Six classic color-wheel harmonies
- Random palettes with the Space bar
- Lock colors you like while you explore
- Use any swatch as the new base color
- Export CSS variables, JSON or a PNG image
- Palette saved on this device between visits
Color harmonies on the wheel
A color harmony is a set of hues chosen by their positions on the color wheel. Because the relationships are geometric, they work with any starting color, which is why designers have relied on them for over a century. Each palette here has five swatches: the colors of the harmony plus lighter and darker versions of the base so you have something to use for backgrounds and text.
| Harmony | Hues used | Feel |
|---|---|---|
| Complementary | Base and the opposite hue (180°) | High contrast, energetic |
| Analogous | Neighbors within 40° either side | Calm, natural, cohesive |
| Triadic | Three hues 120° apart | Balanced and vibrant |
| Tetradic (square) | Four hues 90° apart | Rich, needs one dominant color |
| Split complementary | Base plus the two hues beside its opposite (150° and 210°) | Contrast with less tension |
| Monochromatic | One hue at five lightness levels | Elegant, minimal, easy to apply |
Using a palette well
A popular guideline from interior design, the 60-30-10 rule, works on screens too: let one color cover about 60% of the space (often a light neutral or a pale tint), a second color about 30% and an accent the remaining 10% for buttons, links and highlights. Complementary and triadic palettes look busy if every color gets equal space, so pick one to lead.
Add neutrals. Few real interfaces use five saturated colors; most combine one or two from the palette with near-white backgrounds and near-black text. The monochromatic harmony is a quick way to get those tints and shades in your brand hue.
Worked example
Suppose your brand color is a violet, #5b4cf0 (hue 245°). Its complement sits at 65°, a warm yellow-green, so a complementary palette pairs violet buttons with yellow-green highlights. A triadic palette adds hues near 5° (a coral red) and 125° (a green). An analogous palette stays between blue-violet and purple, which feels calmer and suits a finance or productivity product.
Exporting your palette
- CSS variables drop straight into a stylesheet: reference them with
var(--color-1), and rename them to roles such as--brandor--accentonce you settle on a design. - JSON lists each color as HEX and RGB for design tokens, scripts or documentation.
- PNG creates an image with the swatches and their codes to share with a client or drop into a mood board.
Check readability
A palette can look beautiful and still be hard to read. Before you choose text and background pairs, test them in the Contrast Checker. To fine-tune a single swatch, open it in the Color Picker, and to blend palette colors into a background, try the CSS Gradient Generator.
Frequently asked questions
What is a complementary color?
The hue directly opposite on the color wheel, 180° away. Violet and yellow-green, blue and orange, and red and cyan are complementary pairs. Together they create strong contrast.
How do I keep a color I like?
Click the lock icon on that swatch. Locked colors stay in place when you switch harmonies, change the base color or press Space for a random palette.
Why does the Space bar not generate a palette?
Space only works while the palette is visible and you are not typing in a box or focused on a button, so it never interferes with scrolling or typing elsewhere on the page.
How do I use the exported CSS variables?
Paste the :root block into your stylesheet, then use the colors anywhere with var(--color-1), var(--color-2) and so on.
Can I use these palettes in commercial projects?
Yes. The palettes are generated on your device and you are free to use them in any personal or commercial work.