WebyTooly

Image colour picker

Upload an image and click on it to read the exact colour of that pixel in HEX, RGB and HSL.

Espacio publicitario

Drag your image here or click to choose it

Supports JPG, PNG, WebP and GIF

Espacio publicitario

How a pixel colour is read

When you upload the image it is painted once on a hidden canvas at its original size. On click, we convert the pointer position inside the displayed element into canvas coordinates and request that single pixel with getImageData.

HEX = #RRGGBB with each channel in base 16

The browser returns four values from 0 to 255 (red, green, blue and alpha). The HEX code is simply those three channels in hexadecimal, and HSL is derived from the maximum and minimum channel.

L = (max + min) ÷ 2

The colour shown is that exact pixel, with no averaging: on noisy JPGs two neighbouring pixels can report slightly different values.

S = (max − min) ÷ (1 − |2L − 1|)

Worked example

Clicking a corporate blue returns #3366FF, which is rgb(51, 102, 255) and hsl(225, 100%, 60%): the same colour written three ways.

Frequently asked questions

Can I use it with screenshots?
Yes. It is the fastest way to pull a brand colour out of a screenshot or a photo of a sign.
Why doesn't the colour match what I see on screen?
It can come from your monitor profile or from a colour profile embedded in the image. The value we show is the pixel as the browser decodes it.
Which colour format should I use in CSS?
HEX is the most common, RGB lets you add transparency with rgba(), and HSL is the easiest for building lighter or darker variants of the same hue.
Does it work with transparent images?
Yes, and we also report the alpha value of the pixel you picked.

Related calculators