Color palette generator. Colors that actually go together.

How to use the Color Palette Generator

This generator makes palettes of five colors from a random starting hue, using color theory rules such as analogous, complementary and triadic. You lock the colors you like and reroll the rest until the set works, then copy the codes or export them. It is for designers, developers and brand owners who need a quick, coherent set of colors.

Step by step

1. 1
   Pick a harmony mode

   Choose Auto, Analogous, Complementary, Triadic, Monochromatic or Shades. Choosing a mode makes a new palette straight away. Auto picks one of the other five at random each time.

2. 2
   Generate palettes

   Press Generate, or press the Space bar anywhere on the page outside a form field, to get a fresh set of five colors.

3. 3
   Lock the colors you want to keep

   Press the padlock button on a swatch, or press its number key from 1 to 5, to lock it. Locked swatches show the word locked and stay put when you generate again. On a desktop the padlock and copy buttons appear when you hover over a swatch.

4. 4
   Fine tune a color

   Click anywhere on a swatch to open your browser's color picker and adjust that color by hand. The hex code and RGB values under it update to match.

5. 5
   Copy or export

   Click a hex code or the copy button on a swatch to copy one color. Press Copy all hex for all five codes in one line, Export CSS for a palette.css file, Download PNG strip for an image, or Copy share link for a link that reopens this exact palette.

Reading the palette

• Each swatch shows its hex code in large type and its RGB values below. The label switches between dark and white text so it stays readable on light and dark colors.
• The css variables panel lists the palette as --color-1 to --color-5 inside a :root block, numbered left to right. Its Copy button copies that block.
• Shades keeps one hue and steps the lightness evenly from dark to light, while Monochromatic lets the hue drift slightly. Complementary pairs colors from opposite sides of the color wheel, and Triadic spaces them a third of the wheel apart.

Tips and common mistakes

• Lock the one color you are sure about, such as a brand color, and generate again. The new colors are built around the hue of the first locked swatch.
• Space and the number keys do nothing while focus is in a form field, and that includes a swatch's color picker right after you use it. Click an empty part of the page first.
• The PNG strip is 2000 by 840 pixels with each hex and RGB value printed on it, which suits mood boards and client decks.
• Check text contrast before you use a pair for type and background. A palette that looks good side by side can still be hard to read.

Privacy and limits

Palettes are generated in your browser and nothing is uploaded. Your last palette, its locks and the mode are saved in this browser's local storage. Copy share link puts the five codes in the part of the address after the # sign, which browsers do not send to the server.

Back to the tool

Everything a palette tool should do.

• Generate harmonious palettes instantly using color-theory modes: analogous, complementary, triadic, monochromatic, shades or Auto.
• Lock any swatch to keep it across rerolls, then regenerate the rest until the palette is perfect.
• Fine-tune colors by clicking a swatch to open the native color picker and dial in the exact shade you need.
• Copy hex or RGB values with one click per swatch, or grab all five hex codes at once.
• Export CSS variables as a ready-to-paste :root{} block, or download a labeled PNG strip for mockups.
• Share palettes via a URL that encodes all five colors and their lock state, private by construction, nothing uploaded.

Frequently asked questions.

More design tools.

Browse the full free-tool library →