Image Color Picker

Load a photo or graphic and read the exact colour of any pixel in HEX, RGB and HSL. Click or tap the picture, press the arrow keys to move a crosshair one pixel at a time, or type X and Y coordinates. A magnifier shows the pixels around the crosshair, and a palette of the picture's dominant colours is extracted automatically.

Color & Palette Runs in your browser

Pick Colours From Your Image

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

Image

Drag and drop your image (JPG, PNG, WebP, GIF or BMP) here, or click to browseAccepted: JPG, JPEG, PNG, WEBP, GIF, BMP. Up to 40 MB.

Pixel X (from left)Whole pixels, starting at 0.

Pixel Y (from top)

Palette size

How to Use the Image Color Picker

Add your image.
Click or tap a point on the picture. With the keyboard, Tab to the picture and use the arrow keys (hold Shift for 10 pixels), or type the Pixel X and Pixel Y and press Pick colour.
Read the HEX, RGB and HSL values and press Copy next to the one you need.
Choose a swatch from Dominant colours to copy a colour from the palette.

About This Tool

Designers matching brand colours, web developers sampling a screenshot, and artists who want a palette from a reference photo.

Input: JPG / PNG / WebP / GIF / BMP · Output: HEX / RGB / HSL.

Features and Limitations

Features

Pixel-accurate picking from the full-resolution image, not from a scaled screenshot.
Mouse, touch and full keyboard control plus numeric coordinates.
Magnifier that shows the pixels around the crosshair.
HEX, RGB and HSL with copy buttons.
Palette of 5 to 8 dominant colours.

Limitations

Colours are read as your browser decodes them; colour profiles embedded in the file are not applied, so values can differ slightly from a colour-managed editor.
JPEG compression and anti-aliasing mean a single pixel may differ from the colour you expect; zoom in with the magnifier and sample the middle of flat areas.
The palette is a simple quantisation, not an exact perceptual analysis.
Semi-transparent pixels report their colour together with their alpha value.
Processing happens on your device, so very large files depend on your browser's available memory.

Example

On a pure red pixel the tool reports #FF0000, rgb(255, 0, 0) and hsl(0, 100%, 50%).

Frequently Asked Questions

How do I pick a colour with the keyboard?

Tab to the picture and use the arrow keys to move the crosshair one pixel at a time (Shift moves ten). The coordinates fields stay in sync, and you can type values there too.

Why is the colour slightly different from what I see in my editor?

Editors may apply colour profiles, and JPEG compression changes pixels slightly. This tool reads the raw decoded pixel values.

How is the palette created?

A downscaled copy of the image is grouped into colour buckets, and the most common buckets that are clearly different from each other become the palette.

Can I use the colour in CSS?

Yes. Copy the HEX or the rgb() and hsl() text straight into a stylesheet.

Does the tool store or send the colours I pick?

No. The picture is decoded into a canvas in your browser and the pixel values are read from there. Nothing is saved or uploaded.