You need to match a brand color, inspect a screenshot, or reuse a sampled color in another design tool.
Image Color Picker
Pick HEX, RGB, and HSL colors from an image or screenshot locally in your browser for design, CSS, and brand reference work.
Start here
Choose an image from your device.
Browser-first
Your image is analyzed locally in your browser and is not uploaded to a server.
Useful for
Match colors from a screenshot
Choose an image, then move over it to inspect colors.
Current hover colorNo color picked yet
Choose an image, then move over it to inspect colors.
Click the image to lock a color
Move over the image to preview colors. Click once to lock HEX, RGB, and HSL values.
Quick answer
Pick HEX, RGB, and HSL values from an image
Open a photo or screenshot, point to the color you want, and copy its HEX, RGB, or HSL value for design or CSS work.
Displayed colors can vary with compression, color profiles, transparency, and screen rendering; this is not a calibrated colorimeter.
Image Converter: Convert images to PNG, JPG, or WebP locally in your browser and choose the format that fits upload, transparency, or web-size needs.
About this tool
Pick HEX, RGB, and HSL colors from an image or screenshot locally in your browser for design, CSS, and brand reference work.
Your image is analyzed locally in your browser and is not uploaded to a server.
How to use it
- Choose an image from your device.
- Move over the image to preview colors.
- Click the image and copy HEX, RGB, or HSL values.
Common use cases
- Match colors from a screenshot
- Extract brand colors from an image
- Copy HEX colors for design work
- Check a color before using it in CSS or a design file
Color Format Guide
Design tools, websites, and CSS may ask for different color formats. This tool gives you HEX, RGB, and HSL from the same picked color.
| Format | Common use | Example |
|---|---|---|
| HEX | Web design and brand color notes | #1F7A5A |
| RGB | Design tools and CSS | rgb(31, 122, 90) |
| HSL | Adjusting hue, saturation, and lightness | hsl(158, 59%, 30%) |
Color Picking Checklist
- Use the highest-quality source image you have; compressed screenshots can shift colors.
- Pick from a flat color area when possible, not from shadows, gradients, or anti-aliased edges.
- Copy HEX for most web and brand notes, RGB for CSS or design tools, and HSL when you want to adjust hue or lightness.
- If exact brand color matters, treat the picked value as a reference and confirm it against the official brand guide.
Using Picked Colors in Design
A color picked from an image is a starting point, not always a finished design color. Photos include shadows, highlights, compression artifacts, and color-profile differences, so a single clicked pixel may not represent the intended brand or palette.
| Use | Suggested approach | Reminder |
|---|---|---|
| Brand reference | Pick several nearby pixels and compare | Confirm against official brand values if available. |
| Website background | Use HSL to lighten or desaturate | Raw photo colors can be too strong behind text. |
| Button color | Check contrast with text | Readable text matters more than exact photo matching. |
| Palette building | Pick highlight, midtone, and dark colors | A small palette is more useful than one isolated color. |
FAQ
Is my image uploaded?
No. Color picking happens in your browser.
Which color formats can I copy?
You can copy HEX, RGB, and HSL values.
Can I pick from screenshots?
Yes. Use a screenshot image file and click the color you need.
Why does a picked color look different elsewhere?
Screens, compression, color profiles, and app rendering can make the same color appear slightly different.