Color Picker from Image - Get the HEX Code of Any Pixel

What This Color Picker Does

This is an eyedropper, not a palette generator: you decide which pixel is sampled, and the tool reports exactly what is stored there. The part worth explaining is how a reading is taken, because the obvious approach is subtly wrong. Drawing the whole image onto one canvas and reading pixels back from it fails on large photos - browsers cap total canvas area at roughly 16.7 million pixels, about 4096 by 4096, and a 24-megapixel camera file exceeds that easily. Scaling the image down to fit would make every sample an average of several original pixels, so the one thing an eyedropper must get right would be the first thing lost. Instead, sampling redraws only a small window around the pointer, straight from the decoded file, at exactly 1 to 1. Source rectangle and destination rectangle are the same size, so the browser copies pixels rather than resampling them, and the values you get are the file's own bytes no matter how large the image is. The preview you see may be scaled to fit the canvas limit or your screen, but nothing is ever sampled from it. That same window feeds the magnifier, which paints each source pixel as a 13-pixel square with grid lines between them and outlines the centre cell in black and white so it stays visible over any color. You need it: a 4000-pixel-wide photo laid out in a 720-pixel column puts roughly 5.6 image pixels under every screen pixel. Arrow keys move the sample exactly one source pixel and Shift plus an arrow moves ten, which is the only reliable way to land on a one-pixel border or a thin antialiased edge. Each pick reports HEX, RGB and HSL from the same 8-bit triple, plus 8-digit HEXA and RGBA when the pixel is not fully opaque. The real limit to know is color management: canvas discards the embedded ICC profile in most browsers, so values match what the browser paints rather than what a color-managed editor shows.