Palette from image

How do you get a color palette from a photo?

Drop the photo into the box above and six swatches appear with their hex codes and a ready-made block of CSS variables. There is no upload, no account and no waiting: the whole thing runs on your device. Extracting color from an image is the fastest way to start a design that feels cohesive with a photo, a product shot or a piece of brand art, because the palette comes out of the artwork instead of being guessed alongside it.

1. Drop in a photo, screenshot or illustration, or click to browse.
2. Read the six dominant colors as swatches with hex values.
3. Copy the CSS custom properties block, or copy a single hex.
4. Refine each color in the color converter and check it in the contrast checker.

How does the extraction actually work?

Worth knowing, because it explains most of the surprises. The image is first drawn to a canvas scaled so its longest side is at most 240 pixels, which keeps the pixel read fast enough to feel instant. Every fourth pixel of that canvas is then sampled, and any pixel with an alpha value below 125 is skipped, so transparent areas contribute nothing.

Each sampled pixel is dropped into a bucket by keeping the top four bits of its red, green and blue values. That is 16 levels per channel, or 4096 buckets in total, which is coarse enough to group colors the eye reads as the same and fine enough to keep a navy and a royal blue apart. The buckets are ranked by how many pixels landed in them, the top six win, and each swatch is the average color of the pixels inside its bucket. In short: dominant means most common by area, and the swatch is an average rather than a sampled pixel.

Why is the color you wanted missing from the palette?

Almost always because it does not cover enough of the image. Ranking by pixel count is what makes the palette feel true to the photo, but it also means a small, striking accent loses to a large, bland background every time. A landscape returns sky and grass; a portrait returns skin and backdrop; the one red jacket that made you pick the photo may never appear. The fix is simple: crop to the region you care about and extract again, or run the tool two or three times on different crops and assemble the palette yourself.

Two more honest caveats. Because each swatch is an average, a bucket that straddles the boundary between two areas can average out to a color that is not really in the image, and downscaling to 240 pixels blends neighboring pixels for the same reason. And a heavily compressed JPEG carries colors that the compression invented, not the camera. Treat every swatch as a well-informed starting point that you then adjust, not as an eyedropper reading.

How do you turn a palette into a color system?

A raw palette is a starting point, not a finished system. Once you have your colors, a few steps make them usable:

• Pick one color as the primary and the rest as supporting and accent roles.
• Generate light and dark steps for each in the color converter to build full scales.
• Check text colors against your backgrounds in the contrast checker before you commit. Extracted palettes are often low contrast against each other, since they came from one image, so this step catches real accessibility problems.
• Need the same colors for print? Run each hex through the RGB to CMYK converter, and read why that conversion is an approximation rather than an answer.

Is my image uploaded anywhere?

No. Many palette tools send your image to a server to process it. HueKit does not. The canvas API lets the browser read pixel data locally, so your screenshots and unreleased artwork stay on your machine. That also means the tool keeps working with no connection once the page has loaded, and there is nothing to delete afterwards.

Frequently asked questions

Related tools