Image color palette

Nothing to show yet. Upload an image—or open a link with a ready-made palette.

The link stores the palette itself, not the image. You can share it, and anyone who opens it will see exactly these colors.

The matrix will appear when the palette contains at least two colors.

• AAA From 7:1—suitable for any text, including small text.
• AA From 4.5:1—regular text; from 3:1—large text at 24 px or bold text at 18.7 px.
• Low Below 3:1—do not use for text. Suitable for fills, borders, and decoration.

How to use it

1. Provide an image in any of five ways: as a file, by dragging it into the frame, with Ctrl+V from the clipboard, using an image URL, or using a page URL. Analysis starts immediately.

2. Choose how many colors to extract and how to combine them. Median cut preserves proportions, k-means separates similar shades more effectively, and “Accents” extracts bright and muted colors separately.

3. Click the eyedropper directly on the image. The color at that point will be added to the palette and locked. The ×8 magnifier shows exactly which pixel you are targeting.

4. Reorder, remove, or replace unwanted colors in the list. Locked colors remain when you change the color count or analysis method.

5. Switch the format between HEX, RGB, HSL, HSV, CMYK, OKLCH, and Lab. It applies to the list, copying, and file exports.

6. Check the contrast matrix. It immediately shows which pair of palette colors can be used for text and a background.

7. Download the result as a file: CSS, SCSS, Tailwind, JSON, ASE, GPL, sketchpalette, PNG, or SVG. The palette link can be sent to anyone.

The formula and what it includes

• Histogram — All pixels are distributed across 32 768 bins—five high bits per channel. Each bin stores a count and the exact channel sums, so the bin color is the actual average rather than the center of the cube.
• Median cut — The bins are placed in one box. We split the box with the largest range adjusted for population along its longest channel, at the point where the same number of pixels falls on each side.
• k-means — N centers are initialized with the k-means++ method and recalculated twelve times as the average of their bins. Distance is measured in Lab, where the difference between colors is closer to what the eye perceives.
• Accents — Colors are selected from sixteen candidates to match targets for saturation and lightness: bright, light, dark, and muted. This is the same approach used by Palette in Android.
• Proportion — Each histogram bin is assigned to the nearest palette color, and proportions are calculated from that distribution. This is why a color picked manually with the eyedropper also gets a proportion.

Example analysis: an image with two colors

The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.

• A 10 × 10 image contains 100 pixels
• 60 pixels are pure red, and 40 are pure blue
• 4 colors requested; method: median cut

1. The histogram uses two bins: the red bin has a count of 60, and the blue bin has a count of 40. The remaining 32 766 bins are empty and are not included in the analysis.

2. Both bins are in the same box. The red and blue ranges are 255, while the green range is 0. When tied, the first channel is selected: red.

3. We split on red at the point where the same number of pixels falls on each side: the blue bin on the left and the red bin on the right.

4. Each box contains one bin, so there is nothing left to split. Two colors are returned instead of four.

5. The box color is the average of its pixels: #0000FF and #FF0000. The proportions are 40% and 60%.

Palette: #FF0000 — 60%, #0000FF — 40%. Ordered by proportion. Fewer colors than requested are returned because the image contains only two colors.

Frequently asked questions

• Is the file really not uploaded anywhere?

  The file is real. It is read locally and rendered to canvas, which is where the pixels come from; no network requests are made. Only URLs are sent to our server. The page URL is sent when you use the “Page URL” field: the server fetches the markup and extracts og:image from it. The image URL is used only as a fallback if the first attempt fails: the browser always tries to fetch the image directly first, without going through us.

• What happens if another site does not let the browser read its image?

  The tool will fetch it through our server. The browser cannot read pixels from an image on another origin unless the server that served it allows this with the Access-Control-Allow-Origin header. This is built-in browser protection, and the page cannot bypass it. The first attempt is therefore always direct. If it fails, the same URL is sent to us: our server fetches the image and passes it to your browser from our side, where the restriction does not apply. A message appears below the preview window when the image was loaded this way. This does not work with images larger than four megabytes or images served only after authentication. Copy such an image and paste it with Ctrl+V instead.

• What is the difference between “Accurate” and “Fast”?

  “Fast” analyzes a 240 px copy, measured along the longer side. The proportions barely change, but small details—a logo in a photo or a thin colored line—disappear when the image is reduced and may not enter the palette at all. “Accurate” builds the histogram at the full resolution. Those details remain, while the speed is nearly the same because the histogram still contains no more than 32 768 colors.

• Why does a palette color not match the color I see in the image?

  By default, a color is the average of all pixels in a group. If a group contains a gradient from light blue to dark blue, the average will be somewhere in between, and the image may not contain that pixel at all. Select “Use the nearest actual pixel” to replace the color with an actual pixel from the image being analyzed. In “Accurate” mode, that is the full image; in “Fast” mode, it is the 240 px copy. The checkbox does not change how the image is divided. It only changes which value is used to represent each color.

• Which method should I choose?

  Median cut is best when you need accurate proportions and the overall feel of the image. k-means works well when colors are close and you need to separate shades of skin, sky, or metal. “Accents” is for cases where you need bright colors rather than average colors. It separately extracts a bright, light, dark, and muted color and labels each one.

• Why did I get fewer colors than requested?

  Division stops when there is nothing left to split: every box contains one color. This happens with logos, icons, and flat illustrations. “Accents” always returns up to seven colors; the requested color count does not affect it.

• What happens to transparency?

  Pixels that are more than half transparent are skipped because their color is not visible on screen anyway. The number of such pixels is shown on a separate line.

• What opens a .ase file?

  Adobe Swatch Exchange files can be opened in Photoshop, Illustrator, and InDesign. The palette is added to Swatches as a single file. For GIMP, Inkscape, and Krita, use .gpl; for Sketch, use .sketchpalette.

• How can I show the palette to a colleague?

  The “Palette link” button puts the colors directly into the page URL. Anyone who opens the link gets exactly this palette, including its contrast matrix, formats, and exports. The image itself is not included in the link: it remains with you, so this palette will not contain proportions. If you need the proportions too, attach the PNG from the “Download as file” section.

• What happens to the palette if I edit it manually?

  Everything you pick with the eyedropper, add, or replace is marked as locked and remains when you change the color count or analysis method. Only unlocked colors are recalculated. Proportions are always recalculated for all colors: every pixel is assigned to the nearest palette color, so a manually added color also gets a proportion.

• What is the contrast matrix for?

  A beautiful palette does not necessarily work for text. The matrix shows the contrast ratio for every pair and marks which pairs pass AA and AAA. A pair with a ratio below 3:1 is not suitable for text at all—use it only for fills and decoration.