Color Palette Generator
Generate beautiful color palettes in one click, lock the colors you like and regenerate the rest, then export as CSS variables or JSON. Free and private — everything runs in your browser.
Tip: press the Space bar to generate a new palette. Click 🔓 on a swatch to lock that color so it survives regeneration, and 🎨 to edit it by hand.
Export palette
How to use the Color Palette Generator
- Choose a harmony and size. Pick how the colors should relate — random, analogous, monochromatic, complementary, triadic or pastel — and how many colors you want (3 to 8).
- Generate and lock. Press Generate palette (or just tap the Space bar) until a color catches your eye, then click its 🔓 button to lock it. Locked colors stay put while everything else keeps changing.
- Fine-tune and export. Use 🎨 to hand-tune any swatch and 📋 to copy a single HEX code. When the palette is ready, copy it as CSS custom properties or JSON, or download it as a file.
About this tool
This free color palette generator helps designers, developers and brand owners find color schemes fast. Instead of purely random colors, it builds palettes using color-wheel harmonies computed in HSL space: analogous palettes use neighboring hues for a calm look, complementary palettes pair opposite hues for contrast, triadic palettes balance three hues 120° apart, monochromatic palettes vary lightness of a single hue, and pastel mode keeps everything soft and light. The lock-and-regenerate workflow means you can grow a palette one good color at a time — lock what works, reroll the rest.
Everything happens locally in your browser: no sign-up, no uploads and no limits, and it even works offline once loaded. The CSS export gives you ready-to-paste :root custom properties, while the JSON export includes HEX, RGB and HSL for each color. After exporting, you can turn two palette colors into a background with the CSS Gradient Generator or verify text readability with the Contrast Checker.
Frequently asked questions
How does locking a color work?
Click the 🔓 button on any swatch to lock it (it becomes 🔒 and the swatch gets an inner outline). Locked colors are never touched when you press Generate or Space — only the unlocked swatches are replaced. In harmony modes, new colors are even built around the hue of your first locked color, so the palette stays coherent.
What do the harmony modes mean?
They are classic color-wheel relationships. Analogous picks hues that sit next to each other (harmonious, low-contrast); complementary alternates hues from opposite sides of the wheel (high contrast); triadic cycles three hues spaced 120° apart (vibrant but balanced); monochromatic keeps one hue and varies lightness from dark to light; pastel uses any hue but high lightness for a soft look; random samples freely across the wheel.
How do I use the exported CSS in my project?
Copy the CSS export and paste the :root block at the top of your stylesheet. Each color becomes a custom property like --color-1, which you can use anywhere with var(--color-1) — for example background: var(--color-1);. Rebranding later means changing only that one block.
Can I edit a single color by hand?
Yes. Click the 🎨 button on a swatch to open your system color picker and adjust just that color — the rest of the palette is untouched. Lock it afterwards if you want to keep it through further regenerations.