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 facts

CSS variables are exported with --color-1, --color-2 … names for easy theming.
Analogous schemes use neighboring hues, while complementary schemes use opposites.

Related tools

These color tools pair naturally with the one you just used — keep exploring.

Gradient GeneratorBuild linear, radial and conic CSS gradients.Image Palette GeneratorExtract a full color palette from an image.Color WheelFind complementary and harmonious colors in one click.

From the blog

Guides that go deeper into what this tool does.

Color TheoryAug 28, 2026

What Colors Go Together? 12 Color Combinations That Always Work

Not sure which colors go together? Start with these 12 foolproof combinations — complementary pairs, seasonal palettes and neutral-anchored schemes with hex codes.

Color TheorySep 12, 2026

The 60-30-10 Rule: A Simple Formula for Color in Design

The 60-30-10 color rule explained — how to split any palette into a dominant, secondary, and accent color, with real hex codes and CSS for web design.

Web DesignSep 7, 2026

Best Color Combinations for a Website (Real Examples)

7 real website color combinations with hex codes — deep blue and gray, navy and gold, digital lavender, and more — plus why each one works and who it fits.