Image Color Picker & Palette

Runs in your browser 50 MB LimitImage Tools#Design#Color

Pick exact colours from an image with a magnifier, or get its main colour palette as CSS, Tailwind or JSON.

How to use, limits & privacy

About Image Color Picker & Palette

Pick the exact colour of any pixel in a photo, logo or screenshot, and get its HEX, RGB and HSL values. A magnifier shows the pixels under the cursor so you can aim precisely. The Palette tab finds the 5 to 8 main colours of the image with how much of it each covers, and exports them as CSS variables, a Tailwind config or JSON. Everything runs in your browser.

How to Use

Add an image

Drop, paste or choose a JPG, PNG, WebP or GIF image, or click Try an example. In Chrome and Edge, Pick from screen also picks a colour from anywhere on your screen.

Pick a colour

Move over the image to see the magnified pixels, then click. On a phone, drag your finger and lift it where you want the colour. Copy the HEX, RGB or HSL value with the copy buttons.

Get the palette

Open the Palette tab and choose 5 to 8 colours. Click a colour to see where it occurs in the image.

Export

Choose CSS variables, Tailwind or JSON under the palette or your recent colours, then click Copy.

Privacy & Processing

Mode: local
Files Leave Browser: Local tool processing; review details below
Max Input Size: 50 MB
Account Required: No
Data Stored Locally: Nothing is saved; picked colours are kept in memory only until you close the page.
Network Processing: Assets or models may require an initial download

Images are read in your browser and never uploaded.

Rules & Limitations

Picks read the original pixel, not the scaled preview. Images above 40 megapixels are read from a reduced copy.
Semi-transparent pixels show an alpha value (for example #FF000080); fully transparent pixels are left out of the palette.
The palette is made from a copy of at most 200 px, so tiny details such as thin text may not appear in it.
Recent colours are kept only while the page is open.
HEIC photos from iPhones only open in browsers that can display them, such as Safari.

Top Suggestions

Matching a brand colour from a logo or screenshot
Building a website colour scheme from a photo
Finding the HEX code of a colour in a product picture
Exporting a palette to CSS or Tailwind for a project

Image Color Picker & Palette FAQ

How do I find the colour code of something in a picture?

Upload the picture, move over it until the magnifier shows the colour you want, and click. The HEX, RGB and HSL values appear on the right with copy buttons.

How do I get a colour palette from an image?

Upload the image and open the Palette tab. It groups similar colours and shows the 5 to 8 main ones with their share of the image, which you can copy as CSS variables, a Tailwind config or JSON.

Is my image uploaded anywhere?

No. The image is read in your browser and never leaves your device. Nothing is stored after you close the page.

Can I pick a colour from my screen, not just an image?

Yes, in Chrome and Edge on a computer: click Pick from screen and then click anywhere, even outside the browser. Other browsers don't support this yet, so upload a screenshot instead.

What is the difference between HEX, RGB and HSL?

They describe the same colour in different ways. HEX (#FF5733) and RGB (255, 87, 51) give the red, green and blue amounts; HSL gives hue, saturation and lightness, which is easier to adjust by hand. CSS accepts all three.

Why does the palette not show a colour I can see?

The palette lists the colours that cover the most area and merges very similar shades. A small detail such as a thin outline may be too small to count; pick it in the Pick tab instead.