What do the lock buttons do?

Locked colors keep their value when you switch schemes, so you can blend harmony with your own custom choices.

Can I add or remove colors?

Yes. Use “Add color” to append an extra color and the trash icon on any swatch to remove it — the palette always keeps at least two colors. Click any swatch to copy its code. Added colors are included in every export.

How do I export the palette?

Copy the colors as HEX, RGB or HSL values, as CSS variables, or as a JSON array.

Palette Generator

Pick a base color and a harmony rule to build a palette. Lock the colors you like, add or remove colors, then copy the palette as values, CSS or JSON.

Base color

Scheme

Format

Generated palette

0 colors

A color palette generator builds a coordinated set of colors from a single base color using proven color-harmony rules — perfect for branding, UI and social graphics.

Frequently asked questions

Pick a base color and choose a scheme. The palette updates instantly based on that harmony rule.

Good to know

CSS variables are exported with --color-1, --color-2 … names for easy theming.
Analogous schemes use neighboring hues, while complementary schemes use opposites.
The color schemes page explains what each harmony rule is for and compares all six at once.

Tools that pair with Palette Generator

Palette Generator is one of 33 single-page tools in this workspace. These are the ones that carry the job on — the color value moves between them, so nothing gets retyped or re-uploaded.