How to generate a color palette
- Pick a scheme such as Analogous or Pastel, and choose how many colors you want, from 3 to 8.
- Click Generate or press the space bar for new colors. Click Lock on a color to keep it while the others change.
- Type a hex code over any color to change it, and drag a color sideways to move it. Copy one color with its Copy button, or the whole palette as hex codes, CSS variables or JSON. Copy link and Download PNG save or share it.
The schemes explained
| Scheme | What you get |
|---|---|
| Random | Unrelated colors of any hue, strength and lightness. Good for inspiration, but they won’t always go together. |
| Analogous | Neighbors on the color wheel, such as blue, teal and green. Calm and easy to use together. |
| Complementary | A color and its opposite on the wheel, such as blue and orange, taking turns. Strong contrast for accents and buttons. |
| Triadic | Three colors spaced evenly around the wheel, a third of the way apart. Lively but still balanced. |
| Shades | One hue in different strengths, from dark to light. Safe for interfaces and charts. |
| Pastel | Soft, light colors from all around the wheel. Good for backgrounds, cards and illustrations. |
Analogous, Complementary, Triadic and Shades run from dark on the left to light on the right, so every palette has a color dark enough for text and one light enough for a background.
Using a palette in a project
A common guideline is 60-30-10: one color for most of the space, a second for about a third, and the brightest for small accents like buttons and links. Check that text has enough contrast against its background before you commit. The color converter shows contrast ratios against white and black, and hex to RGB gives the values some apps ask for. After copying the CSS variables, rename –color-1 and the rest to something meaningful, like –brand or –accent.