Written by Alex Chen · Reviewed by Sarah Mitchell · July 24, 2026
Upload an image and click anywhere to pick colors. Get HEX, RGB, and HSL values instantly.
Upload an image to start picking colors
No colors picked yet.
The tool draws the uploaded image onto a canvas at its full natural resolution, then samples the single pixel under your cursor whenever you click. For that one pixel it reports three color notations: a six-digit hex code, an RGB triplet, and an HSL value, and it adds the pick to a history list capped at ten entries, newest first. Nothing is sent anywhere — the file is read with a FileReader, drawn locally, and discarded when you close the page. The prompt under the image updates to show the natural dimensions in pixels, which is the first hint at how the sampling works.
The canvas on screen is almost never displayed at its natural size — it is scaled to fit the preview area. So the click handler measures the visible rectangle with getBoundingClientRect(), computes a scale factor for each axis by dividing the canvas's true pixel dimensions by its displayed dimensions, and multiplies your click coordinates by those factors to recover the actual pixel position. The result is clamped to the image bounds, so a click that lands a few pixels past the edge still samples the last row or column instead of failing. It then reads exactly one pixel with getImageData(x, y, 1, 1) and takes the red, green, and blue channels from the returned array; the alpha channel is ignored, which matters for transparent images.
Take the flat-design green #4CAF50 and suppose it sits on a pixel you click. The hex code splits into three byte pairs: 4C is 76 in decimal, AF is 175, and 50 is 80, so the RGB line reads rgb(76, 175, 80). The HSL conversion runs the standard algorithm. Each channel is divided by 255 to get 0.298, 0.686, and 0.314. The largest of those is 0.686, the smallest 0.298, and their difference is 0.388. Lightness is the midpoint: (0.686 + 0.298) / 2 = 0.492, which rounds to 49%. Because lightness is below 0.5, saturation uses the formula difference / (max + min), giving 0.388 / 0.984 = 0.394, or 39%. Since green is the largest channel, hue takes the green branch of the calculation: ((blue − red) / difference + 2) / 6, which is ((0.314 − 0.298) / 0.388 + 2) / 6 = 0.340, multiplied by 360 and rounded to 122°. The picker therefore shows hsl(122, 39%, 49%) for #4CAF50.
Three rounding decisions shape every result. First, the RGB values come straight from the canvas pixel data as integers in the 0–255 range, so no rounding is needed there. Second, the hex converter pads any single-digit hex value with a leading zero — a channel of 12 becomes 0c, not c — which is why the output is always six digits. Third, the HSL conversion rounds each component to a whole number at the end: hue to the nearest degree, saturation and lightness to the nearest percent. A consequence is that two adjacent pixels that differ by one level of RGB can round to the same HSL triplet, so HSL is a coarser representation than hex or RGB. The gray case is special: when all three channels are equal, the algorithm sets hue and saturation to zero and reports only lightness, so #808080 becomes hsl(0, 0%, 50%) rather than an arbitrary hue.
A transparent PNG stores an alpha channel alongside the color channels, and this tool reads only the first three values of the pixel array. That means a fully transparent pixel still reports whatever RGB values were stored underneath the alpha — often black or white — so do not trust the picker to name the color of a transparent region. A 1×1 image works fine and reports its single pixel no matter where you click, while an enormous photo may take a moment to draw since the full-resolution canvas is created on load. The history list keeps at most ten colors: the newest pick pushes the oldest one out, and the list resets to empty when you reload the page because it lives only in memory. If you click before uploading, the tool shows a toast asking you to upload an image first.
Zooming changes the on-screen size, and the scale factors adjust for that, so you are usually sampling the same pixel. But browsers sometimes round the coordinates when the scaled canvas has a non-integer size, landing you one pixel off — and on a gradient, one pixel can shift the value noticeably.
Technically yes, but the result is the RGB values stored in the pixel data, not what you see blended against the page background. Transparent pixels frequently contain leftover black or white, so the reported color can be misleading.
Ten is a practical cap that keeps the list readable without scrolling. Once the limit is reached, each new pick replaces the oldest one, so you only ever see your most recent ten selections.
The picker draws the first frame of the GIF onto the canvas, so you sample colors from that frame only. To pick from a different frame, extract that frame first with a GIF editor and upload it separately.
As accurate as the file's own pixels — but JPEG is lossy, so the stored pixel is already an approximation of the original scene. The picker reports exactly what is in the file, which is the right answer for matching colors in that file even if it differs slightly from the source photo.
RGB describes color by how much red, green, and blue light it mixes, each on a 0–255 scale, which is how screens physically produce color. HSL describes the same color by hue (position on the color wheel), saturation (intensity), and lightness (brightness), which people often find more intuitive when tweaking a shade.
Use it when you need an exact color from a specific image — matching a brand color from a logo, pulling the accent color from a screenshot, or checking whether two regions of a design are actually the same shade. Skip it when you need the dominant or average color of an entire image, which requires aggregating many pixels rather than sampling one; when you need to pick from many frames of an animation; or when your source is a vector file that has no fixed pixel grid. For matching colors across a whole design, sampling a few representative pixels and comparing the hex codes is a faster and more reliable check than eyeballing two images side by side.