134 · Design & Web

Color Palette Generator

Pick a base colour and a harmony to get a palette. Click a swatch to copy its hex code.

#4f46e5

How to use the color palette generator

  1. Pick a base colour, or generate a random one.
  2. Choose a harmony.
  3. Click swatches to copy them, or copy the whole palette.

Colour harmonies

  • Analogous: neighbours on the colour wheel; calm and cohesive.
  • Complementary: opposites; high contrast for accents.
  • Triadic: three evenly spaced colours; lively but balanced.
  • Tints and shades: one hue from very light to very dark, ideal for UI design systems.

Examples

#4f46e5, analogous

Blues to violets

#4f46e5, tints and shades

--color-50 … --color-900

Questions

Are the colours accessible?

A palette doesn’t guarantee readable text. Check text and background pairs with the contrast shown in the <a href="/tools/css-button-generator/">CSS button generator</a>.