Image Color Picker
Upload a photo, screenshot or logo and pick the exact colour of any pixel —
hover to preview with a zoom loupe, click to lock it, and copy the HEX,
RGB or HSL value. The tool also auto-extracts a dominant
colour palette you can copy as CSS. Everything runs in your browser — nothing is uploaded.
Drop an image here, or browse
PNG, JPG, WebP, GIF, BMP, SVG — read locally on your device, never uploaded.
Move over the image to preview, click to pick a colour. Use the palette on the right for the image’s dominant tones.
— — — How to use the image colour picker
- Add your image — drag a photo, screenshot or logo onto the drop zone, or click browse. It is read on your device; nothing leaves your browser.
- Hover to preview — move the pointer over the picture. The zoom loupe magnifies the area under the cursor and the readout shows the live colour so you can land on the exact pixel.
- Click to pick — click to lock the colour. Its
HEX,RGBandHSLappear with one-click copy buttons, and it is added to your recent-colours strip. - Grab the palette — the dominant colours of the whole image are extracted automatically. Click any swatch to copy its hex, or copy the whole palette as CSS variables or a JSON array.
What you can do with extracted colours
- Match a brand — drop in a logo or screenshot to read the exact brand colour instead of eyeballing it.
- Build a theme from a photo — turn a hero image or moodboard into a coordinated palette of CSS variables for a site or slide deck.
- Sample a UI element — pick the precise background, border or text colour from a screenshot of an app or chart.
- Re-create a design — pull the colours out of an inspiration shot so you can reproduce or recolour it.
- Check contrast — copy a picked colour into the WCAG contrast checker to confirm it is readable.
Colour format quick reference
| Format | Example | Best for |
|---|---|---|
| HEX | #3a7bff | CSS, design tools, the most common way to write a colour. |
| RGB | rgb(58, 123, 255) | How the pixel is stored; handy when you need the raw 0–255 channels. |
| HSL | hsl(219, 100%, 61%) | Tweaking a colour — change hue to shift it, lightness to make tints/shades. |
| CSS variable | --color-1: #3a7bff; | Reusing a whole palette across a stylesheet. |
Frequently asked questions
How does an image colour picker work?
Your image is drawn onto an HTML <canvas> entirely inside your browser. When you move the pointer over the picture the tool reads the single pixel under the cursor with getImageData() and shows its exact red/green/blue value; clicking locks that colour in. Because the file is read locally with a FileReader and never sent to a server, picking colours works offline and keeps your image private.
How is the colour palette extracted from my image?
The tool down-samples your image to a small grid for speed, then groups the thousands of pixels into colour "buckets" by rounding each channel, counts how many pixels fall in each bucket, and picks the most common buckets that are visually distinct from one another. Each swatch is the average colour of its bucket, so the palette reflects the real dominant tones of the photo rather than a fixed guess. Fully transparent pixels are ignored.
What is the difference between HEX, RGB and HSL?
They are three ways to write the same colour. HEX (e.g. #3a7bff) is a compact six-digit code used in CSS and design tools. RGB (e.g. rgb(58, 123, 255)) lists the red, green and blue channels from 0–255 and is how the pixel is actually stored. HSL (e.g. hsl(219, 100%, 61%)) describes hue, saturation and lightness, which is the most intuitive for tweaking a colour — change the hue to shift it around the wheel, or the lightness to make a tint or shade. This picker shows all three for every colour you select so you can copy whichever your stylesheet needs.
Why does the colour I picked look slightly different from the original?
A picker returns the literal pixel value, but several things can make a colour read differently from what you expect: JPEG compression slightly shifts pixels near edges and in flat areas; anti-aliasing blends two colours along a boundary into an in-between value; and your monitor or the image's colour profile can change how a value appears on screen. Pick from a flat, central area of the region you want rather than an edge, and zoom in with the loupe to land on the exact pixel.
Can I pick colours from a screenshot, logo or PNG with transparency?
Yes. PNG, JPG, WebP, GIF, BMP and SVG all work. Transparency is preserved on load, and fully transparent pixels are skipped when building the palette, so a logo on a transparent background gives you the brand colours rather than a muddy average. Screenshots are a common use — drop one in to grab the exact colour of a button, chart or brand element.
Is my image uploaded anywhere?
No. Everything — reading the file, drawing it to the canvas, sampling pixels and extracting the palette — happens in your own browser using local JavaScript. The image is never uploaded to Internet Tool Wizard or any third party, there is no sign-up, and it works without an internet connection once the page has loaded.