Image Color Picker: what it does
Add an image and click or tap any spot on it to get that exact colour: its HEX, RGB and HSL codes, ready to copy, plus whether black or white text reads better on it. Pick as many colours as you need; they collect in a list you can copy as CSS, JSON or Tailwind or download as a palette image. The tool also shows the image’s main colours automatically, and on computers with Chrome or Edge, “Pick from screen” grabs a colour from anywhere on your screen, not just the image. Everything runs in your browser, so the image is never uploaded.
How to use it
- Drop an image into the box, paste it with Ctrl+V, or tap to choose one from your phone.
- Read the main colours, most common first, with their HEX, RGB and HSL codes and text contrast. Change the number of colours if you like.
- Click or tap the image to add exact colours. In Chrome or Edge on a computer, “Pick from screen” picks from anywhere on your screen.
- Click a swatch to copy its code, copy the whole palette as CSS, JSON or Tailwind, or download it as a PNG.
Tips
- On a computer, move the pointer over the image to preview the colour under it before you click.
- Zoomed-out photos mix neighbouring pixels. For the colour of a small detail, use the largest version of the image you have.
- Picking a brand colour from a website? Take a screenshot (or use “Pick from screen” in Chrome or Edge) instead of photographing the screen: cameras change colours.
- JPG compression shifts colours slightly around edges and text. Pick from the middle of a flat area for the truest value.
- Click a swatch to copy its HEX code; the RGB and HSL lines under it copy too.
Frequently asked questions
How do I get the HEX code of a colour in an image?
Add the image, click or tap the spot you want, and the colour appears under “Picked colours” with its HEX code. Click the swatch to copy it.
Can I pick a colour from my screen, outside the image?
Yes, in Chrome and Edge on computers: click “Pick from screen” and then anywhere on your screen. Other browsers don’t offer screen picking yet, so the button is hidden there.
Is the picked colour exact?
Yes, for the pixel you click in the image as your browser decodes it. Photos with colour profiles (for example from some cameras) are shown in standard sRGB, which is what websites and apps use.
Is my image uploaded?
No. The image is read and analysed in your browser and never leaves your device.
What is the difference between HEX, RGB and HSL?
They describe the same colour in different ways. HEX (#1E88E5) and RGB (30, 136, 229) give the amounts of red, green and blue; HSL gives hue, saturation and lightness, which is easier to adjust by hand. Design tools and CSS accept all three.