Image Color Picker
Upload an image and click any pixel to sample its HEX, RGB, and HSL color values instantly in your browser.
Frequently Asked Questions
How does the image color picker work?
The tool draws your uploaded image onto an HTML5 Canvas element. When you click or hover over any pixel, it uses the Canvas API's getImageData() method to read the exact red, green, and blue channel values of that pixel. These values are then converted to HEX, RGB, and HSL formats for easy use in CSS or design tools.
What image formats are supported?
Any image format your browser supports can be used, including JPEG, PNG, WebP, GIF, SVG, BMP, and AVIF. The image is processed entirely in your browser — nothing is uploaded to a server, so your images remain private.
What is the difference between HEX, RGB, and HSL?
HEX encodes the red, green, and blue channels as a six-digit hexadecimal string (e.g. #ff6b35) and is the most common format in CSS. RGB expresses the same three channels as decimal integers from 0 to 255. HSL represents color as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%), which is more intuitive for humans when tweaking colors programmatically.