Click anywhere on any uploaded image to instantly pick that exact pixel colour — get the HEX, RGB and HSL codes in one click. Zoom in for precision. 100% private, browser-based.
Drag and drop any image onto the tool, or click to browse. Supports JPEG, PNG, WebP and GIF. Your image never leaves your device — everything runs locally in your browser using the Canvas API.
Move your cursor over the image — a live magnifier shows the exact pixel under your pointer. Click anywhere to sample that colour. The picked colour appears instantly with its HEX, RGB and HSL values.
Click any format pill to copy the value to your clipboard. Your last 10 picked colours are saved in the history panel — click any history swatch to copy it again.
The tool draws your image onto an HTML5 Canvas element. When you click, it calls getImageData() at the exact clicked coordinates to read the raw RGBA pixel values. These are converted to HEX, RGB and HSL colour codes and displayed instantly — no server, no upload, no processing delay.
No. All processing happens entirely in your browser using the Canvas API and JavaScript. Your image is read locally via the File API and never sent to any server. This makes the tool safe to use with private photos, confidential brand assets, screenshots containing sensitive information, and proprietary design files.
The magnifier shows a zoomed-in view of the area under your cursor — typically 10× or more — so you can pinpoint an exact pixel rather than picking a blended area. This is especially useful for images with fine details, thin lines, gradients, or antialiased edges where nearby pixels may have different colours.
JPEG images use lossy compression which can alter pixel colours slightly from the original — especially in areas of high contrast or fine detail. PNG and WebP lossless images preserve exact pixel values. Additionally, your display's colour profile and brightness settings affect how colours appear visually, even when the underlying code is correct.
HEX is a six-character code like #1e40af used in HTML and CSS. RGB (Red, Green, Blue) expresses a colour as three values from 0–255. HSL (Hue, Saturation, Lightness) uses a perceptual model — Hue is the colour wheel position (0°–360°), Saturation is colour intensity (0–100%), and Lightness is brightness (0–100%). HSL is often easier to work with when building design systems or adjusting colours programmatically.
Yes — screenshots are just PNG or JPEG images and work perfectly. Simply take a screenshot, save it, and upload it here. This is a common way to extract colours from websites, apps or designs you don't have source files for.
Every colour you pick is saved to a history panel below the image — up to 10 recent picks. You can click any history swatch to copy that colour again, which is useful when comparing multiple colours from the same image or building a palette by picking individual colours manually.
To pick colours from a live website, take a full-page screenshot first and upload it here. Alternatively, browser developer tools (F12 → Elements → Styles) let you inspect any element's CSS colour directly. For a standalone eyedropper on any webpage, browser extensions like ColorZilla offer a native screen colour picker.
