# Color Palette Generator - Spacebar, Harmonies & Image Colors

> Press space for new color palettes, lock favorites, use OKLCH harmonies or image colors, check contrast and color blindness, export CSS, Tailwind, ASE.

- URL: https://qilingtools.com/en/palette-generator
- Category: Developer Tools (https://qilingtools.com/en/dev)
- Tags: [Design](https://qilingtools.com/en/tags/design), [Developer](https://qilingtools.com/en/tags/dev), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

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.

## How to use

1. Pick a harmony rule and press the spacebar (or Generate); lock the colors you like and keep pressing space
2. Optionally 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
3. Choose an export format and copy the code, download .ase, .gpl or a PNG card, or copy the share link

## Features

- Spacebar generation with locked colors kept
- OKLCH harmonies: analogous, complementary, split, triadic, tetradic, monochrome
- Palette from image with k-means and color share
- Per-swatch lightness, chroma and hue adjustment
- WCAG contrast matrix and four color-blindness simulations
- Nearest CSS and common color names
- Export CSS, Tailwind, SCSS, JSON, GPL, ASE and PNG cards
- Shareable links, undo/redo and local history

## 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.

## Related tools

- [JSON Formatter](https://qilingtools.com/en/json): Free online JSON formatter: beautify or minify, validate with the exact line and column of any error, browse a collapsible tree, sort keys and escape strings.
- [Base64 Encode/Decode](https://qilingtools.com/en/base64): Free online Base64 encoder and decoder: UTF-8 safe, optional URL-safe variant, convert text to Base64 and back in real time. Processed locally, never uploaded.
- [URL Encode/Decode](https://qilingtools.com/en/url-encode): Free online URL encoder and decoder with encodeURIComponent and encodeURI modes. Escapes Chinese, spaces and special characters. Real-time and local, no upload.
- [JWT Decoder](https://qilingtools.com/en/jwt): Free online JWT decoder: decode the header and payload of a JSON Web Token, show expiry and issued-at times, all locally without uploading the token.
- [Timestamp Converter](https://qilingtools.com/en/timestamp): Free online Unix timestamp converter: convert timestamps and dates, auto-detect seconds or milliseconds, and show local, UTC, ISO 8601 and relative time.
- [Hash / Checksum](https://qilingtools.com/en/hash): Free online hash calculator: SHA-1, SHA-256, SHA-384 and SHA-512 of text or any file through the browser crypto API. Files never leave your device.
- [UUID Generator](https://qilingtools.com/en/uuid): Free online UUID generator: create RFC 4122 UUID v4 in bulk with a cryptographic RNG. Options for uppercase, no hyphens and braces, with one-click copy.
- [Base Converter](https://qilingtools.com/en/base-convert): Free online number base converter: convert between binary, octal, decimal, hexadecimal and any base 2–36. Uses BigInt for huge integers, computed locally.