Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Image Color Picker
Upload an image and click anywhere to pick its exact color.
Tool Panel
About Image Color Picker
Hover to sample a pixel and click to lock it — the value comes straight from the image data. Everything runs in your browser; the image is never uploaded.
- 1
Hovering previews the pixel colour and clicking locks it; HEX, RGB and HSL are all shown and each is separately copyable.
- 2
Colour is read with canvas getImageData on a single pixel after the file is turned into a data URL via FileReader — no network request at any point.
- 3
Values are the image's rendered pixels with no colour management: an image carrying an ICC profile may already have been converted for display, so what you get is what the browser shows.
- 1
Upload an image
A screenshot, brand guide or photo.
- 2
Hover, then click
Values track the cursor; clicking pins one and clicking again resets.
- 3
Copy the format you need
HEX for CSS, RGB for canvas, HSL for further lightness tweaks.
Because this reads rendered pixels. An image with an ICC profile, or one that is being displayed scaled, can render slightly differently from the annotated value. Read at 100% zoom when absolute accuracy matters.
No. The file becomes a data URL in the browser and is drawn to a canvas, so picking works offline.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools