Image Color Picker
Click anywhere on an image to grab its exact HEX, RGB, and HSL colour value.
How to Use
- Drag and drop an image onto the drop zone, or click to browse.
- Click anywhere on the image to sample the colour under your cursor.
- Copy the HEX value, or read the RGB/HSL breakdown.
- Keep clicking to build a palette of picked colours — click any swatch in the palette to copy it again.
When to Use This
- Lifting the exact brand colors out of a logo someone sent as a flat image, when no style guide or source file came with it.
- Matching an interface background to a photograph placed behind it, with the HSL readout showing how to lighten it consistently.
- Collecting a reference palette while designing, since each click adds a unique swatch you can copy again later from the strip.
Frequently Asked Questions
About This Tool
A pixel in a browser canvas is three 8-bit channels plus alpha. HEX, RGB and HSL are only different notations for the same triple: HEX packs each channel into two hexadecimal digits, RGB prints them as numbers, and HSL re-expresses them as hue, saturation and lightness, which is the convenient form for deriving a lighter or more muted variant.
The image is drawn into a canvas scaled to fit within 900 by 420 pixels, and a click reads the single pixel under the cursor with getImageData before converting it to HSL with the standard formula. Picked colors drop into a palette that holds up to 24 unique values, newest first, and clicking any swatch copies its HEX code to the clipboard.
Notes & Limits
- Large images are scaled to fit a 900 by 420 canvas, so a sample from a big photo is a resampled average rather than one original pixel.
- Only the red, green and blue channels are reported. A fully transparent pixel reads as black, and no alpha value is shown anywhere.
- The palette keeps 24 unique colors and drops the oldest past that, and it is not stored: reloading the page clears every pick you made.
- Sampling is a single pixel with no averaging option, so a noisy or heavily compressed area can give a value several steps off its neighbors.