Color Palette Generator

Pick a base color and get a matching color palette in one click. Choose a harmony rule, such as complementary, analogous or triadic, and the tool builds five colors that work well together. Copy any HEX code or export the whole palette as CSS variables.

All Free ToolsColor ConverterCSS Gradient GeneratorInstagram Font Generator

Click a color to copy its HEX code.

Everything runs in your browser. Nothing is uploaded.

What Is a Color Palette?

A color palette is a small set of colors that look good together. Designers use palettes for logos, websites, social media posts, presentations and printed material, so everything feels like it belongs to one brand. Picking colors by eye is hard. A harmony rule, based on the position of colors on the color wheel, gives you a safe starting point.

How to Make a Palette

  1. Type a HEX code in the base color box, use the color picker or press Random color.
  2. Choose a harmony from the list. The five colors update straight away.
  3. Click a color to copy its HEX code, or choose a format under Export as and press Copy code.

Color Harmonies Explained

Complementary

Two colors on opposite sides of the color wheel. They give strong contrast, which is good for buttons and calls to action. The tool also adds a lighter and a darker version of the base color.

Analogous

Colors that sit next to each other on the wheel. They look calm and natural, and work well for backgrounds and headers.

Triadic

Three colors spaced evenly around the wheel. The result is lively and balanced, as long as you let one color lead and use the others as accents.

Tetradic

Four colors in two complementary pairs. It offers a lot of variety, so use one main color and keep the rest for small details.

Split-complementary

The base color plus the two colors on either side of its complement. It keeps the contrast of a complementary scheme but feels softer.

Monochromatic

One hue in different lightness levels. It always looks consistent and is a safe choice for minimal designs.

Tips for Using a Palette

  • Follow the 60-30-10 idea: about 60 percent of the design in a main color, 30 percent in a second color and 10 percent in an accent.
  • Check that text is readable on each background color. The color converter shows contrast ratios.
  • Do not use more than three or four colors at once. Add white, black or gray for balance.

Limits to Know About

  • The palette has five colors, generated from one base color and one rule.
  • The colors are calculated, so they are a starting point. Adjust them by eye for your own project.
  • Colors can look slightly different on different screens.

Frequently Asked Questions

How do I copy a color code?

Click the color. Its HEX code is copied and a message confirms it.

What can I export?

CSS variables, SCSS variables, a plain list of HEX codes or a JSON array.

Is this color palette generator free?

Yes. It is free to use, with no sign-up.

What is a good palette for a website?

Start with one main brand color, add one accent from a complementary or split-complementary harmony, and use neutral colors for text and backgrounds.

Does it save my palette?

No. Everything runs in your browser and nothing is uploaded, so copy the code you want to keep.

More Free Tools

Try the color converter, the CSS gradient generator, the image converter or the HTML viewer, or browse all free online tools.