How does locking work?

Click the lock icon on a swatch and that color stays fixed on every later generation. The first locked color becomes the anchor: the other positions get hues from the chosen harmony rule relative to it, with staggered lightness and adjusted chroma, so new colors fit the ones you kept. With nothing locked, a random anchor is used.

Why OKLCH instead of HSL?

HSL lightness doesn’t match how bright colors look — yellow and blue at 50% lightness look very different. OKLCH is perceptually uniform, so equal lightness values look about equally bright and hue rotations give balanced complementary and triadic colors. Colors outside sRGB keep their hue and lose chroma until they fit.

Where can I use the .ase file?

Adobe Swatch Exchange (.ase) files import into the Swatches panel of Photoshop, Illustrator and InDesign, and are supported by Affinity apps and many other design tools. The .gpl format is used by GIMP, Inkscape and Krita. Colors are written as RGB and named after the nearest color name.

Are my images or palettes uploaded?

No. Images are downscaled and clustered with k-means in your browser, and every calculation runs locally. The current palette lives only after the # in the address bar, and history is stored in this browser’s localStorage, which you can clear at any time.

🍭

🍭Color Palette Generator - Spacebar, Harmonies & Image Colors

Finding a set of colors that work together is often the slowest part of designing a website, poster, app or brand. This generator works like Coolors: press the spacebar to get a fresh palette, click the lock on any color you like, and the next press keeps it while the other colors are rebuilt around it. Palettes are computed in OKLCH, a perceptually uniform color space, using the harmony rule you choose — analogous, complementary, split complementary, triadic, tetradic or monochrome — or a randomly picked rule; lightness is staggered, chroma is kept pleasant and colors are kept clearly distinct. Upload a photo or illustration to pull its main colors with k-means clustering and see how much of the image each one covers. Every swatch can be moved, removed or fine-tuned with lightness, chroma and hue sliders, or by typing a HEX value. A contrast matrix shows the WCAG 2.x ratio of every text/background pair and tells you which ones are fine for body text, and a color-blind preview simulates protanopia, deuteranopia, tritanopia and achromatopsia. Each color is named after the nearest CSS named color or a common design color name. Export CSS variables, Tailwind v3 or v4 config, SCSS, JSON, a GIMP .gpl file, an Adobe .ase swatch file or a PNG palette card. The address bar always holds the current palette, so copying the link shares it, and your last 40 palettes are kept in this browser with undo and redo.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Color Palette Generator

1Pick a harmony rule and press the spacebar (or Generate); lock the colors you like and keep pressing space
2Optionally extract colors from an image, or open a swatch’s settings to fine-tune L, C and H, and check the contrast matrix and color-blind preview
3Choose an export format and copy the code, download .ase, .gpl or a PNG card, or copy the share link

FAQ

How does locking work?: Click the lock icon on a swatch and that color stays fixed on every later generation. The first locked color becomes the anchor: the other positions get hues from the chosen harmony rule relative to it, with staggered lightness and adjusted chroma, so new colors fit the ones you kept. With nothing locked, a random anchor is used.
Why OKLCH instead of HSL?: HSL lightness doesn’t match how bright colors look — yellow and blue at 50% lightness look very different. OKLCH is perceptually uniform, so equal lightness values look about equally bright and hue rotations give balanced complementary and triadic colors. Colors outside sRGB keep their hue and lose chroma until they fit.
Where can I use the .ase file?: Adobe Swatch Exchange (.ase) files import into the Swatches panel of Photoshop, Illustrator and InDesign, and are supported by Affinity apps and many other design tools. The .gpl format is used by GIMP, Inkscape and Krita. Colors are written as RGB and named after the nearest color name.
Are my images or palettes uploaded?: No. Images are downscaled and clustered with k-means in your browser, and every calculation runs locally. The current palette lives only after the # in the address bar, and history is stored in this browser’s localStorage, which you can clear at any time.