How sampling works
The picker loads your image into an HTML Canvas and reads raw RGBA values per pixel with getImageData(). Hover to preview, click to capture, and each pick is reported in HEX, RGB, and HSL. Because it’s reading the actual pixel bytes, accuracy comes down to which pixel you sample and what quality the source is.
Single pixel vs 3×3 average
Two sampling modes serve different needs:
| Mode | Samples | Best for |
|---|---|---|
| Single pixel | One exact pixel | Flat graphics, UI, precise picks |
| 3×3 average | A pixel + its 8 neighbors | Photos, compressed/dithered images |
On a noisy JPEG or a photograph, a single pixel can be an outlier; averaging a 3×3 grid smooths out compression and anti-aliasing noise to give a color that better represents the area. On a clean flat graphic, single-pixel is exact.
Building a palette from an image
Click around the image and each color joins a palette strip with its HEX/RGB/HSL values, copyable individually or all at once — a fast way to lift a scheme from a photo, screenshot, or moodboard. To turn those sampled colors into harmonious variations (tints, shades, complementary), pass them to the Color Palette Generator; to convert a single value between formats, the Color Converter is the companion.
The CORS gotcha
If you try to load an image from another domain by URL, the Canvas becomes “tainted” and the browser blocks pixel reads for security (Cross-Origin Resource Sharing). The symptom is a “tainted canvas” error and no colors. The fix is simple: download the image to your device first, then upload it here — local files aren’t subject to the cross-origin restriction. Everything is processed in your browser, so the images you sample never leave your device.