Skip to content

Image color picker

Pull the dominant colors out of any image, with HEX and RGB values and each color's share of the picture. Processed on your device; the image is never uploaded.

or drop it here

JPG, PNG, WebP or GIF. You can also paste an image.

How it works

This image color picker analyzes an uploaded image entirely in your browser and returns the dominant colors as HEX and RGB values with each color's approximate coverage of the image, so you can quickly pull a brand palette or color scheme from any picture.

  1. Choose an image

    Click to browse, drag a file in, or paste one from your clipboard.

  2. Set how many colors

    3 to 10 swatches, ranked by how much of the image they cover.

  3. Copy a color

    Click any swatch to copy its HEX value, or copy the whole set as CSS variables.

How the colors are picked

The image is drawn to a small canvas and each pixel's red, green and blue values are rounded into 16-unit buckets, so near-identical shades count as one color. The buckets are ranked by how many pixels they cover, and any candidate too close in color to one already picked is skipped, so the result is a spread of genuinely distinct colors rather than several near-duplicates.

Runs entirely in your browser

The image is read with the FileReader API and analyzed with the Canvas API's getImageData method. No image data is sent to any server, which makes this safe for confidential brand assets or private photos. Cross-origin images loaded by URL cannot be analyzed, because browsers block reading pixel data from an image without CORS permission; download the image first and upload the local file instead.

Frequently asked questions

How do I extract colors from an image to build a color palette?

Drop or upload any image file. The tool samples pixel data from the image using an HTML canvas, clusters similar colors, and displays the dominant hues as swatches with their HEX code, RGB value and approximate coverage percentage. Click any swatch to copy its HEX value to your clipboard, or copy the whole set as CSS custom properties.

Is my image uploaded to a server when extracting colors?

No. The color extraction runs entirely in your browser using the Canvas API's getImageData method. The image is loaded into a hidden canvas, pixel data is read locally, and the clustered colors are computed in JavaScript. No image data is sent to any external server, which is safe for confidential brand assets or private photos.

What image formats can I use with the color extractor?

The tool accepts any image format your browser can decode, typically JPEG, PNG, WebP, GIF and BMP. The file is read with the FileReader API and rendered to a canvas, so the limit is your browser's native image support rather than any restriction in this tool.

How accurate is the color extraction, will it find every shade?

The extractor identifies the most dominant color clusters, not every unique pixel. Images with gradual gradients, such as blue skies or skin tones, may be summarized as a few representative HEX values rather than every intermediate shade. Raise the colors-to-extract slider for a finer breakdown of a busy image.

What is a limitation of browser-based color extraction?

Cross-origin images cannot be analyzed because of browser canvas security restrictions. If you link to an image hosted on another domain without CORS headers, reading its pixel data throws a security error. Download the image first and upload the local file rather than providing a remote URL.