You see a colour in a photo, a logo or a screenshot and you need its code: to match a brand, set a colour in a design app, or build a palette for a website. Guessing from a swatch takes ages. Pointing at the pixel takes a second.
This image colour picker reads the colour under a crosshair and gives you its HEX, RGB and HSL codes, each with Copy. It keeps a list of the colours you pick, finds a palette of the picture's main colours, and saves both as a picture, a text file or CSS. It runs in your browser and nothing is uploaded. Below: how to pick, which code to copy, and how to save a palette.
How to get a colour from an image
- Press Select image, or drop a picture onto the page. JPG, PNG, WebP, AVIF, GIF, BMP, TIFF, ICO and iPhone HEIC photos all open; the picker works on one picture at a time.
- Move the pointer over the picture. A crosshair follows it, and a round loupe shows the pixels around it, magnified, with the centre pixel outlined.
- Click to pick. The crosshair stays there, the colour joins Picked colours, and its codes show under Picked colour.
- Press Copy beside HEX, RGB or HSL to copy that code.
- To keep the colours as a file, choose Save as and press Save palette.
Picked colour always shows the colour where the crosshair last stopped: the centre of the picture at first, then wherever you click. You can also use the keyboard. Focus the picture, move the crosshair one pixel at a time with the arrow keys (ten with Shift held), and press Enter to pick. Zoom in with + for small details, and press 0 to fit again; zoom changes only your view.
HEX, RGB and HSL: which code to copy
| Code | Looks like | Use it in |
|---|---|---|
| HEX | #3A7BD5 | Websites, design apps and brand guides |
| RGB | rgb(58, 123, 213) | CSS, and colour boxes that ask for red, green and blue |
| HSL | hsl(215, 65%, 53%) | CSS, when you want a lighter or darker shade by changing one number |
All three describe the same colour. A HEX code from a picture is the shortest to paste; an RGB colour code gives the red, green and blue amounts from 0 to 255; HSL gives the hue in degrees, then saturation and lightness in percent. The codes are read from the full-size picture, not the smaller copy on the screen, so they are the picture's real pixel values.
One thing to know about photos: neighbouring pixels are rarely the same colour. Shadows, noise and compression make a sky or a shirt a mix of close shades, and the loupe shows this up close. Move the crosshair to a pixel that looks typical, or pick a few and compare them in Picked colours. Logos, icons and screenshots have flat areas, so one click is usually enough there.
Picked colours and the palette
Every pick is added to Picked colours, with its HEX and RGB codes. Click one to copy its HEX code, or press × to remove it. Up to 12 are kept; after that, a new pick takes the place of the oldest. Picking a colour that is already in the list does not add it twice.
The Palette shows the main colours of the whole picture as swatches with their HEX codes. Set how many with Colours in the palette, from 3 to 12; it starts at 6. Click a swatch to copy its code, or Copy all to copy every code, one per line. The palette is worked out by grouping similar shades on a small copy of the picture, 200 pixels on its longer side, so it shows the broad colours that fill the picture rather than tiny details.
Save the palette as a picture, text or CSS
| Save as | What you get |
|---|---|
| Picture (PNG) | A card 1200 pixels wide with each colour as a swatch and its HEX code underneath; more than 12 colours wrap onto a second row |
| Text | The HEX and RGB codes, one per line: the picked colours, then the palette |
| CSS | CSS custom properties, --colour-1 and on, ready to paste into a style sheet |
Each file holds the picked colours first and then the palette. In the picture and the CSS, a colour you picked is not repeated in the palette part; the text file lists both in full. The Result line in the panel counts the colours the file will hold, for example PNG · 8 colours. Press Save palette, and the done screen says Your palette is ready. The file's name ends in _palette.
The PNG card is handy to drop into a mood board or a message; the CSS file goes straight into a website's styles; the text file suits notes, a brand guide or a colour field in another app.
Private, free and exact
- The colours are read in your browser. The picture is never uploaded, and our server does no picture work.
- It is free, with no account and no watermark. Image tools are not counted in the free daily limit, which applies to document conversions only.
- It works in current Chrome, Edge and Firefox. Very large pictures may be too big for your browser.
Once you have a colour, other tools can use it. Make background transparent has its own Pick from picture for the colour to remove, and its remove white background from image page is set up for the most common case, a white backdrop. Adjust image colour can warm, cool or brighten a picture whose colours are not quite right.
Using the colour in a post or a banner? Make the picture the right shape for it too: the Instagram post size, the Instagram story size, the thumbnail size for YouTube, the LinkedIn banner dimensions or the Twitter header size.
Pick your colours now
Open a picture above, click the colour you need and copy its code, or save the palette as a picture, text or CSS. The image colour picker reads every code from the full-size picture, so it matches what is really there.
It is free, private and runs in your browser. Select a picture above to start.
