Image Information
Pick Colors from an Image
Matching a colour to an existing photo, logo or screenshot is a routine design task, and guessing by eye is unreliable. Sampling the pixel gives you the exact value to paste into CSS, a design tool or a brand document.
Load an image and click anywhere on it to read the colour under the cursor.
Drag an image here
Click anywhere on the image to sample a pixel
How to use this tool
- 1Add the image you want to sample.
- 2Click a pixel in the preview.
- 3Read the HEX, RGB and HSL values shown for that point.
- 4Copy the value you need into your stylesheet or design file.
HEX, RGB and HSL
All three describe the same colour. HEX is the compact notation used in CSS and design tools. RGB spells out the red, green and blue channels from 0 to 255. HSL expresses hue, saturation and lightness, which makes it far easier to build a palette: keep the hue, change the lightness, and you have a consistent set of tints and shades.
Sampling accurately
Photographs are noisy, and neighbouring pixels in what looks like flat colour can differ by several units. Sample two or three nearby points and take the value that repeats. Avoid pixels near hard edges, where compression artifacts distort the colour.
Colour profiles
Browsers display images through a colour profile, and a value read on screen may differ slightly from the value your print workflow expects. For print work, always confirm the sampled colour against the original file in a colour-managed application.
Frequently Asked Questions
Which formats can I sample?
Any image your browser can display, including JPG, PNG, WebP, GIF and usually AVIF.
Does it give me a whole palette?
It reports the exact colour of the pixel you click. Sample several key points to build a palette manually.
Are HSL values rounded?
Yes, to whole numbers, which is what CSS expects and what design tools display.
Is the image uploaded?
No. It is drawn to a canvas in your browser and pixel data is read locally.