Color Picker from Image
Pick exact colors from any image and copy HEX, RGB or HSL values.
An eyedropper for any image
Need the exact blue of a brand logo? The off-white of a stock photo’s background? This color picker lets you hover over any image pixel to preview the color and click to save it to a palette — HEX, RGB and HSL values for every sampled point.
How to use
- Upload any image (screenshot, photo, export).
- Hover over the image to preview the color under the cursor.
- Click to add that color to the saved palette.
- Click a swatch in the palette to copy its HEX value.
Three color notations
- HEX —
#36a6ff. Compact and universal in CSS. - RGB —
rgb(54, 166, 255). Useful when you need alpha (rgba(...)). - HSL —
hsl(208, 100%, 60%). Ideal for building lighter/darker variants of the same hue.
All three describe the exact same pixel; copy whichever format fits your tool.
Privacy
The image is read entirely in your browser. Pixel sampling uses the canvas’s getImageData() — no data leaves your device.
Frequently asked questions
- Does this tool extract a full palette automatically?
- No — it is a manual eyedropper. Hovering previews the color under the cursor; clicking saves it to a palette. Automatic palette extraction (clustering similar colors) is a different, heavier process; this tool is optimized for quick targeted sampling.
- Why are HSL and RGB both shown?
- HEX and RGB are interchangeable (different notation for the same 24-bit color). HSL is useful in design because it separates **hue** (which color), **saturation** (how vivid) and **lightness** (how bright) — making it easier to create consistent tints and shades.
- Can I sample from screenshots?
- Yes. Take a screenshot, drop it in, and hover to sample. Useful for matching a brand color you see on a website but cannot get from the CSS directly.