Image color picker
Pick colors from any pixel of an image and copy them as HEX, RGB or HSL values. Pixel-precise, with a history of picked colors. Free, no upload needed.
About Image color picker
The image color picker reads the exact color of any pixel in your image. Move the pointer over the picture to see the color under the crosshair, click to save it to your history, and copy it as HEX, HEX with alpha, RGB or HSL with a single click.
It is handy for designers matching brand colors from a logo, developers building a palette from a screenshot and anyone who wants to know a precise shade. You can also type X and Y coordinates or use the arrow keys for pixel-level accuracy. The image never leaves your browser.
How to use Image color picker
- Drop an image onto the upload box, click Choose image, or paste a screenshot.
- Move the pointer over the image; the values update for the pixel under the crosshair.
- Click to add the color to your history, or press Enter when using the keyboard.
- Click Copy next to the HEX, HEXA, RGB or HSL value you need.
Features
- Color values in HEX, HEXA (with alpha), RGB and HSL formats.
- Reads the image at its full resolution, one pixel at a time.
- X and Y coordinate fields, plus arrow-key movement (10 pixels with Shift).
- History of up to 12 picked colors; click one to copy it.
- Reports transparency for PNG and WebP images.
Common uses
- Finding the exact HEX code of a brand color in a logo.
- Building a color palette from a photo or illustration.
- Matching a color from a screenshot when recreating a design in CSS.
- Checking whether two areas of an image really use the same shade.
Tips
- Photos and JPG images contain slight color noise; sample a few neighboring pixels to find a representative value.
- Use a PNG screenshot rather than a JPG when picking interface colors.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They describe the same color in different ways. HEX is the compact code used in web design, such as #1a73e8. RGB lists red, green and blue values from 0 to 255. HSL uses hue, saturation and lightness, which is easier to adjust by hand.
How do I pick a color from an exact pixel?
Click the image to focus it, then use the arrow keys to move one pixel at a time, or type the X and Y coordinates. Both refer to the original image’s pixels, not the scaled preview.
What does HEXA mean?
HEXA is a hex code with two extra digits for opacity, such as #1a73e8ff. The last pair is ff for fully opaque pixels and lower for partly transparent ones, which only occur in images with transparency.
Why doesn’t the color match my design file exactly?
JPG compression changes pixel values slightly, and images exported with different color profiles can shift colors. Pick from a PNG export where possible, and sample several nearby pixels.
Is my input uploaded?
Tools run in your browser. Files, text and results are not uploaded to our servers and are cleared when you leave the tool.
Your privacy comes first
Tools run in your browser. Files, text and results are not uploaded to our servers and are cleared when you leave the tool.