🛝Toolio
About Contact

🎨 Color Palette Generator

Instantly generate beautiful 5-color palettes using harmony modes like analogous, complementary, and triadic — or pull a palette straight out of any image. Lock the colors you like, then export the set as a HEX list, CSS variables, Tailwind config, or JSON. It's completely free and runs entirely in your browser with no uploads or login. Looking for a free Coolors alternative? Toolio’s version is completely free and needs no sign-up.

Press Spacebar to generate a new palette.

Private by design. This tool runs entirely in your browser — nothing you enter is uploaded or stored, and it works offline.

About

This tool builds 5-color palettes in two ways: generate them from four harmony modes (Random, Analogous, Complementary, Triadic), or extract the five dominant colors from any image you choose — the image is processed locally with median-cut quantization and never uploaded. Lock individual swatches to keep them across regenerations, then copy any single HEX code or export the whole palette in the format you need: a plain HEX list, CSS custom properties, a Tailwind colors snippet, or a JSON array. Everything runs in your browser, so no color or image data ever leaves your device — no server, no account. Each swatch also shows its nearest PANTONE Solid Coated number (for example, PANTONE 185 C), so a generated or image-derived palette can move straight toward a print workflow.

How to use

  1. Choose a harmony mode — Random, Analogous, Complementary, or Triadic — from the Mode dropdown.
  2. Click Generate (or press Spacebar) to create a fresh 5-color palette.
  3. Click the lock icon on any swatch to freeze that color while regenerating the rest.
  4. Click Copy HEX on a swatch to copy that color's HEX code to your clipboard.
  5. Use Copy All to export all five HEX codes at once for use in your design tool or code.
  6. Click 'From image' and choose a photo — the tool pulls its five dominant colors into the palette, all locally.
  7. Pick an export format — HEX list, CSS variables, Tailwind, or JSON — and click Copy to drop the palette into your project.

FAQ

Is this tool free to use?
Yes, completely free — no subscription, no account, and no hidden limits. Just open the page and start generating palettes.
Do you upload my color data to a server?
No. The entire tool runs in your browser using JavaScript. Nothing is sent to any server — your palette data stays in your browser's localStorage only.
Does the Color Palette Generator work offline?
Yes. Once the page is loaded, it works fully offline. There are no external API calls or CDN dependencies required.
What is the difference between the harmony modes?
Random picks five unrelated hues. Analogous groups five hues close together on the color wheel for a calm, cohesive look. Complementary pairs hues from opposite sides of the wheel for high contrast. Triadic distributes three hue families 120 degrees apart for vibrant, balanced palettes.
Can I keep a color I like while regenerating the rest?
Yes. Click the lock icon on any swatch to freeze it. Locked swatches are skipped during generation so you can iterate freely around your favourite colors.
Can I build a palette from an image?
Yes. Click 'From image' and pick a photo; the tool extracts its five dominant colors using median-cut quantization, entirely in your browser — the image is never uploaded.
What export formats are available?
Copy the palette as a plain HEX list, CSS custom properties (:root variables), a Tailwind colors snippet, or a JSON array — ready to paste into your code or design tool.
Can I see Pantone numbers for the palette?
Yes. Each of the five swatches shows its HEX code and the nearest PANTONE Solid Coated match (e.g. PANTONE 185 C); click the Pantone label to copy it. Matches use the perceptual CIEDE2000 formula and are an approximate sRGB reference, since Pantone spot inks are defined physically rather than by a screen value.