Extract brand colors from a design mockup or webpage screenshot
Spotted a color scheme or brand visual you like? Upload a screenshot and click the key color block directly to get a precise HEX value for your own design or code.
Processed locally, never uploaded
Free, unlimited use
Magnifier-assisted precision + one-click copy
Online Color Picker — Precisely Extract HEX/RGB/HSL Values from Any Image
Click or drag anywhere on the image to pick a color
HEX
RGB
HSL
Pick history
Colors you pick from the image will be logged here for easy review and comparison
Upload an image, move your mouse or finger over it to position, and the magnifier shows a real-time zoomed view of the pixels around your cursor to help you aim precisely. Click to pick that position's color and instantly see HEX, RGB, and HSL values, all copyable in one click, with your pick history automatically logged for comparison — everything runs entirely in your browser, never uploaded to a server.
3color formats (HEX/RGB/HSL)
20MBmax size per image
0software to install
Never uploaded
Color picking and pixel reading happen entirely in your browser — images never pass through any server
Magnifier-assisted precision
Hover to zoom in real time on nearby pixels, with a red box marking the exact pixel that will be picked
One-click copy in three formats
HEX, RGB, and HSL all shown at once — click copy to paste directly into a design tool or code editor
Free, unlimited
No sign-up, no payment, no hidden usage limits
Common Use Cases
Three common color-picking needs, all solved by one tool
Whether you're extracting a brand color, referencing a photo's palette, or verifying a developed page, clicking an image is all it takes to get a precise color value.
Extract natural tones from a photo for a color palette
Pull sky, skin, or plant tones from a landscape or portrait photo as a reference base for a design scheme or illustration's color palette.
Verify a developed page matches the design's colors
When implementing a design, pick colors from both the design screenshot and the actual page screenshot and compare HEX values, to quickly confirm the colors are reproduced accurately without eyeballing it.
Color Formats
HEX, RGB, HSL Quick Reference
Three ways of describing the same color — pick the format that matches where you're going to paste it.
| Format | Example | Common Use |
|---|---|---|
| HEX | #FF3B30 | Web CSS, color input fields in most design tools (e.g. Figma, Photoshop) |
| RGB | rgb(255, 59, 48) | Cases where you need to view or adjust the red, green, and blue channels individually |
| HSL | hsl(4, 100%, 59%) | Described by hue, saturation, and lightness — convenient for adjusting shade or saturation within the same hue |
All three formats describe exactly the same color, just with different numeric representations. Each format on the page is copyable with one click — paste it directly into your design tool or code editor.
How to Use
4 steps to pick a color from an image
No software to install — everything happens right in the browser, with a magnifier to help you position precisely.
-
1
Upload an image
Click to select or drag your image into the page. Supports JPG, PNG, WebP, and GIF, up to 20MB — one image per session.
-
2
Move your mouse or finger to position
As you move the cursor over the image, the magnifier shows a real-time zoomed view of the surrounding pixels, with a red box marking the exact position that will be picked.
-
3
Click to pick a color
Click or release your finger at the target position to pick that color — HEX, RGB, and HSL values are shown instantly.
-
4
Copy the color value
Click the copy button next to the format you need, and paste the color value wherever you're using it.
Technical Notes
Two things worth knowing about local color picking
01
Reads the raw pixel data at the image's true resolution
The image is first decoded in your browser and drawn onto a canvas that matches the original resolution exactly — what you see on the page is just that canvas displayed at a smaller size. When you click to pick a color, the display position is converted back to the canvas's true pixel coordinates to read the color, so no matter how small the image appears on the page, the picking precision always matches the image's original resolution and is never distorted by display scaling.
02
Why the color picker doesn't support batch processing or produce a downloadable file
The color picker's function is “click to read one pixel's color value” — it's a purely interactive viewing tool that doesn't generate any file to download, so there's naturally no “multiple images each producing multiple results” batch semantic. If you need to pick colors from several images, just upload and view them one by one — switching images clears the current pick history.
FAQ
Common Questions About the Online Color Picker
Does the color picker support batch processing?
The color picker is an interactive tool for reading a pixel's color value — it doesn't produce any exported file, so there's no concept of “batch” here. No matter how large the image, you're clicking specific points to read colors one at a time, so this tool only supports uploading a single image and doesn't offer a batch mode.
Is the color picking done on my computer or phone, or does it get uploaded to a server?
It's done entirely in your current device's browser. Using the browser's native Canvas pixel-reading capability, the color value at a given position is read directly from the image data — the original image is never uploaded to any server.
Why might the color shown in the magnifier differ slightly from the final picked color?
The magnifier shows a zoomed-in view of a small area around your cursor's current hover position, while the color actually picked is the one specific pixel marked by the red box. If the image has a gradient or noise, neighboring pixels can differ slightly — but as long as you click based on the pixel marked by the red box, the picked color is precisely accurate with no deviation.
Is the pick history saved, and does it survive a page refresh?
The pick history is only kept in the current page's browser memory, letting you compare several picked colors within the same session. Refreshing or closing the page clears the history — it's never permanently saved or uploaded. If you need to keep a color value long-term, copy and paste it into your own notes or design tool first.
Which color format — HEX, RGB, or HSL — should I use?
HEX (e.g. #FF3B30) is the most commonly used format in web development and most design tools, compact and easy to paste. RGB (e.g. rgb(255, 59, 48)) is more intuitive when you need to view or adjust the red, green, and blue channels individually. HSL (e.g. hsl(4, 100%, 59%)) describes color by hue, saturation, and lightness, which is convenient when adjusting shade or saturation while keeping the same hue. All three formats describe the exact same color — just pick whichever matches the tool or code you're pasting into.
How precise is the color picker — can it read the image's true original color?
Yes. The color picker reads the raw pixel data from the decoded image, unaffected by how large the image displays on the page — even if the image is shown smaller on screen, picking is always precise to the image's actual resolution, with no color shift from display scaling.
Upload now and extract a precise color value in seconds
No sign-up, no waiting — click and copy right away.