Image Color Picker

How to use the image color picker

1. Load the image. Choose a file, drag it onto the tool, or paste a screenshot or copied image with Ctrl+V (Cmd+V on a Mac). No image handy? Press Use a sample image.
2. Aim. Move the pointer over the picture. The magnifier shows a 9 x 9 grid of real pixels around the cursor, with the center cell outlined, so you can see exactly which pixel you are on.
3. Pin it. Click or tap to pin the color. Each pinned swatch lists HEX, RGB and HSL with a copy button, and you can keep up to 20.
4. Use the keyboard if you prefer. Focus the image, move the crosshair with the arrow keys (1 px per press, 10 px with Shift) and press Enter to pin.

To turn a picked HEX value into other formats such as CMYK or OKLCH, send it to the Color Converter. To check whether a picked color is readable as text on a background, use the Color Contrast Checker.

Extracting a color palette from an image

The Dominant colors panel groups the pixels of the image into between 3 and 12 colors. It uses median cut: all colors are placed in one box, the box is repeatedly split along its widest color channel at the median, and each final box is averaged into a single color. The percentage beside each swatch is the share of pixels in that box. Fully transparent pixels are skipped, and the palette is computed from a copy reduced to at most 160 px on the long side, which keeps it fast.

Choose how many colors you want with the slider, then export the result as CSS custom properties, JSON, or a plain list of HEX codes with shares. Median cut favors large areas, so a small accent (a logo on a large photo) may be merged into a neighbor at low color counts. Raise the count or pick that spot by hand.

Pixel color versus perceived color

A pixel has one stored value: three numbers from 0 to 255 for red, green and blue. What you perceive is something else. The same value looks lighter on a dark surround and darker on a light one, and your display's brightness and profile shift it again. The picker reports the stored value, which is what you need for a CSS file, a design tool or a brand guide.

The values are 8 bit sRGB as your browser decodes the image. Browsers typically convert images with an embedded color profile to sRGB, so a wide-gamut photo can read slightly duller than it looks on a wide-gamut screen. The tool does not apply any correction of its own.

Why photos give noisy values

Click the same flat-looking wall twice, a few pixels apart, and you will often get two different HEX codes. Sensor noise, JPEG compression, and subtle lighting gradients all vary neighboring pixels. Edges are worse: JPEG compresses in small blocks, so pixels next to a sharp edge carry a mix of both sides.

The Sampling size setting helps. 3 x 3 averages 9 pixels and 5 x 5 averages 25 before showing the result, which smooths noise at the cost of a little locality. Use 1 x 1 on flat graphics, screenshots and pixel art, where each pixel is exact. Use 3 x 3 or 5 x 5 on photographs.

Tips for accurate colors

• Prefer PNG or the original file over a screenshot of a screenshot. Each re-encode of a JPEG changes colors slightly.
• Avoid highlights and shadows if you want a material's base color. Pick a mid-tone area that faces the light.
• Pick several points and compare them. If the HEX values differ a lot, average them or use the palette instead of a single pixel.
• Check large images. Images longer than 4096 px on the long side are downscaled before sampling, and the note under the image says so.
• Name it later. The readout shows the nearest of 19 basic color names, which is only a rough hint. For print references, try the Pantone Color Finder.

Reading the values

HEX and RGB are the same number written two ways: FF is 255, 80 is 128 and 00 is 0. HSL values are rounded to whole numbers, so converting back may differ by a few steps in a channel.

Common mistakes

• Trusting one pixel of a photo as "the" color of an object.
• Picking from a heavily compressed thumbnail instead of the full-size image.
• Expecting a match with a printed color. Screen RGB and printed inks are different systems, so a conversion to CMYK is only an approximation.
• Forgetting transparency. A semi-transparent pixel is shown over white here, but it will look different over another background.

Privacy and limits

Everything happens locally. The picker decodes the image with your browser, reads pixels from a canvas and never sends them anywhere. Files up to 25 MB are accepted. If an image cannot be decoded, for example a corrupt file or a format your browser does not support, the tool says so instead of failing silently.