Color Palette Generator

About the Color Palette Generator

What is a color palette generator?

It reads an image and works out which colors actually carry it. Photographs contain thousands of distinct pixel values, and almost none of them are useful on their own. What you want is the handful of shades that define the mood, and that is what this tool returns.

We rebuilt it in 2026 to do two jobs rather than one. It still takes a picture, but it will also take a block of text, so you can paste a stylesheet, a set of custom properties, or a column of hex codes and get the same swatches, contrast ratios and export formats back. Everything runs in your browser, and nothing is uploaded.

How to Use This Tool

1. Pick From an image and choose a file, drag one onto the drop zone, or just paste a screenshot with Ctrl+V.
2. Drag the Colors to extract slider to ask for anywhere between 2 and 24 shades. The palette updates as you drag.
3. Switch to From text if you would rather paste hex, rgb() or hsl() values, or a whole stylesheet.
4. Click any swatch to copy its hex, or click the RGB and HSL rows underneath to copy those instead.
5. Choose an export format, then copy the result or download the palette as a PNG or SVG.

Common Use Cases

Designers and developers reach for this at slightly different moments, and both are worth calling out.

• Matching a brand you were handed. A logo arrives as a PNG with no color values attached. Drop it in and you have the hex codes.
• Building a theme from a photo. Landing pages often key off a hero image, and taking the palette straight from that image keeps the whole page coherent.
• Auditing a stylesheet. Paste your CSS into the text mode to see how many colors a project has quietly accumulated. Most codebases have more than anyone intended.
• Checking accessibility early. Each swatch shows its contrast against white and black, so you can spot the shades that will fail a contrast check before they reach production.
• Handing colors to another tool. Send a palette to the HEX to RGB Converter or export it as CSS variables and paste it straight into a project.

Frequently Asked Questions

How does the color extraction work?

Two passes. The first is median cut, which repeatedly splits the image's colors into buckets along whichever channel varies most. The second is a short k-means refinement that moves each bucket's center onto the cluster it actually represents. That second pass is why a small accent color survives on a page with a large flat background, which plain median cut usually loses.

Is my image uploaded to your server?

No. The file is read by your browser, drawn to a canvas, and analyzed there. It never leaves your machine, and we have no copy of it. The same goes for anything you paste into the text mode.

What image formats are supported?

PNG, JPG, GIF, WebP, AVIF and SVG all work, since the tool leans on whatever your browser can already decode. Large photographs are scaled down before analysis, which keeps things fast without changing the palette you get back.

Can I paste colors instead of uploading a picture?

Yes, and that is the part we added most recently. Switch to From text and paste hex codes, rgb(), hsl(), CSS custom properties, or an entire stylesheet. The parser pulls out every color it recognizes, drops duplicates, and keeps the order it found them in.

What do the Aa badges under each color mean?

They are WCAG contrast ratios against white and against black. A ratio of 4.5 or higher passes AA for normal body text, and anything under 3 will be hard to read at any size. It is a quick way to see which colors are safe for text and which belong in backgrounds or borders.

Which export format should I use?

CSS variables if you are dropping the palette into a stylesheet, Tailwind if you are extending a theme, JSON if another script is going to read it. The PNG and SVG downloads are for sharing the palette itself, which is handy when you need to show a client rather than ship code.