Image Color Picker

This color picker uses HTML5 Canvas technology to extract pixel-level color information directly from uploaded images. When you select an image file, the FileReader API loads it into memory and the tool draws it onto a canvas element scaled to fit your screen while maintaining aspect ratio. As you move your mouse over the image, JavaScript mousemove event listeners track your cursor position and use the Canvas getImageData() method to read the RGBA values of the pixel at those coordinates. The raw RGB values (0-255 for each channel) are then converted to multiple formats: HEX conversion involves converting each RGB component to base-16 hexadecimal and concatenating them with a '#' prefix. RGB format is displayed as 'rgb(r, g, b)' using the raw values directly. HSL conversion applies mathematical transformations: dividing RGB by 255 to normalize, finding max and min values to calculate lightness, then using the difference and max values to compute hue (0-360°) and saturation (0-100%). The hover preview updates these values in real-time as your cursor moves, providing instant feedback without needing to click. When you click, the color becomes 'locked' and displays in a larger swatch with all three formats shown simultaneously. The zoom slider uses CSS transform scaling, magnifying the canvas up to 300% while maintaining image quality through bicubic interpolation. At high zoom levels, individual pixels become clearly visible, essential for picking from gradients or small details. Copy buttons use the Clipboard API to transfer formatted color strings directly to your clipboard with a single click. All processing occurs client-side—the image data never transmits to external servers, ensuring complete privacy for proprietary designs and confidential client work.