Image Color Picker
Click a photo to get HEX, RGB & HSL.
100% private — runs in your browser, nothing is uploaded.
Click to upload, drag & drop, or paste
PNG, JPG, WebP or GIF
Ctrl+Vto paste from clipboard
Hover to preview, click to save a color (up to 12). Your image is processed entirely in your browser and never uploaded.
How to use the Image Color Picker
- 1Upload an image
Drag & drop or click to select a photo, screenshot or logo.
- 2Hover to preview
The color under your cursor shows live.
- 3Click to save
Build a list of up to 12 picked colors.
- 4Copy the codes
Grab HEX, RGB or HSL for any saved color.
Examples
| Input | Output |
|---|---|
click on a sky pixel | #87ceeb · rgb(135, 206, 235) |
click on a logo | brand color as HEX to copy |
An eyedropper for any image, in your browser
This image color picker turns any photo, screenshot or logo into a clickable color map. Hover to see the pixel color live; click to save it. Every saved color is shown as HEX, RGB and HSL with one-click copy — ideal for matching a brand color, recreating a design or building a palette from a photograph.
From inspiration to CSS in seconds
Designers and developers constantly need “that exact blue” from an existing asset. Instead of guessing or opening a heavy editor, drop the image here and click. The 12-swatch history means you can extract a complete scheme — background, accent, text — in one pass, then paste the codes straight into CSS, Figma or Tailwind config.
Private, like all our image tools
The image is decoded onto a local canvas and read with getImageData — it never leaves your device, so confidential mockups and unreleased designs are safe. To turn a picked color into a full scheme, feed it to the color palette generator, convert formats with the color converter, or check text readability with the contrast checker.
Frequently Asked Questions
How do I get a color code from an image?
Upload the image, hover to preview any pixel's color live, and click to save it. Each saved color shows its HEX, RGB and HSL values with a copy button.
What's the difference between HEX, RGB and HSL?
They describe the same color differently: HEX (#3b82f6) is compact and common in CSS and design tools, RGB lists the red/green/blue components, and HSL (hue, saturation, lightness) is easiest for humans to reason about and adjust.
Why does the picked color look slightly different from the original photo?
Very large images are scaled down for performance, which can blend neighboring pixels slightly. For pixel-perfect picks on fine details, crop or zoom the source image first.
Can I pick multiple colors to build a palette?
Yes — every click adds to a history of up to 12 swatches, so you can extract a whole palette from a photo or brand asset in one session.
Does this work with screenshots and logos?
Perfectly — matching a brand color from a logo or replicating a color from a screenshot are the two most common uses. PNG, JPG, WebP and GIF all work.
Is my image uploaded?
No. The image is drawn to a canvas locally and read pixel-by-pixel in your browser only.