All tools

Color Palette Generator

How to generate a color palette, lock colors and export it as CSS or PNG

This color palette generator creates a set of 3 to 8 matching colors that you can shuffle, lock, share by link and export. Select Generate my palette or press the space bar and every unlocked swatch changes, following the harmony you choose: Random, Monochrome, Analogous, Complementary or Triadic. It runs in your browser, so a palette is ready to copy as HEX codes within seconds.

Generate a palette and keep the colors you like

Each swatch shows its HEX code, and selecting a swatch copies the code. The lock icon on a swatch keeps that color fixed while the others change, so shuffle until a color you want appears, lock it and keep going. The space bar works too, except while a button, field or dropdown has focus. Colors sets the size from 3 to 8 and starts at 5. Adding colors keeps your current ones and only generates the new slots, and reducing the count trims from the end.

  1. Select Generate my palette or press the space bar.
  2. Lock each color you want to keep.
  3. Generate again until the remaining colors suit them.
  4. Select a swatch to copy its HEX code.

Build a palette around your brand color

Lock the swatch that holds your brand color, then choose a harmony. In Monochrome, Analogous, Complementary and Triadic the first locked color sets the hue for the scheme: Monochrome varies lightness on one hue, Analogous uses neighboring hues, Complementary adds the opposite hue and Triadic spaces three hues 120 degrees apart. Random only keeps the locked colors and fills the rest freely. To see how the hues of a scheme relate, explore them on a color wheel. To start from exact codes, open the page with ?colors= followed by at least three HEX codes without the #, separated by hyphens.

Share a palette with a link or keep it for later

The palette is written into the page address as you work, in the form ?colors=3b82f6-f6af3c-0f172a, without adding browser history entries. Copy the link from the address bar and anyone who opens it sees the same colors, which they can shuffle or export themselves. Bookmark the link to keep a palette. The link itself carries the colors, and locks are not part of it, so lock colors again after you reopen it.

Export a palette as a PNG strip, CSS variables or JSON

Open the Export tab. PNG strip downloads an image with one block per color, labeled with its HEX code, which suits mood boards and slides. CSS variables downloads a .css file with a :root block that names the colors --color-1, --color-2 and so on, ready to paste into a stylesheet. JSON lists every color with its hex, rgb and hsl values. Check the contrast of each color before you use it behind text.

Before you use a generated palette

  • Check text on each background for contrast, because generated colors are not tested for it.
  • Let one color lead and use the others as accents, and read what that main color communicates in color meanings.
  • Copy the share link or download the CSS before you leave the page.
  • Rename the numbered CSS variables to names that describe their role.
  • Look at the colors in a real layout, not only as strips.

To start from colors already in a photo or logo, sample exact pixels for HEX and RGB values, and to see what each swatch tends to suggest, read its meaning and cultural associations. After exporting the palette as a PNG, preview it in black and white to check that light and dark swatches still stand apart, or study the harmony rules on an interactive wheel.

What you can do with Color Palette Generator

Review the main capabilities before you begin.

  • Generate color palettes with harmony modes
  • Lock colors you like and reroll the rest
  • Build palettes of 3 to 8 colors
  • Export as CSS variables for your project
  • Save palettes as PNG or JSON
  • Share brand color schemes with your team

Settings reference

Available controls for Color Palette Generator.

Settings

HarmonyDropdown
Chooses the color-wheel rule for new palettes — random hues, single-hue monochrome shades, neighboring analogous hues, opposite complementary hues, or three evenly spaced triadic hues; locked swatches anchor the scheme.Options: RandomMonochromeAnalogousComplementaryTriadic
ColorsDropdown
Sets how many swatches the palette contains, from 3 to 8 (starts at 5); shrinking keeps the first colors and growing adds new slots without changing existing swatches.Options: 345678

Palette

GenerateOne-click
Reshuffles every unlocked swatch to produce a fresh palette in the current harmony mode; pressing the space bar does the same.
LockOn / Off
Locks an individual swatch so its color is kept when you generate again; harmony modes build the rest of the scheme around your locked colors.
Free to use · No signup required · Without watermarkUploads are encrypted in transitRemoved under our retention policy

Frequently Asked Questions

How Color Palette Generator helps you get it done

Real problems it solves every day — for businesses, creators, and everyday tasks. Find the use case that fits you and start.

Marketing

Brand color exploration

Lock your existing brand color and shuffle harmony modes around it to find matching secondary and accent colors, then export the result as CSS variables for your style guide.

For Creators

Website and app design

Generate 5-color schemes until one clicks, copy individual hex codes for your components, and share the palette URL with developers so everyone builds from the same colors.

Use Case

Presentations and social templates

Download the PNG strip to keep a visual reference of your palette inside slide decks, Canva templates, or client mood boards.

For Creators

Art, craft, and interior projects

Use analogous or monochrome modes to build calm, coordinated palettes for room schemes, knitting or quilting projects, and illustration work.

Watch each transformation land

Every photo crosses the slash untouched and comes out the other side finished.