Image color picker

Click any pixel of a photo, logo or screenshot to get its exact color code in HEX, RGB, HSL and CMYK. A zoom loupe shows the pixels under your cursor, and every color you pick is kept in a list you can copy as CSS. Free, and your image never leaves your browser.

Image

Or paste an image (Ctrl+V / ⌘V) or drop one on this box. To pick colors from a website, screenshot it first:

#2563EB

Picked colors

Colors you click will show up here.

Which color code should I use?

HEX (#2563EB) is what CSS, Figma, Canva and most design tools expect. RGB (37, 99, 235) is the same color as three 0-255 numbers, handy in code and in Photoshop. HSL (hue, saturation, lightness) is the easiest to tweak by hand: keep the hue and change the lightness to get a darker or lighter shade of the same color. CMYK is a rough print conversion: a printer's real values depend on its ink and paper profile, so ask your print shop for a proof when the exact shade matters.

The contrast line tells you whether white or black text is readable on the color. WCAG asks for at least 4.5:1 for body text and 3:1 for large text.

Why does the picked color differ from what I expected?

Photos and JPEG files are rarely one flat color: compression and lighting make neighbouring pixels differ by a few shades, so a single pixel can be slightly off. Pick a "3×3" or "5×5 average" sample size for a more representative value. Screenshots of a website are exact for flat backgrounds and buttons, but text edges are antialiased, so pick from the middle of a letter stroke or the solid area around it. Images with a color profile (most phone photos are Display P3) are converted to sRGB by your browser, which is the space CSS colors use.

How it works

Your browser decodes the image and draws it on a canvas, then reads the pixel values under your cursor. Nothing is uploaded. The screenshot button is the one exception: it sends the address to our renderer, which opens the page in Chromium and returns a 1280×800 image (5 free screenshots a day). Transparent pixels are reported with their alpha value and shown over white.

Want all the main colors of an image at once instead of one at a time? Use the color palette extractor.

Colors from websites, by API

Need screenshots of many sites to sample brand colors, check themes or watch for visual changes? The Shotmint API returns a PNG of any URL rendered in real Chromium:

curl "https://shotmint.creasework.com/v1/screenshot?url=https://example.com&width=1280&height=800" -H "X-API-Key: YOUR_KEY" -o site.png

Each screenshot is 1 credit. €5 buys 2,000 with no subscription, and credits never expire.

Get 25 free renders a month Try a website screenshot

FAQ

Is my image uploaded? No. Picking happens in JavaScript on this page. Only the website screenshot button contacts our server.

Can I pick a color from my screen, outside the image? In Chrome and Edge on desktop, yes: the Eyedropper button lets you click any pixel on your screen, including other windows. Other browsers don't offer this yet, so take a screenshot and paste it here.

Which formats work? JPG, PNG, WebP, GIF, SVG, BMP, ICO and AVIF, plus HEIC in Safari. Very large photos are picked at full resolution.

Is there a limit? No. The picker is free and unlimited, with no sign-up.