Color Palette Generator
Press space to generate harmonious palettes. Lock favorites, regenerate the rest. Export CSS, JSON, SVG, PNG.
published
- [FREE]
- [NO_SIGNUP]
- [NO_UPLOAD]
A color palette generator for the spacebar-and-lock workflow popularized by coolors.co — but running entirely in your browser, with no signup and no ads.
The workflow
- Open the page. A default palette appears.
- Press space to roll a new palette. Every unlocked color is replaced.
- Hover the colors you like, click the 🔓 to lock them.
- Press space again. Locked colors stay; the rest regenerate.
- Repeat until the palette clicks.
- Export as CSS / JSON / SVG / PNG, or share the URL.
This is the core loop the rest of the site complements rather than copies.
Harmony modes explained
| Mode | What it does |
|---|---|
| Auto | Picks a different scheme each generation |
| Analogous | Colors within ±30° of a base hue — calm, related |
| Monochromatic | Same hue, varied lightness — minimal, sophisticated |
| Triadic | Three colors at 120° apart — balanced, vibrant |
| Complementary | Two opposite hues (+180°) — high contrast |
| Split-complementary | Base + 150° + 210° — like complementary but softer |
| Tetradic | Four colors with rectangle spacing — rich, harder to balance |
| Square | Four colors at 90° apart — bold, structured |
| Random | No constraint — pure chaos, for inspiration |
All math is done in OKLCH (perceptually uniform space) and output is sRGB hex. See the Color Picker & WCAG tool for an in-depth OKLCH explainer.
Naming colors
Hex codes are useful but unmemorable. The tool runs each generated hex through a nearest-neighbor lookup against the color-name-list dataset — ~3000 curated names from Pantone, Crayola, RAL, Behr, Sherwin-Williams, and community contributions. So a palette of #d0cfec, #6a8e7f, #989572, #c6ae82, #edc7cf reads as Lavender, Jungle Teal, Palm Leaf, Soft Fawn, Pastel Petal — much easier to discuss with a designer.
Names are approximate (nearest RGB match), not exact, and the dataset loads lazily on first generation.
Exports
- CSS variables — paste under
:rootand use asvar(--color-lavender). - JSON — drop into a design-tokens pipeline (Style Dictionary, Theo).
- SVG — pure vector swatch strip for slide decks or docs.
- PNG — 1600×800 image with hex + name on each band, downloadable.
Privacy
Static HTML → small JavaScript bundle → palette generation, naming, exports, PNG render all run in your browser. Open DevTools → Network and watch: pressing space, exporting, downloading — no requests fire. The color-name-list JSON downloads once (cached) on first use.
This matches the rest of the site: every tool runs locally, no input leaves your device.
How it compares
| bytefork.tools | coolors.co | colorhunt.co | |
|---|---|---|---|
| Runs in browser | ✓ | ✓ | ✓ |
| Spacebar regen | ✓ | ✓ | ✗ (browse mode) |
| Lock + regen rest | ✓ | ✓ Pro tier | ✗ |
| Harmony modes | 9 | 7 | curated only |
| Color naming | ~3000 | yes | limited |
| Export as code | ✓ CSS / JSON / SVG | ✓ + more formats | ✗ |
| Export as image | ✓ PNG / SVG | ✓ paid | ✓ PNG |
| Sign-in required | ✗ | for save | ✗ |
| Ad-free | ✓ | partial (Pro removes) | ✗ |
| Share via URL | ✓ (fragment) | ✓ | ✗ |
Related tools
- Color Picker & WCAG Contrast — for contrast checking, format conversion, and image palette extraction.
- CSS Unit Converter — convert px / rem / em between each other.
- Favicon & App Icon Generator — generate a full icon set once you’ve picked a brand color.
Frequently asked questions
How is this different from the Color Picker's palette mode?
The Color Picker is built around a foreground/background pair for WCAG contrast checking, with palette generation as a side panel anchored to one seed color. This dedicated tool is a coolors.co-style full-screen palette generator — press space to roll a new palette, lock favorites, swap or remove columns, and export the whole set. Use this when palette exploration is the main task; use the Color Picker when you need WCAG contrast + per-color format conversions.
How does "press space" work?
Hit the spacebar (anywhere on the page that's not a text input) and every unlocked color in the palette is replaced with a new harmonious color in your chosen mode. Locked colors stay put. This lets you fix the brand color you like and explore variations around it.
What do the harmony modes mean?
Each mode picks new colors based on a rotation pattern in OKLCH hue space. Analogous = close hues (±30°). Monochromatic = same hue, varied lightness. Complementary = base + 180°. Triadic = three colors at 120° spacing. Split-complementary = base + 150° + 210°. Tetradic = four colors with 60° / 180° / 240° offsets. Square = four colors at 90° spacing. Random = no constraint. Auto picks one randomly each generation for variety.
Why OKLCH? My HSL palette generator does the same thing.
HSL is perceptually uneven — a 30° hue rotation at blue (240°) looks like a much smaller visual shift than the same rotation at yellow (60°). OKLCH is perceptually uniform, so harmonies look balanced. The Tailwind 4, Radix Colors, and GitHub Primer design systems all moved to OKLCH for this reason. Output is always sRGB hex for compatibility — only the math is OKLCH.
How do you name the colors?
Each generated hex is matched against the color-name-list dataset (~3000 curated names from Pantone, Crayola, and community-named colors) using nearest RGB-distance. Names are approximate — "Jungle Teal" might be the closest match even if the exact hex is a few units off. The dataset loads lazily (one ~115 KB JSON download) the first time you generate a palette.
Does my palette get uploaded?
No. Generation, naming, exports, and the PNG rendering all run in your browser tab. Open DevTools → Network: dropping a palette, regenerating, exporting — no requests fire. The color-name-list JSON downloads once (anonymous static fetch, no palette data) and stays cached.
What does the Share button do?
Encodes the current palette and lock state into the URL fragment (the `#...` part). Anyone with the link opens the same palette. The fragment never leaves your browser, so sharing the link is the only way the palette reaches anyone else.
Can I edit a specific color manually?
Yes — double-click the hex value at the bottom of any column to edit it. Type any color format (hex, rgb(), hsl(), oklch(), CSS named color) and press Enter. The column updates; spacebar regen leaves your manually-edited color alone unless you also unlock it.
How many colors can I have in one palette?
Between 2 and 10. Use the + button between columns to insert, the × button on a column to remove.
What does the PNG export look like?
A 1600×800 image with one vertical band per color, hex code centered at the bottom of each band, color name underneath. Useful for embedding the palette in design briefs, slide decks, or marketing material.
Is the tool really free?
Yes. No signup, no usage limit, no watermark, no ads.