Why this image color picker exists

Why I built it

There is no shortage of image color pickers. Most of them do one of two irritating things.

The first is uploading your file. You drop a screenshot of an unreleased page onto a website, and it goes to someone else's server so a script can read one pixel. Your own browser has been able to do that since 2010. Once your file is on their server, you cannot tell whether it was stored or logged.

The second is stopping at the hex code. You wanted the color because you were going to use it: put it in a stylesheet, build a ramp around it, check whether white text can sit on it legibly. A tool that hands you #3F51B5 and a Copy button has done the easy part and left you the rest of the job.

This tool avoids both. The site is static pages plus a small script that reads pixels from a canvas in your own tab, so there is no server to upload to. One click gives you nine color codes, an eight-color palette with the share each color covers, six harmonies, a 50 to 950 shade ramp, WCAG contrast results and a color-blindness preview.

Who builds it

I am Md. Delwar Hossen. I have built web applications for more than eight years, much of that time on productivity tools at a software consultancy. Today I am Director of Web & Digital Systems at a US company, working remotely. You can find me on LinkedIn.

I built this tool because I kept needing it. My most common job was rebuilding an interface from a screenshot with no design file, and every picker I tried either uploaded the screenshot or stopped at a hex code. The field guide carries my name for the same reason this page does: if a number here is wrong, you know who to tell.

How it is built

Astro and Tailwind CSS, with no UI framework. The picker is plain TypeScript driving two canvases.

Two canvases rather than one is the decision the accuracy rests on. The first is what you see: scaled, panned, zoomed, redrawn as you move. The second holds the image at its original size, is never scaled, and is the only thing ever measured. That separation is what makes a color picked at 12× identical to the same color picked at fit, and an end-to-end test checks it.

All the color math lives in one folder with no runtime dependencies. The conversions round-trip for every 8-bit sRGB triplet, which is a small enough space to check exhaustively rather than sample. Hue rotation and lightness ramps use OKLCH instead of HSL, because HSL is not perceptually uniform: a ramp that is even in HSL numbers looks uneven to the eye.

How the claims on this site are checked

The accuracy figures on this site are produced by scripts. Here is how each kind of claim is checked.

• The color math has a unit-test suite. Conversions are round-tripped, the CIEDE2000 implementation is checked against known pairs, and the color-vision claims are verified across the RGB cube rather than asserted.
• The privacy claim is tested. An end-to-end script loads the real tool in headless Chromium, picks colors and fails if any request leaves the page.
• The accuracy figures come from a script. Every drift number in the field guide is produced by a script that runs in a real browser, so the JPEG encoding and decoding are the browser's own. It measures each difference with the same delta-E code the tool uses. The home page palette is made the same way: the script runs the tool's own palette code on the bundled sample photo.
• Stale advice is caught. If a new measurement contradicts the advice written around it, the check fails until the advice is rewritten.

Each measured figure in the field guide states the date and the browser it was measured in.

What it deliberately does not do

These are the tool's known limits.

• The screen eyedropper uses a browser API that only Chromium has shipped. In Firefox and Safari the button does not appear.
• There is no PNG, JPEG or Adobe swatch export. The SVG swatch sheet is the closest thing to a shareable picture of a palette.
• Color management is not applied. You get the sRGB bytes a browser would paint, which is the right answer for the web and the wrong answer if you are proofing print on a calibrated display.
• It is not an installable offline app. Once a page has loaded it needs no network, but there is no service worker, so a cold start with no connection will not work.

Corrections

If something here is wrong, tell me and I will fix it. Email info@exacthex.com, or see the contact page for what to include so I can reproduce a color problem. Corrections to the measured figures matter most, because other people rely on them.