Color palette generator
Pick a base color and a harmony rule to get a palette of five matching colors. Copy HEX, RGB or HSL values, or export them as CSS, SCSS or JSON.
Palette Analogous - Blue
Green
#3bf6af
Cyan
#3bdff6
Blue
#3b82f6
Blue
#523bf6
Purple
#af3bf6
Color values
| Color | HEX | RGB | HSL | Copy |
|---|---|---|---|---|
| Green | #3bf6af | 59, 246, 175 | 157°, 91%, 60% | |
| Cyan | #3bdff6 | 59, 223, 246 | 187°, 91%, 60% | |
| Blue | #3b82f6 | 59, 130, 246 | 217°, 91%, 60% | |
| Blue | #523bf6 | 82, 59, 246 | 247°, 91%, 60% | |
| Purple | #af3bf6 | 175, 59, 246 | 277°, 91%, 60% |
Color theory guide
Monochromatic
Five shades of the same hue with different lightness.
Analogous
Neighbouring hues from a close range of the wheel.
Complementary
The base color with the hue opposite it on the wheel.
Triadic
Three hues evenly spaced around the wheel.
Tetradic
Four hues arranged in a rectangle on the wheel.
Split complementary
The base hue plus the two hues beside its complement.
How the palette is created
The tool works in the HSL color model: the base color is converted to hue, saturation and lightness, then five colors are derived using the selected harmony rule. All calculations run in your browser and no data is sent to a server.
Which harmony rule should you pick?
- Monochromatic: ideal for simple brand systems and button or background shades.
- Analogous: calm and coherent, suited to designs that need a gentle color progression.
- Complementary: strong contrast that draws attention; keep one color dominant.
- Triadic and tetradic: more energy for illustrations and packaging, as long as you balance the proportions.
Export and copy
Copy any color as HEX, RGB or HSL with one click. Exporting provides ready CSS variables, SCSS variables, or a JSON file with all three values plus the color name. Palettes you save are stored only in your browser.
Frequently asked questions
Is the tool free?
Yes. The color palette generator is completely free and needs no account.
Are my palettes saved on a server?
No. Saved palettes are stored in your browser’s local storage on this device, and you can delete any palette at any time.
Can I use the colors commercially?
Yes. The generated colors are generic color values and you are free to use them in your projects.
Which export formats are available?
CSS variables, SCSS variables, and a JSON file with HEX, RGB, HSL and the color name.
Does it work offline?
Yes. Palettes are generated and exported in the browser, so no connection is needed to create colors.