Image Color Picker

Pick original image pixels, average a small area and build reusable palettes with alpha-aware color values and text contrast.

Open or drop JPG, PNG or WebP

Up to 20 MiB and eight million pixels. Processing is local. Animated inputs are sampled as still images.

No image loaded

Image pixels

Click or tap the image. Focus the canvas and use arrow keys, or enter exact coordinates below. Blank preview margins do not select pixels.

X coordinate (px)Y coordinate (px)

Sample area

Picked color

HEX with alpha when neededRGB / alphaHSL / alpha

Contrast background

Pick a color first.

Nearby color guides

Pick a pixel to find nearby color guides.

Related shades and harmonies

Click a suggested opaque color to add it to your palette.

Palette

0 / 100 colors

Import HEX-array JSON

Save explicitly in this browser

Palette name

Saved palettes

Only named palettes you explicitly save are stored locally, up to 20. Images and coordinates are never stored. Clearing the image keeps the current palette.

Discover the story behind your colors

Explore real-world references, matching palettes and readable text pairs in our Color Encyclopedia. Start with teal, coral or lavender.

Using Image Color Picker

Read original decoded pixels and create reusable color palettes without uploading images.

Open JPG, PNG or WebP up to 20 MiB and eight million pixels.
Click or tap the image, use arrow keys on the focused canvas, or enter exact pixel coordinates. Choose a single pixel or an averaged area.
Copy HEX/RGB/HSL, check text contrast, add shades to your palette and export JSON, CSS or a swatch PNG. Save a named palette explicitly if desired.

Example

Opaque orange pixel: RGB 255, 80, 40 → #ff5028
A partly transparent pixel includes alpha in HEX, RGB and HSL output.

Questions & answers

Does the smaller preview reduce sampling accuracy?

No. Sampling reads original decoded image pixels. Exact coordinates refer to the source dimensions. Blank preview margins do not select edge pixels.

How is averaging calculated?

Small areas are clipped to the image edges. RGB channels are weighted by alpha, and alpha is averaged across sampled pixels, avoiding hidden transparent-color contamination.

Are colors suitable for print matching?

These are browser-decoded canvas RGB values, not an ICC print-profile measurement. Source color management and browser decoding can affect values. WCAG contrast is a text-pair check, not a complete accessibility audit.

What is stored?

Images and coordinates are not stored. Named palettes are saved only when you press Save / update, in this browser’s local storage. Exported palette JSON can be imported elsewhere. Older palette storage is left untouched.