Image Color Picker

Pick any pixel's color from an image and extract its dominant color palette. Your image never leaves your browser, nothing is uploaded.

Image

Drop an image here, paste it with Ctrl+V / Cmd+V, or choose a file

Picked color

Load an image to see its colors

Dominant colors

Number of colors

5 8 12

Load an image to see its colors

What is an image color picker?

An image color picker reads the exact color of a pixel in a photo, screenshot or logo, so you can reuse it in CSS or a design tool without guessing. This one also extracts the image's dominant colors with the median cut algorithm: it repeatedly splits the image's pixels into groups of similar colors and averages each group, which gives a palette that reflects how much of the image each color covers. A magnifier like the eyedropper in browser developer tools enlarges the pixels around the pointer so you can land on the exact one, with the mouse, by dragging a finger on a phone, or with the arrow keys. The image is decoded and analyzed entirely in your browser and is never uploaded anywhere.

Examples

Reading pixel colors and palettes from an image in code and on the command line:

JavaScript

const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;

Python

from PIL import Image

img = Image.open("photo.jpg").convert("RGB")
r, g, b = img.getpixel((x, y))
palette = img.quantize(colors=8).getpalette()[:24]

ImageMagick

magick photo.jpg -colors 8 -format %c histogram:info:- | sort -rn

macOS

# Digital Color Meter (built in) shows the color under the cursor:
open -a "Digital Color Meter"

Use Cases

Matching a brand color from a logo

When all you have is a PNG of a logo, click its main color to get the exact HEX value for your stylesheet.

Building a palette from a photo

Extract the dominant colors of a product shot or a mood board image as a starting point for a page's color scheme.

Recreating a design from a screenshot

Pick backgrounds, text and accent colors straight from a screenshot of a site or app you need to match.

Checking colors in exported assets

Verify that an exported icon or banner kept the right colors after compression or a color profile conversion.

Frequently Asked Questions

Is my image uploaded anywhere?

No. The file is opened locally with your browser's own image decoder and drawn into a canvas on your device. Nothing is sent to a server, so it's safe to use with private screenshots and unreleased designs.

Which image formats work?

Any format your browser can display: PNG, JPEG, GIF and WebP everywhere, plus formats like AVIF or HEIC where the browser supports them.

Why is the picked color slightly different from the original?

JPEG compression shifts colors around edges and in gradients, and very large images are scaled down to 2048 pixels on the long side before picking, which averages neighboring pixels. For exact values, use the magnifier to land on the pixel you want, pick from a flat area, or use a PNG.

How are the dominant colors calculated?

The image is reduced to about 100 pixels on its long side and the median cut algorithm groups similar pixels. Each group's average becomes a color, and the percentage shows roughly how much of the image it covers. Fully transparent pixels are ignored.

Can I paste a screenshot directly?

Yes. Copy a screenshot to the clipboard and press Ctrl+V (Cmd+V on a Mac) on this page. You can also drag an image file onto the drop area.