Image Color Picker
Hover to preview, click to pick. Get HEX, RGB & HSL instantly.
Drop your image here
or click to browse files
Supports JPG, PNG, WebP, GIF
100% Private
All processing in your browser
Instant Preview
Hover to see colors live
HEX / RGB / HSL
All formats, one click copy
Completely Free
No limits, no payment
Matching a color exactly from a reference image is a common but oddly fiddly task. Eyeballing a hex code from a screenshot rarely lands on the exact value, and small mismatches are easy to spot once a logo or brand color is placed next to the original.
This tool samples the precise pixel value under your cursor as you hover over an uploaded image, and outputs it simultaneously in HEX, RGB, and HSL — the three formats most commonly needed across CSS, design software, and print workflows.
Because the sampling reads directly from the image data loaded into the browser, the color returned is exact — not an approximation — down to the individual pixel you click.
HEX, RGB, and HSL all describe the exact same color, just organized differently for different purposes. HEX packs red, green, and blue into a compact six-digit code favored for its brevity in CSS and design files. RGB spells the same three values out as separate numbers, which some programming contexts prefer for readability or calculation. HSL organizes color by hue, saturation, and lightness instead, which maps more intuitively to how people actually think about adjusting a color — lighter, more saturated, a different hue entirely.
Knowing which format your specific tool or codebase expects saves a manual conversion step later; this picker gives you all three simultaneously precisely so you don't have to guess or convert by hand.
It's worth building the habit of sampling colors from multiple points across a gradient or textured area rather than just one, since a single pixel can be misleadingly light or dark compared to the color's overall visual impression — averaging a few sample points by eye often gets closer to the color most people would describe as 'the' color of that area.
Step-by-step instructions
- 1
Upload your reference image
Select or drag the photo, screenshot, or logo you want to sample from.
- 2
Hover to preview colors
Move your cursor over the image to see live color values update.
- 3
Click to lock in a color
Selecting a pixel adds it to your picked colors list.
- 4
Copy the value you need
Copy HEX, RGB, or HSL depending on where you're using the color.
Common use cases
Matching brand colors
Extract an exact color from a logo or brand asset to use consistently across a website or document.
Design handoff
Pull precise colors from a mockup screenshot when the original design file isn't available.
Recreating a color scheme
Sample multiple colors from a reference photo to build a matching palette.
Accessibility checks
Identify exact color values to check contrast ratios against text or background colors.
Building a consistent color palette
Sample multiple colors from a mood board or reference image to assemble a consistent palette for a new design project.
Tips for best results
- Zoom into the image first if you need to sample a very small or detailed area precisely.
- HEX is most common for CSS and design tools; HSL is easier when you need to programmatically adjust lightness or saturation.
- Sample multiple points from a gradient to capture its full range of colors.
- Double-check picked colors on the actual target screen, since display calibration can shift how a color appears.
- If you need to programmatically lighten or darken a color, HSL's separate lightness value makes that calculation far more intuitive than adjusting RGB numbers directly.
- Keep a small palette of picked colors from a brand reference image together in one place, rather than re-sampling the same source repeatedly across a project.
Frequently asked questions
Why does the same color look slightly different on another screen?
Monitor calibration varies between devices, so the HEX/RGB values are accurate to the image file, but visual appearance can shift depending on the display.
Which format should I use for CSS?
HEX (e.g. #3B82F6) is the most common in CSS and design tools, while HSL is often easier when adjusting lightness or saturation programmatically.
Does this tool upload my image?
No, sampling happens entirely in your browser by reading the pixel data of the loaded image.
Can I pick multiple colors from one image?
Yes, click as many points as you need — each picked color is added to a list you can copy from.
What's the practical difference between HEX and RGB?
They describe the exact same color; HEX packs the values into a compact six-digit code favored in CSS, while RGB spells out the numbers separately, which some code prefers for calculations.
Why would I use HSL instead of HEX?
HSL organizes color by hue, saturation, and lightness, which maps more intuitively to how people think about adjusting a color, making it easier to programmatically lighten or darken.
Should I sample just one pixel or multiple points from a gradient?
For a gradient or textured area, sampling a few points and comparing them typically gives a more representative sense of the color than relying on a single pixel, which can be misleadingly light or dark.