Color Palette Generator
Generate palettes around any color, lock the ones you like and export them.
Color Palette Generator: the tool
Settings
A harmony chosen at random each time.
Palette
dodgerblue
palevioletred
yellowgreen
cornflowerblue
plum
Lock the colors you like, then generate again: locked colors stay and the rest change.
| Color | HEX | RGB | HSL | HSV | Nearest name |
|---|---|---|---|---|---|
| Color 1 | dodgerblue | ||||
| Color 2 | palevioletred | ||||
| Color 3 | yellowgreen | ||||
| Color 4 | cornflowerblue | ||||
| Color 5 | plum |
Check and keep
How it looks with color-vision deficiency
A model of how these colors tend to look, not a diagnosis. People and screens differ.
- Typical vision
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Achromatopsia: color 1 and color 2 may look alike. Do not rely on color alone to tell them apart.
Export as code or data
Letters, digits and dashes.
Your saved palettes
Kept in this browser only, up to 40 palettes. Nothing is sent to a server and nothing is shared between your devices.
No palette saved yet. Make one above and press Save palette.
Press Generate palette and get a row of colors that belong together. Choose a harmony such as complementary, triadic or analogous, build the palette around a color you already have, and lock the colors you like so that the rest change while those stay. Every palette comes with HEX, RGB, HSL and HSV values, a color-blindness preview and exports for CSS, Tailwind and more.
How it works
A palette is built on the color wheel. The first locked color, or a random one when nothing is locked, is the anchor. The other colors take their hues at fixed angles from it: 180 degrees for complementary, 120 and 240 for triadic, 150 and 210 for split complementary, and so on. Auto picks one of these harmonies at random each time, and Random colors skips them and draws unrelated hues.
Saturation and lightness vary a little from color to color, as a designer would vary them by hand, so a palette is not a set of flat copies of one swatch. When a hue position comes round again, as it does in a ten-color triadic palette, the lightness steps up or down so that the repeats are not twins. No two colors in a palette are ever the same.
Locking a color keeps it exactly where it is, and the harmony is then measured from the first locked color. Changing the number of colors keeps the colors that are there and draws new ones to go with them. Edit opens the system color picker for one swatch when you want to nudge a color by hand.
Each color is shown with the nearest CSS color name, measured in OKLab, a color space built so that equal distances look about equally different. The same measure drives the color-blindness preview, which flags pairs of colors that look different to most people but nearly alike with a deficiency.
How to use it
- Choose a harmony, or leave it on Auto.
- Press Generate palette, or type a starting color and press Build around this color.
- Press Lock on the colors you want to keep, then generate again: the locked ones stay and the rest change.
- Press a HEX code or any value in the table to copy it, or open Export to take the whole palette as CSS, Tailwind, JSON or an image.
- Press Save palette to keep it in this browser, and open it again later from your saved palettes.
Example
A triadic palette of five colors built around #3B82F6, drawn with a fixed sequence, with the hue of every color. Your own palettes will differ each time you generate.
What was set
- Harmony
- Triadic
- Starting color
- #3B82F6 (locked)
- Colors
- 5
What came out
- Color 1
- #3B82F6 · hue 217° · dodgerblue
- Color 2
- #DE4982 · hue 337° · palevioletred
- Color 3
- #8DD760 · hue 97° · yellowgreen
- Color 4
- #81A9E9 · hue 217° · cornflowerblue
- Color 5
- #E2A6BD · hue 337° · plum
Good to know
- A palette has from 2 to 10 colors.
- The harmonies are worked out on the HSL color wheel that CSS and design tools use, not the red, yellow and blue wheel of painters, so the complement of red is cyan and not green.
- A generated palette is a starting point. It does not check that its colors work for text or that they stay apart for everyone, so test the pairs that matter with the contrast checker and the color-blindness preview.
- You can save up to 40 palettes. They live in this browser only, and are lost if you clear this site's data.
Questions people ask
How do I generate a palette from one color?
Type or pick the color in Starting color and press Build around this color. It is placed first and locked, and the other colors are drawn at the angles of the harmony you chose. To keep a color in another position, press Lock on that swatch instead.
What does locking a color do?
A locked color is never changed by Generate palette, by a new harmony or by a change in the number of colors. The harmony is measured from the first locked color, so locking a color you like is also the way to steer the others toward it.
Can I share a palette with someone?
Yes. Copy link puts the colors in the part of the address after the # sign. Browsers never send that part to a server, so whoever opens the link sees the same palette, and nothing is stored on our side.
Which harmony should I choose?
Analogous and monochromatic palettes feel calm and are hard to get wrong. Complementary and triadic ones are livelier and work best when one color leads and the others support it. Auto is a good way to browse until something catches your eye.
How many colors should a palette have?
Most interfaces need one main color, one or two supporting colors and a few neutrals, so five is a common size. Start small: a palette with fewer colors is easier to apply consistently, and you can always add more.