Image Color Extractor

Get the dominant colors and a palette from any photo, with HEX, RGB and HSL codes and an eyedropper.

Drop an image here or click to choose a file You can also paste an image with Ctrl+V. JPG, PNG, WebP, GIF, AVIF or SVG: a photo, a screenshot or a logo.

The image is read in your browser and never uploaded. Only the number of colors and the export format are remembered.

Embed this tool on your site

Free and without an account: copy the code and paste it into your website, blog or docs.

About the Image Color Extractor

Find the colors a picture is made of. Drop a photo, a screenshot or a logo and the extractor groups its pixels into a palette of dominant colors, each with its HEX, RGB and HSL code and the share of the image it covers. Hover over the image to magnify it and click to pick the exact color of a single pixel.

How to use the Image Color Extractor

  1. Add an image

    Drop an image on the page, click to choose a file, or paste one you copied, such as a screenshot, with Ctrl+V (⌘V on a Mac).

  2. Adjust the palette

    Use the Colors slider to get between 3 and 12 dominant colors. Click a HEX, RGB or HSL code to copy it.

  3. Pick exact colors and export

    Click any point of the image to add the color of that pixel to Picked colors. Then copy the palette from Export as CSS variables, JSON or HEX.

When to use it

Brand colors from a logo

Get the exact HEX codes of a logo when nobody can find the brand guidelines: flat colors come out with the same code as in the file.

A color scheme from a photo

Turn a photo you like into a palette for a website, a presentation or an illustration, ready to paste as CSS variables.

Matching a design

Paste a screenshot of an app or a web page and pick the color of a button, a background or a text to reproduce it.

Frequently asked questions

How are the dominant colors chosen?

The image is scaled down to 200 px on its long side, similar pixels are grouped together, and k-means clustering in the Oklab color space, which follows how the eye perceives differences, finds the colors that best represent the picture. The same image and number of colors always give the same palette. A color that fills most of a group, such as the flat color of a logo, is reported exactly.

Why is a color I can see missing from the palette?

The palette favors colors that cover large areas, so a small detail, such as a red button in a big photo, can be absorbed by a neighboring color. Raise the number of colors, or click the detail with the eyedropper to get its exact code.

What does the percentage on each color mean?

It is the share of the image closest to that color. Transparent pixels are left out, and the percentages add up to 100. A palette with fewer colors than you asked for means the image has fewer clearly different colors.

How exact is the eyedropper?

It reads the pixel under the pointer from the image at full resolution (images over about 16.7 megapixels are scaled down to that size first). In JPEG photos, neighboring pixels often differ slightly because of compression, so the magnifier helps you aim. Pick from screen, in browsers that support it, picks any color shown on your screen.

Is my image uploaded?

No. The image is read and analyzed in your browser with canvas and never leaves your device. Only the number of colors and the export format are remembered in this browser; the image and the picked colors are not.