Image Color Picker

Color picker from image: pick an exact color and palette

Use this image color picker to get exact values from a local photo, screenshot, illustration, or interface capture. Every preview click maps to the exact source pixel and returns its HEX, RGB, HSL, alpha, and coordinates, so it works as a color picker from image and hex color picker from image for image to HEX, hex code from image, and get color code from image tasks without a server upload. The same workflow serves as a photo color picker, picture color picker, color dropper from image, or color selector from image.

How to get a HEX code from an image

1. Choose, drop, or paste a local image, or begin with the bundled sample.
2. Click or tap a pixel, or enter exact source coordinates and use the magnifier for pixel-level control.
3. Copy the HEX code from the image, choose a dominant palette color, or export the palette as CSS variables or JSON tokens.

Exact pixel sampling with source coordinates

The scaled canvas never changes the source coordinate system. Pointer, touch, keyboard, and numeric-coordinate controls all sample from the browser-decoded source image. The magnifier uses nearest-neighbor rendering so the center pixel stays visible, including transparent and partially transparent pixels.

Create a color palette from an image

The color palette from image result is extracted from a bounded downsample in a browser worker, so large images do not require a full-resolution color scan on the main interface thread. Six deterministic dominant colors become a photo to color palette, an image color palette or image palette extractor result, a CSS custom-property block, or a JSON token file, which also makes the tool a practical color scheme generator from photo files. Fully transparent pixels are ignored and partial alpha contributes proportionally.

Next steps: check this palette's contrast against WCAG thresholds, or turn one sampled color into a full palette with tints, shades, and Tailwind values.

HEX, RGB, HSL, CSS, and JSON output

A sampled pixel can be copied as HEX or HEXA, RGB or RGBA, and HSL or HSLA. The dominant palette can be copied or downloaded as CSS variables for a webpage or as JSON color tokens for a design system. Animated GIFs use the frame decoded by the browser, and displayed values can differ from another app when color-profile handling differs.

Private local image processing

Image decoding, pixel sampling, magnification, palette extraction, and export happen locally in this browser. The tool has no remote URL field and does not send image content, filenames, dimensions, coordinates, exact colors, palettes, or generated files to analytics. Replacing an image releases the previous local object URL.

Frequently asked questions

How do I pick a color from an image?

Open, drop, or paste an image, then click or tap the pixel you want. The tool shows the exact source coordinate and matching HEX, RGB, HSL, and alpha values.

Can I get a color palette from a photo?

Yes. After the image decodes, the browser extracts six deterministic dominant colors. Choose any swatch, copy the palette, or download CSS variables or JSON tokens.

Are transparent pixels supported?

Yes. Exact pixel sampling preserves alpha and identifies a fully transparent pixel. Palette extraction ignores fully transparent pixels and weights partially transparent pixels by their alpha.

Is my image uploaded?

No. Your image is decoded and inspected locally in this browser. There is no image-upload API or remote URL fetch, and image data is excluded from analytics.

Why might another app show a slightly different color?

Browsers and graphics applications can handle embedded color profiles, animation frames, and conversion rounding differently. This tool reports the pixels produced by your browser's decoder.