How to make a palette
Press Generate, or tap the space bar, to get a set of colors. When one of them is right, press its Lock button, and the next palette keeps it and builds the other colors around it. Click a color to copy its hex code.
Harmony rules
Colors look good together when their hues have a clear relationship on the color wheel. The Harmony box sets the rule:
| Rule | What it does |
|---|---|
| Analogous | Colors that sit next to each other on the wheel. Calm and natural. |
| Complementary | Two hues opposite each other, 180 degrees apart. Strong contrast. |
| Triadic | Three hues spaced evenly, 120 degrees apart. Lively and balanced. |
| Tetradic | Four hues, 90 degrees apart. Rich, but harder to balance. |
| Split complementary | A hue and the two hues on either side of its opposite. Contrast that is softer than a plain complement. |
| Monochromatic | One hue in steps from dark to light. Safe and elegant. |
| Random | No rule. Each color is chosen freely. |
Locking colors
When you lock a color, the harmony is built from the hue of the first locked color, and only the unlocked colors change. This lets you start from a brand color and look for partners to go with it.
Export
The export box shows the palette as a list of hex codes, as CSS custom properties that you can paste into a stylesheet, or as a JSON array. Copy it with the button below it.
Using a palette well
- A common guide is the 60-30-10 rule: about 60 percent of the design in a main color, 30 percent in a second color and 10 percent in an accent.
- Check text contrast. A color that looks good as a background may not leave enough contrast for text.
- Do not use color alone to carry meaning, because some people cannot tell certain colors apart.
For one color with all its codes, see the random color generator, and for lists of codes, the random hex color generator and the random RGB color generator.