Image Color Picker

Click anywhere on an image to grab its exact HEX, RGB, and HSL colour value.

Image Color Picker
Drop an image here or click to browse
PNG, JPG, WEBP, GIF, BMP

📐 How to Use

  1. Drag and drop an image onto the drop zone, or click to browse.
  2. Click anywhere on the image to sample the colour under your cursor.
  3. Copy the HEX value, or read the RGB/HSL breakdown.
  4. Keep clicking to build a palette of picked colours — click any swatch in the palette to copy it again.

Frequently Asked Questions

QDoes my image get uploaded anywhere?
No. The image is drawn onto an HTML5 Canvas and colours are read directly from pixel data in your browser. Nothing is uploaded to a server.
QWhy is the sampled colour slightly different from what I see in another app?
Browsers render images using your display's colour profile, and JPG compression can shift colours slightly near edges. For flat-colour graphics (like logos), sampling is exact.
QWhat formats are shown?
HEX (e.g. #3B82F6), RGB (red, green, blue 0–255), and HSL (hue, saturation, lightness) are all shown for every colour you pick.

ℹ️ About This Tool

The image is drawn onto an HTML5 Canvas at a scaled-down display size. On click, the corresponding source pixel is read via canvas.getImageData() and converted from RGB to HSL using standard colour-space math — all client-side, nothing is sent to a server.