How to use the Image Color Picker
- Click the upload box (or drag an image onto it) and choose a JPG, PNG, GIF, WEBP or BMP file.
- Click any point on the image. The colour under that pixel is shown as HEX, RGB and HSL.
- Press Copy beside a code to copy it, or click a swatch in Recent colours to see an earlier pick again.
Colour codes explained
RGB: rgb(R, G, B) with each value from 0 to 255
HSL: hue 0-360°, saturation 0-100%, lightness 0-100%
Example
A pure red pixel is #FF0000, which is rgb(255, 0, 0) and hsl(0, 100%, 50%).
Using HEX, RGB and HSL
- HEX is the format most used in web design and CSS, for example
#1D4ED8. - RGB gives the red, green and blue amounts from 0 to 255, which many design and photo tools ask for.
- HSL describes a colour by hue, saturation and lightness, which makes it easy to create lighter or darker versions of the same colour.
Tips for picking accurate colours
- Use a PNG or the original file when you can. Heavy JPG compression shifts colours slightly.
- Click in the middle of a flat area, not on an edge, where pixels blend two colours.
- Pick two or three nearby points and compare them when a surface has texture or a gradient.
- Remember that your screen settings change how a colour looks, even though the codes stay the same.
Frequently asked questions
Is my image uploaded to a server?
No. The image is opened and read in your browser. Nothing is sent over the internet.
Why is the colour different from what I expected?
Compressed formats such as JPG slightly change colours at pixel level, and your screen's colour settings affect how colours look. The numbers shown are the stored values of the pixel you clicked.
What happens if I click a transparent area?
A fully transparent pixel has no visible colour, so the tool reports black and tells you the pixel is transparent. Pick a nearby opaque pixel instead.
Which image formats are supported?
Any format your browser can display, including JPG, PNG, GIF, WEBP and BMP.
Can I get the average colour of an area?
This tool reads one pixel at a time. To estimate an overall colour, pick several points and compare them.
Is the colour history saved?
Recent colours are kept only while the page is open. They are cleared when you choose another image or reload the page.
How do I convert a HEX colour to RGB?
Split the six digits into three pairs and convert each pair from hexadecimal to a number. For #1D4ED8: 1D = 29, 4E = 78 and D8 = 216, so the RGB value is rgb(29, 78, 216).
How do I build a colour palette from an image?
Pick the main colours of the image one by one, note their HEX codes from the recent colours list, and use them as your palette. Choose a few that contrast well with each other.