Color Palette Generator

How to use the color palette generator

Press Space to fill the screen with a new set of colors. Lock the colors you want to keep and press Space again to replace only the others. A palette holds 2 to 10 colors, and the page URL updates with every change, so any palette can be bookmarked or shared.

Press Space or click Generate for a new palette.
Click the lock icon on each color you want to keep.
Click a hex code to type an exact value, or drag a color to a new position.
Use + and − in the toolbar to set how many colors you need.
Click Export to copy or download the result.

How to export a color palette to CSS or Tailwind

Export has six options. CSS Variables copies a :root block you can paste into any stylesheet:

:root {
  --color-1: #FF6B6B;
  --color-2: #FFA500;
  --color-3: #FFD700;
  --color-4: #4ECDC4;
  --color-5: #2E86AB;
}

Tailwind Config copies a tailwind.config.js snippet that adds the colors under palette, so bg-palette-1 and text-palette-2 work right away. JS Array copies the hex codes as a JSON array. Copy URL copies a link that reopens the same palette. Download PNG saves a 1200 × 400 image of the swatches, and Download SVG saves a vector version.

How to check a palette for color blindness

Click Blindness in the toolbar and choose a simulation. The swatches redraw the way they look with protanopia, deuteranopia, or tritanopia, the milder protanomaly, deuteranomaly, and tritanomaly, or achromatopsia (no color vision at all). If two colors become hard to tell apart in a mode, change one of them before you ship the palette.

Keyboard shortcuts

Space generates a new palette and keeps locked colors.
Ctrl + Z (⌘ + Z on Mac) undoes the last change.
Ctrl + Y or Ctrl + Shift + Z redoes it.

Prefer a starting point to random colors? Browse curated color palettes or pull a palette from a photo. Before you use a pair for text, run it through the color contrast checker.

Color palette generator FAQ

Is the color palette generator free?

Yes. It runs in your browser with no account or signup, and there is no limit on how many palettes you generate, copy, or download.

How many colors can a palette have?

Between 2 and 10. Click + to add a random color and − to remove the last one. Locked colors stay where they are when you generate again.

How do I save or share a palette?

The page URL stores the current hex codes and lock states. Bookmark it, or choose Export, then Copy URL, and send the link. Opening it loads the same palette with the same colors locked.

How do I use the palette in Tailwind CSS?

Click Export and choose Tailwind Config. Paste the snippet into tailwind.config.js. Your colors are added under theme.extend.colors.palette, so classes like bg-palette-1 and text-palette-3 use them.

How are the colors picked?

Each unlocked color is a random hex value. To steer the result, lock the colors you like and click Adjust to shift saturation, brightness, and temperature across the palette. Exports use the adjusted colors.

Export Palette