Image

Image Color Picker

Upload an image and click any point to grab its exact color as HEX, RGB, and HSL, ready to copy. A pixel loupe zooms the area under your cursor so you land on the shade you want. The image is read in your browser, so it never leaves your device.

sample imageor drop an image here
picked
#71e8cb
HEX
rgb(113, 232, 203)
RGB
hsl(165, 72%, 68%)
HSL

Click the image to grab a color. Your recent picks appear here.

How to use it

1. Load an image

Use the built-in sample, or upload your own image, or drop a file onto the tool.

2. Hover to preview

Move over the image to preview the color under the pixel loupe.

3. Click to pick

Click a point to lock its color and read it as HEX, RGB, and HSL.

4. Copy the code

Copy any format with one click, and reuse it from the recent picks strip.

Common questions

What color formats does the picker give me?

Every pick returns three formats at once: HEX like #71e8cb, RGB like rgb(113, 232, 203), and HSL like hsl(165, 72%, 68%). Each has its own copy button, so you can paste the exact form your CSS, design tool, or code editor expects.

Does my image upload anywhere?

No. The image is read in your browser with the FileReader and canvas APIs, and the pixel values are computed on your own device. Nothing about the picture is sent to a server, so the tool works the same offline once the page has loaded.

Which file types are supported?

Any raster image your browser can decode works, including PNG, JPG, WebP, GIF, and BMP. Very large images are scaled down to fit the canvas, and the color you read is the pixel shown on that scaled view.

How do I pick a color precisely?

Hover slowly and watch the magnifier loupe, which zooms the pixels around the cursor and marks the exact pixel in the center. When the center cell holds the color you want, click to lock it. The large swatch and the three format rows then update to that pixel.