How to use it
- Click Choose a file or drop a picture on the box. You can also paste one with Ctrl+V.
- Move the pointer over the part of the picture you want. The magnifier shows the pixels round it, and the Colour under the pointer box gives the colour in four notations.
- Set the Sample size to 3 × 3 or 5 × 5 to read the average of a small area instead of a single pixel.
- Click the picture to add the colour to Picked colours, then click HEX, RGB, HSL or Lab to copy it.
One pixel or an average
A photograph has noise: neighbouring pixels can differ a little even on a flat surface, so a single pixel can be slightly off. The tool can average a 3 × 3 or 5 × 5 square round the pointer. On an area of one colour, the average gives a steadier value than a single pixel.
The four notations
HEX and RGB are the usual notations in web and design software. HSL describes a colour by its hue, saturation and lightness, which helps when you want a lighter or darker shade of it. Lab (CIE L*a*b*, with the D65 white point that sRGB uses) follows how the eye sees colour: equal steps in Lab look roughly equal, so it is useful for comparing two colours. The CSS lab() function uses the D50 white point instead, so its numbers differ from these.
Your picture stays on your device
The picture is opened and read in your browser. Nothing is uploaded, the colours you pick are not stored, and the list is cleared when you leave the page.
Example: pure red
Pure red, #FF0000, reads as rgb(255, 0, 0), hsl(0, 100%, 50%) and L*a*b* 53.2, 80.1, 67.2 (D65). To read the red of a logo, set the Sample size to 5 × 5 pixels, so that one noisy pixel does not decide the colour.
Frequently asked questions
Is my picture uploaded when I read its colours?
No. The picture is opened and read in your browser, on your own device. Nothing is sent to a server, and the colours you keep are not saved; they are cleared when you leave the page.
Is the colour in the readout the same as the colour on my screen?
Not always. The readout gives the value stored in the picture's pixels. Your screen, its calibration and the colour profile of the picture can change how the colour looks, so the numbers are the picture's own values, not a measurement of the screen.
What is the difference between HEX and RGB?
They are two ways to write the same three values. HEX writes each value from 0 to 255 in base 16, so rgb(255, 128, 0) is #FF8000, while RGB writes the same numbers in decimal. Both are accepted by web and design software.
Why does the tool show a Lab value?
Lab describes a colour the way the eye sees it, with a lightness and two colour axes. It shows whether two colours are close to each other better than HEX or RGB, where two close colours can have quite different numbers.
Why can a very large picture read a little differently?
For speed, the colours are read from a copy with at most 2048 pixels on its longest side. The colour of a large area stays the same, but a single tiny pixel in a huge photo can be averaged with its neighbours.
Can I read colours from a transparent PNG?
Yes. The readout shows the colour stored under each pixel, and the transparency is not part of the reading. For a transparent area, the value shown is the stored colour, not the colour you see on the page behind it.
Sources
- W3C CSS Color Module Level 4: the sRGB colour space
- MDN: CanvasRenderingContext2D.getImageData(), reading the pixels of a canvas
- MDN: CSS colour values, the notations of the web
Figures and text last checked on Tuesday, November 10, 2026.