How to use it
- Open an image. Choose a file, drag one onto the tool, or paste a screenshot with Ctrl+V / Cmd+V.
- Aim with the magnifier. Move over the image; the loupe shows the 15×15 pixels around the cursor and the color under it.
- Click to pick. The color is added to your picked list. With the keyboard, focus the image, move with the arrow keys (Shift for 10 pixels) and press Enter.
- Use the color. Copy any format, or open it in the color converter for a full palette, or in the contrast checker to test it as text color.
Single pixel or averaged?
Flat UI screenshots and logos have exact colors, so 1 px is right. Photos and JPEGs have noise and compression artifacts, where neighbouring pixels differ by a few values even on a “flat” area. The 3×3 and 5×5 sizes average the square around the cursor and give a more representative color.
Reading a pixel color in code
const img = await createImageBitmap(file);
const canvas = new OffscreenCanvas(img.width, img.height);
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;
const hex = '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');from PIL import Image
img = Image.open("screenshot.png").convert("RGB")
r, g, b = img.getpixel((x, y))
print(f"#{r:02x}{g:02x}{b:02x}")
# Dominant colors: reduce to a small palette, then count
small = img.quantize(colors=6)
palette = small.getpalette()[:18]
counts = sorted(small.getcolors(), reverse=True)
Images on other websites can’t be read this way unless the server allows it with CORS: the browser “taints” the
canvas and blocks getImageData. Save the image or take a screenshot and paste it here instead.
Frequently asked questions
How do I get the HEX code of a color in an image?
Open or paste the image above and click the color you want. The magnifier shows the exact pixels under the cursor, so you can land on a single pixel even in small text or thin lines. The HEX, RGB, HSL and OKLCH values appear on the right, each with a copy button.
Can I pick a color from a screenshot?
Yes. Take a screenshot to the clipboard (Cmd+Ctrl+Shift+4 on macOS, Win+Shift+S on Windows) and press Ctrl+V or Cmd+V on this page. In Chrome and Edge you can also use the eyedropper button to pick a color from anywhere on your screen, including other apps, without a screenshot.
Why is the picked color slightly different from the design file?
Usually because of compression or color profiles. JPEG and many screenshots blur and shift colors, especially along edges, so use the 3×3 or 5×5 sample size to average out the noise. Images with a wide-gamut (Display P3) profile are converted to sRGB before picking, so the values match what CSS hex colors mean.
How are the dominant colors calculated?
The image is shrunk to about 200 pixels on the long side, then split into color groups by median cut: the group with the widest spread of red, green or blue is repeatedly cut in half at its median. Groups that look nearly identical (close in OKLab) are merged, and the largest ones are shown with their share of the image. Fully or mostly transparent pixels are ignored.
Is my image uploaded anywhere?
No. The image is read by your browser and drawn on a canvas in this page. Nothing is sent to a server, and the picker keeps working offline once the page has loaded.