Color palette generator
Start from a color you love or let chance surprise you, then keep the shades that work.
Sealed on this device
Runs in your browser. Nothing is uploaded.
Sealed
Your palette
Settings
Builds the palette around the base color. Locked colors are kept.
Export
How it works
-
Pick a base or go random
Enter a base color and choose a harmony, or press “New palette” (or the space bar) to get a fresh one.
-
Lock what you like
Lock the colors you want to keep, then generate again: only the unlocked ones change. Click a swatch to adjust it by hand.
-
Export your palette
Copy it as CSS variables or JSON for your code, or download a PNG to share with your team.
Frequently asked questions
What do the harmonies mean?
They come from the color wheel. Analogous colors sit next to each other and feel calm. Complementary colors sit opposite and create contrast. Split complementary, triadic and square spread the colors evenly around the wheel for more lively palettes. Monochromatic uses lighter and darker versions of one hue.
How does locking work?
Select the padlock under a color to keep it. When you generate a new palette, locked colors stay exactly where they are and the new colors are chosen to go with them.
Why do the colors look so balanced?
Palettes are built in OKLCH, a color space designed around human vision. Rotating the hue there keeps lightness and colorfulness consistent, so no color looks unexpectedly bright or dull next to the others.
How do I use the palette in my project?
Copy the CSS export and paste it into your stylesheet: you get variables like --color-1 that you can use anywhere. The JSON export lists every color in HEX, RGB and OKLCH for design tokens or scripts.
Can I use the palettes commercially?
Yes. Colors aren’t owned by anyone, and the palettes you create here are yours to use freely, in personal or commercial work.