Image Color Picker
Click or tap any point of an image to get the colour of that pixel as HEX, RGB and HSL, ready to copy. Keep several colours to build a palette.
Runs in your browser. Your data is not uploaded.How our tools work
No image to hand? (CC0)
How do I get a colour from an image?
Choose an image, then click or tap the spot whose colour you want. The tool reads that pixel from the image itself, not the smaller preview, and shows its HEX, RGB and HSL values with copy buttons and a close-up of the pixels around it. Keep colours to build a palette.
- Select or drop an image.
- Click or tap the point whose colour you want. Drag to fine-tune while the magnifier shows the pixels under your pointer, or use the arrow keys to move one pixel at a time.
- Copy the HEX, RGB or HSL value, or select “Keep this colour” to collect a palette.
Key features
The exact pixel
Your click is mapped from the scaled preview to the image’s own pixels, and a magnifier shows the pixels around it, so you can see exactly which one you picked.
Touch and keyboard
Tap on a phone, drag to adjust, or use the arrow keys (with Shift for bigger steps).
Palette
Keep up to 12 colours and copy all their HEX codes at once.
Common uses
- Match a brand colour from a logo
- Take colours from a photo for a design
- Check the exact colour of a pixel in a screenshot
Supported formats and limits
- Input
- JPG, PNG, WebP, GIF, BMP and AVIF up to 40 MB, plus HEIC where the browser supports it
- Values
- HEX, RGB and HSL in sRGB, with alpha for transparent pixels
- Very large images
- Above about 16 megapixels, colours are read from a copy scaled to that size, and the tool says so
Which value do I need?
All three describe the same colour, so pick the one the place you paste it into expects. HEX, such as #1A73E8, goes into CSS, brand guides and most web and design tools. RGB, rgb(26, 115, 232), is for apps that ask for separate red, green and blue numbers from 0 to 255, such as the custom colour dialog in Microsoft Office. HSL, hsl(214, 82%, 51%), is the one to edit when you need a lighter or darker shade: change only the last number, the lightness, and the Color Converter turns the new value back into HEX.
Getting a logo’s true colour
The tool reads the single pixel under the marker; it doesn’t average the area around it. That makes the source file matter. JPG compression shifts colours slightly, most of all next to edges and text, so a flat logo colour saved as JPG often turns into several close shades a few values apart. Pick from a PNG of the logo when you can, or take the HEX code from the brand guide or SVG file. On a JPG, pick from the middle of a flat area, away from edges, and use the close-up to check that the neighbouring pixels match.
Frequently Asked Questions
Why does the colour differ from what my design app shows?
Browsers convert images to sRGB. A photo saved in a wider colour space, such as Display P3, can give slightly different numbers than an app that keeps the original space.
Can I pick a colour from a transparent area?
Yes. The alpha value shows how transparent the pixel is, and the HEX value gets two extra digits for it.
Last updated: