Image Color Palette Generator

Upload a photo and get a 3-10 color palette with the spot each color comes from: the sample photo's six dominant colors are #ADB7B3, #D1CBC2, #0C464B, #F1BB8C, #251E1E, #F7E9DE

The tool above reads your photo in your browser, splits it into small cells, picks 3 to 10 clearly different colors and shows them as a palette card. In the sample beach sunset, the grey-blue sky #ADB7B3 (32%) and the beige-grey cloud #D1CBC2 (25%) cover the most, followed by the deep teal of the sea #0C464B, the sunset glow #F1BB8C, the near-black brown of the rocks #251E1E and the pale sky around the sun #F7E9DE.

The dots on the card photo mark where each color actually appears in the picture. If you don't like a color, drag its dot to a better spot and it switches to the color there; hover over a color in the list and only the part of the photo grouped under it lights up. The same photo gives very different palettes depending on whether you pick Dominant, Vivid or Muted. You can save the finished card as a full-size PNG in Polaroid, portrait 3:4, story 9:16 or wide 16:9 format, and copy the colors as a HEX list or CSS variables. Your photo is read only in this browser and never sent to a server.

When to pull a palette from a photo

Starting from a photo you like is often quicker than choosing colors from scratch, and the result tends to hang together. The colors in a photo were captured under the same light, so they rarely clash. Typical uses:

• Choosing base colors for a blog, channel or small brand: take 3 or 4 muted colors from a photo with the right mood as candidates for backgrounds and text, and use one vivid color for buttons or accents. The dots show where each color came from in the photo, which makes the choice easy to explain to others.
• Matching thumbnails, carousel posts or slide covers to a photo: paint the title band or background next to the photo with colors taken from it, and the photo and text will not feel like separate pieces. The wide 16:9 card puts a color strip beside the photo, so it works as a first draft of a slide cover.
• Recording and sharing the colors of a trip or landscape: saved as a Polaroid or story card, the photo and its color codes sit on one image, which is easy to find again or send to someone.
• Using a photo as a reference for interiors, clothes or accessories: split a room photo into walls, floor and furniture to see from the shares roughly how much of each color is used. Screen colors can look different from real paint or fabric, so always compare with a physical sample before you buy.

How to use it

1. Add a photo: click "Choose photo", drag a file onto the work area, or paste a copied image with Ctrl+V (⌘V). A sample photo is loaded at first so you can try the tool right away.
2. Pick an extraction style: three strips are already extracted with the current number of colors. Compare them and click the one you like.
3. Set the number of colors and the order: change the number between 3 and 10 with the − and + buttons. Choose largest first, lightest first or by hue; the card and the list follow the same order.
4. Fine-tune with the dots: if a color you want is missing, drag the dot of the closest color to a spot of that color. With the keyboard, select a dot with Tab, then move it one step with the arrow keys or ten steps with Shift+arrow. A color you moved is marked "Hand-picked", and "Reset to automatic" brings back the original result.
5. Choose a card format: pick Polaroid, portrait 3:4, story 9:16 or wide 16:9, and decide whether the card shows HEX codes and color dots. The size that will be saved is shown in pixels next to each format.
6. Save or copy: "Save PNG card" saves the same card as the preview at full size. "Copy HEX" copies one code per line, "Copy CSS variables" makes lines like --palette-1: #ADB7B3;, and clicking a color in the list copies just that HEX.

Dominant, Vivid, Muted: why one photo gives different palettes

All three styles choose from the same 32 candidate colors; only the order of choosing differs. "Dominant" starts with the candidates that cover the most of the photo. "Vivid" starts with the most saturated candidates among those covering at least 0.3% of the photo. "Muted" starts with the largest candidates among the soft ones whose saturation is between 0.015 and 0.09. Saturation here is C in OkLCh, the distance measured on the a and b axes of Oklab (√(a² + b²)). The table shows six colors picked from the sample photo for each style, largest first.

Dominant picks up the colors of large areas such as sky, clouds, sea and rocks. Vivid collects the orange of the sunset and the teal of the waves, and Muted brings in the damp grey-blue and the sandy and cloud beiges. Vivid's top color #EAAD7F reaches 56% because a share is counted as the proportion of all cells in the photo that are closest to that color among the chosen ones. The six Vivid colors contain no grey, so the sky and cloud cells all fall to the nearest orange. That is also why the same #F1BB8C shows 12% under Dominant and 11% under Muted.

How the colors are chosen

1. Split into cells: the photo is divided into 256 cells along its long side (256 × 170 for the sample), and the pixels in each cell are averaged. When the long side is larger than 256 px, each cell holds several pixels, so stray specks from JPEG compression are smoothed out by the cell average (for images 256 px or smaller, each cell is a single pixel). Cells that are more than half transparent are not counted.
2. Build 32 candidates: median cut (Heckbert 1982) splits the cell colors into 32 groups, then a refinement step (k-means, Lloyd 1982) reassigns cells to the nearest group in Oklab, four times. Oklab is a color space designed so that differences that look alike to the eye are alike in distance.
3. Find a real spot for each candidate: among the cells in that candidate, take the "interior cells", those whose 8 neighbors are all in the same candidate, and choose the one closest to the candidate's color. The color you see is that cell's color, not the group average, so it really exists in the photo. The dot is placed on this cell. If several cells share that color, the one farthest from the edge of its area wins, so on a flat-colored shape such as a logo the dot sits in the middle of the shape.
4. Rank by style and filter: candidates are visited in the order given by the style, and only those at least 0.07 away in ΔEOK (the distance between two colors in Oklab) from every color already chosen are kept. In the sample's Dominant style, the largest candidate #D1CBC2 (11.0%) is taken first; the second, #E3D6CA (9.3%), and the third, #C5C0B4 (7.6%), are 0.040 and 0.036 from #D1CBC2, closer than 0.07, so they are skipped. The fourth, #ADB7B3, is 0.076 away and becomes the second color.
5. A second pass if needed: if the 0.07 threshold can't fill the requested number, the tool tries again with 0.035. If it is still short, it returns fewer colors and tells you so. It never repeats a color to fill the gap, so a logo with only three colors gives three colors even when you ask for six.
6. Count the shares: every cell in the photo is assigned to the closest chosen color in Oklab, and the share of cells is the percentage shown. Moving a dot changes that color, so the shares are counted again.

CSS Color 4 treats 0.02 in OkLCh as a just-noticeable difference (JND). This tool's threshold of 0.07 is about three and a half times that, a distance chosen so that two palette colors read clearly as different. The values 0.3%, 0.015 to 0.09, 0.07 and 0.035 are all thresholds set by this tool, not by a standard. No randomness is involved, so the same photo with the same settings always gives the same palette.

Where the dots point

A dot sits at the center of the "interior cell" chosen in step 3 above. Because the cell's neighbors have the same color, dots tend to land inside a patch of color rather than on an edge. Here is where the six Dominant colors of the sample photo are placed. Coordinates are measured from the top-left corner (0, 0) of the original (1,440 × 958 px).

When you hover over a color in the list or move focus to it with Tab, only the cells grouped under that color stay bright and the rest darken. Use this to see where a large color really sits and which part of the photo a small color came from. When you drag a dot, the color changes to the cell color where you drop it, and the highlighted area and the shares are recalculated.

Card formats and sizes

The card is saved as a PNG at a fixed size, matching the preview. The photo is center-cropped to fit the card's photo area, and any leftover space is filled by the color cells. The photo area's ratio follows the photo only within a set range for each card (see “Uncropped photo ratio” in the table below); photos outside that range are cropped around the center. For example, a 3:4 portrait phone photo on the Portrait 3:4 card gets a 1,080 × 1,110 photo area, so only 77.1% of it remains. These are the sizes with the sample photo (close to 3:2).

The Polaroid adapts its photo area to the photo within 4:5 to 5:4, so a 3:2 photo loses a little on both sides. Turning off HEX codes removes the text line at the bottom and makes the card 60 px shorter. The portrait 3:4 size follows Instagram Help: photos are shared at a width of 1,080 px, and if the ratio is between 1.91:1 and 3:4 (566 to 1,440 px tall), the original resolution is kept. 1,080 × 1,440 is the tallest size in that range. The HEX text on a color cell is white or black, whichever gives the higher WCAG 2.2 contrast ratio on that color.

Common mistakes

• The top Dominant color is white for a product photo on a white background: when colors are chosen by area, the background is the largest. To see the product's colors, switch to Vivid, or crop the photo around the product before uploading.
• A small accent (a red umbrella, a yellow sign) is missing: Dominant starts with large areas, so small colors get pushed out. Switch to Vivid or add more colors, and if it is still absent, drag the dot of a similar color onto it. Colors covering less than 0.3% of the photo are pushed back even in Vivid.
• The same color has a different share in each style: a share depends on which other colors were chosen with it. Don't read it as a fixed area that the color covers in the photo.
• Phone photo colors differ slightly from your photo app: recent phones often shoot in a color space wider than sRGB (such as Display P3), while a browser canvas defaults to sRGB, so colors are converted to that range. For colors used on the web, these sRGB values are closer to what will actually be shown.
• Printing or buying paint from a color taken off a screen: HEX is a screen color. For print, convert it under your print conditions with the RGB to CMYK Converter, and for paint or fabric, compare with a physical sample.
• You need the exact code of a single point: colors here are cell averages and can differ from a single pixel. For the exact value of one pixel, such as a logo, use the Image Color Picker.

Limits and cautions

• Colors come from cell averages at 256 cells along the long side. The color of a line thinner than a cell or of tiny text blends with its neighbors.
• There are at most 32 candidates, so the color of a very narrow area may not make the list. Pick such a color by dragging a dot.
• The thresholds for the three styles (0.3%, saturation 0.015 to 0.09) and the filtering distances (ΔEOK 0.07 and 0.035) are set by this tool. Other palette tools choose differently, so they may return other colors for the same photo.
• A photo larger than 2,048 px on the long side is scaled down to that size before reading and drawing on the card. The largest saved card is 1,920 px, so image quality is hardly affected.
• For a PNG with transparent areas, cells that are more than half transparent are not counted, and the card draws the photo over a white background.
• HEX text on the card is drawn in a monospace font installed on the device (Menlo, Consolas and so on), so letter shapes can differ slightly between devices.

The values in the tables were read from the sample photo (1,440 × 958 px) with this tool on 2026-10-20. The number of cells, the number of candidates, the filtering distances and the saturation thresholds are fixed rules of this tool and do not change from year to year. The Instagram Help page and CSS Color 4 (2026-10-09 edition), the basis for the card sizes, were checked on 2026-10-20.

Sources

• 01Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. Median cut
• 02Lloyd, S. (1982). Least squares quantization in PCMIEEE Transactions on Information Theory 28(2), 129–137. k-means refinement
• 03Björn Ottosson — A perceptual color space for image processing2020-12-23. Oklab (linear sRGB → LMS → cube root → Lab)
• 04W3C CSS Color Module Level 4 (CRD 2026-10-09)§9.5 C = √(a² + b²), H = atan2(b, a); §14.2.1 OkLCh 1 JND = 0.02; §20.3 ΔEOK = Euclidean distance in Oklab
• 05WCAG 2.2 — contrast ratio, relative luminance(L1 + 0.05) ÷ (L2 + 0.05), used to choose the text color on a color cell
• 06Instagram Help — Image resolution of photos you share on Instagram1,080 px wide; original resolution kept for ratios from 1.91:1 to 3:4 (566 to 1,440 px tall) (checked 2026-10-20)
• 07MDN — HTMLCanvasElement: getContext()Default colorSpace of the 2d context is "srgb"
• 08Wikimedia Commons — Sunset over beach (Unsplash).jpgCharlie Hang, CC0 1.0. Sample photo (scaled down to 1,440 × 958)

Frequently asked questions

Tools to use with it