What this is for
A palette on its own is hard to judge. Five hex codes in a row tell you what the colors are but not where they came from, and the moment they leave your screen — pinned to a board, dropped in a message, saved to a moodboard — the picture that justified them is gone. Putting both in one image keeps the reference attached to the evidence.
That is the whole job here. Pick a placement, choose how many colors, and download a single PNG. If you only want the codes and not the composite, the palette extractor gives you the same colors as copyable values.
Choosing a placement
The four options are not interchangeable, because each one suits a different aspect ratio.Left and right add width, so they work best with images that are already landscape or square — the band borrows space the composition can spare. Above and below add height and suit portrait shots and phone screenshots for the same reason.
Placement also affects reading order. Colors on the left get looked at first, which is the right choice when the palette is the point and the photo is supporting evidence. On the right or below, the image leads and the colors read as a caption. For anything going to Pinterest, taller works better than wider, so colors below usually beats colors right.
How many colors
Between four and six is the useful range for most photographs. Push past that and clustering starts splitting one region into neighbouring shades — two greens from the same tree rather than a genuinely new color — which pads the palette without adding information.
Large counts are worth it for a different job: sampling a screenshot of an interface, where there really are fifteen distinct values and you want all of them. That is when the two-track split earns its place, because sixteen swatches in one column leaves each too short to label.
Small images
The band is sized as a proportion of the image, which keeps it looking right across aspect ratios but breaks down at the bottom end. A 216-pixel icon with a 20% band gives a 43-pixel strip, and a seven-character hex code needs roughly 45 pixels of width to be legible — so the labels disappear and the export is too small to post anywhere.
So anything under 1200 pixels on the long edge is scaled up to meet it. That is a trade: the picture will be softer than your original, because upscaling cannot add detail that was never captured. It is stated under the preview whenever it happens, along with the source dimensions, so you always know which you are looking at.
A note on the labels
Each label's color is decided by the perceptual lightness of the swatch behind it, not by an sRGB brightness threshold, so mid-tones get the right choice rather than a technically-correct one that looks wrong. Where a swatch is too small to hold seven characters the label is dropped instead of clipped — the band still reads as a palette, and the codes are listed under the preview.
The labels are the part worth keeping switched on if you plan to share the image, since they make the collage self-contained. Turn them off when the collage is decorative and the exact values do not matter. Before committing a pair to text, check it in the contrast checker — a color that photographs beautifully is not automatically legible.
Common questions
- Is my image uploaded anywhere?
- No. The file is read by JavaScript in your own browser, the colors are clustered there, and the collage is drawn on a canvas on your machine. Nothing is sent to a server, so the tool works offline once the page has loaded.
- What size is the exported image?
- Your original resolution plus the color band, within limits: capped at 4000 pixels on the long edge so the browser can render it, and raised to at least 1200 if the source is smaller, because below that the band is too narrow to hold a readable hex label. The exact dimensions are shown under the preview, and any scaling is stated there too.
- Why do the colors split into two columns?
- Past nine colors a single column leaves each swatch too short for a readable hex label, so the band splits in two and widens to match. That keeps each swatch its full width instead of slicing one column into thin strips. You can turn it off.
- How are the colors chosen?
- By k-means clustering in the OKLab color space, not by picking the most frequent RGB values. Clustering perceptually means a landscape returns the one red jacket that defines the shot rather than five near-identical browns.
- Can I use the result commercially?
- The collage is yours — it is made from your image on your computer, and this site never sees it. Whatever rights you hold in the source image carry over unchanged.