Color Picker
Pick any colour from an image as HEX, RGB, HSL.
Runs in your browser, nothing is uploadedFree, no signupNo watermarkClick anywhere on the image
Drop an image here
or click to choose one. It never leaves your device.
Three steps
How to use the color picker
- 01
Add an image
Drop in a screenshot, a photo or a design.
- 02
Click anywhere
The exact colour at that pixel is read and shown in HEX, RGB, HSL and HSV.
- 03
Copy the value
Take it in whichever format the thing you are building expects.
Why this one
What makes it different
Four formats at once
HEX for CSS, RGB for most APIs, HSL for adjusting a shade by hand. Converting between them by hand is a pointless step.
The exact pixel, not an average
It reads the value at the point you clicked rather than a blurred sample, which matters on a gradient or a dithered area.
No extension to install
The usual way to do this is a browser extension with access to every page you visit. This is a page you open when you need it.
How this tool handles your files
- Where it runs
- Your browser, not a server
- Uploads
- None, ever
- Account
- Not required
- Watermark
- Never added
The short version
About color picker
Reading a colour out of an image is the sort of thing that should take two seconds and usually involves installing an extension that requests permission to read every page you visit. Sampling a specific pixel rather than an averaged region matters more than it sounds, because compression and anti-aliasing mean the value near an edge is rarely the value the designer chose.
Questions
Color Picker FAQ
Why does the colour look different from the original design?
If the image was saved as JPEG, compression will have shifted the exact values slightly. Pick from a PNG or the original file when the value has to be exact.
What is the difference between HEX, RGB and HSL?
HEX and RGB describe the same thing in different notation. HSL describes hue, saturation and lightness separately, which is far easier when you want a lighter version of the same colour.
Can I pick a colour from anywhere on my screen?
Not from a web page, since browsers deliberately prevent it. Take a screenshot and drop that in, which achieves the same thing.
Why do two similar-looking pixels give different values?
Compression and anti-aliasing both introduce small variations, especially near edges. Sample from the middle of a flat area rather than close to a boundary.
Free, and staying free
The tools are free because the icons are the business.
Thridy is a library of thousands of 3D icons in one consistent style, free for commercial use with no attribution and no account. The tools exist so you never have to upload an image to somebody else's server to resize it.
Keep going
More image tools
Watermark Image
Stamp text or a logo onto an image.
Add Text to Image
Write text on an image with stroke and shadow.
Image Collage
Combine 2, 4, 6 or 9 images into one grid.
Remove Metadata
Strip EXIF, GPS and camera data from a photo.
View Metadata
Read the EXIF data hidden inside a photo.
Image to Base64
Turn an image into a Base64 data URL.