Color Picker from Image
Click any pixel to grab its HEX, RGB & HSL value.
How to use
- 1 Drop an image onto the box, or click to choose a file.
- 2 Click anywhere on the preview to sample that pixel.
- 3 Read the HEX, RGB and HSL values for the sampled colour.
- 4 Use a copy button to grab the format you need.
About Color Picker from Image
Sometimes you just need the exact colour out of an image — the precise blue in a logo, the warm tone in a photograph, the background shade of a screenshot you want to match.
The Color Picker from Image tool turns any picture into an interactive swatch board: drop in a file, click anywhere on it, and you instantly get that pixel’s value in three formats at once.
It reports the colour as HEX (the #rrggbb form CSS and design tools expect), as an RGB string, and as HSL, which is far more intuitive when you want to nudge hue, saturation or lightness by hand.
Each value sits in its own field with a one-click copy button, and a large preview swatch shows the sampled colour with automatically readable text on top so you can see at a glance whether it is light or dark.
Everything runs on a canvas inside your browser, so the image is decoded and read locally and never uploaded anywhere — safe for confidential mockups, branding assets or private photos.
It is the quickest way to lift a colour from a reference image and drop it straight into your stylesheet, design file or palette without guessing or installing anything.
FAQ
How accurate is the picked colour?
It reads the exact pixel under your click from the original image data, so the HEX, RGB and HSL values are pixel-perfect.
Is the image uploaded to pick colours?
No. The picture is drawn to a canvas in your browser and sampled locally, so it never leaves your device.
Which colour format should I copy?
HEX is the most common for CSS and design tools; RGB is handy in code; HSL makes it easy to tweak hue and lightness by hand.