Color Palette Generator

Matching Colors from One Base Color.

Loading…

Choose a base color and a rule: neighbours on the wheel, the opposite color, three or four evenly spaced colors, or lighter and darker versions of one hue. Click any swatch to copy its code.

How to use the Color Palette Generator tool

  1. Pick your base color or type its HEX code.
  2. Choose a color rule.
  3. Copy single colors, the whole list or the CSS variables, or download the palette as a picture.

Tips for the best result

  • Use one color for about 60 percent of a design, a second for 30 and the accent for 10.
  • Check text colors against their background with the Contrast Checker.

Quick facts

PriceFree
Works withHEX, CSS, PNG
Where it runsIn your browser, on your device
AccountNot needed

Frequently asked questions

What is a complementary color?

The color directly opposite on the color wheel. The pair has the strongest contrast.

How is this different from the palette-from-image tool?

That one finds the colors in a photo. This one calculates colors that go with one you choose.