Quick answer
To pick a colour from an image, choose or paste the image, move the mouse (or your finger) over the spot you want and read its HEX, RGB and HSL codes in the magnifier, click to pin it, then use “Copy”. The tool also extracts 5–10 dominant colours and exports them as CSS variables or JSON. Images are processed in your browser and never uploaded.
What does an image color picker do?
An image colour picker gives you the exact colour of a logo, product photo, screenshot or any picture you like, so you can reuse it in a website, slide deck or social post. Instead of guessing by eye, it reads the precise value of each pixel and suggests a matching palette for the whole image.
How to get a colour code from an image
- 1
Click “Choose files”, drag and drop, or paste (Ctrl + V) a JPG, PNG, WebP, GIF, BMP or AVIF image.
- 2
Move the mouse or touch the image: the magnifier shows the pixels around the cursor so you can hit the right one, along with its HEX, RGB and HSL codes. With a keyboard, Tab to the image and use the arrow keys (hold Shift for bigger steps).
- 3
Click (or press Enter) to pin the colour, then “Copy” the code you need.
- 4
Look at “Dominant colours” and choose how many (5, 6, 8 or 10). Under “Export palette”, pick dominant or pinned colours and copy the CSS or JSON, or download the file.
Three ways to write the same colour
Taking a burnt orange as an example:
| System | Example | Use it for |
|---|---|---|
| HEX | #D9733B | CSS, Figma, Canva and most design tools |
| RGB | rgb(217, 115, 59) | CSS, code, graphics software (each channel 0–255) |
| HSL | hsl(21, 68%, 54%) | Easy lighter / darker or stronger / softer variants: keep the hue, change lightness |
All three describe the same sRGB colour. For CMYK or a text contrast check, use the “Color Converter” tool.
Pinned colours vs dominant colours
| Pinned colours | Dominant colours | |
|---|---|---|
| Where they come from | You click individual spots | Extracted automatically from the whole image |
| Precision | Exactly one pixel | The average of a group of similar pixels |
| Best for | Matching a logo, button or text colour | Finding an overall scheme for a layout or post |
Real-world examples
Matching a client's logo colour
Paste a screenshot of the client's website, zoom into the middle of the logo (away from smoothed edges), pin the colour and copy the HEX into your design file.
Slides that match the cover photo
Open the cover image, choose 6 dominant colours, copy the CSS or use the HEX codes for headings, backgrounds and accents.
Checking a product's real colour
Pin a few spots on a shirt photo (highlights and shadows) to see the range its true colour falls in before writing the description.
Common problems
- The code is slightly off from the logo's real colour.
- JPEG compression and smoothed (anti-aliased) edges shift pixel colours. Zoom in and pick from the middle of a flat area, or use the original PNG / SVG.
- The colour on screen differs from print.
- HEX and RGB are screen colours (sRGB). Print uses CMYK and depends on paper and ink; run a test print before a large job.
- A small but striking colour is missing from the palette.
- The palette is ranked by area, so colours that cover little of the image get merged. Raise the count to 8–10 or pin that colour by hand.
- A very large image says colours “may be very slightly off”.
- Images with a long side over 4,096 px are read at a smaller size to save memory. Large areas are unaffected; tiny details may blend with neighbouring pixels.
How the dominant colours are found
The tool samples the image (about 40,000 pixels at most), ignores nearly transparent pixels, and runs median cut: it keeps splitting the group of colours along whichever channel (red, green or blue) spreads widest until there are enough groups. A few rounds of k-means then pull each colour to the true centre of its group. Each colour shows the share of the image it represents.
Everything runs in your browser and the image never leaves your device. Colours are read in sRGB, the way the browser displays them; wide-gamut images (Display P3) are converted to sRGB by the browser when drawn.
Glossary
- HEX
- A six-digit hexadecimal colour code (#RRGGBB); each pair is red, green or blue from 00 to FF.
- RGB
- A colour made from red, green and blue, each from 0 to 255.
- HSL
- A colour described by hue (0–360°), saturation and lightness (0–100%).
- Anti-aliasing
- Smoothing edges with pixels that blend the shape and background colours, so edge pixels are not the original colour.
Frequently asked questions
Is my image uploaded?
No. It is read in your browser.
Does it work on a phone?
Yes. Touch and drag on the image to see colours in the magnifier; lifting your finger pins the colour at that spot.
Can I pick colours from a screenshot?
Yes. Take the screenshot and paste it straight into the page with Ctrl + V (Cmd + V on a Mac).
How do I use the exported palette?
The CSS version is a set of variables like --color-1: #D9733B; to paste into a stylesheet. The JSON version lists the HEX, RGB and HSL of each colour for code or archiving.
Does it read transparency?
The code shown is the pixel's RGB colour; transparency is not included. The dominant palette skips nearly transparent areas.
What about CMYK?
Copy the HEX code and open the “Color Converter” tool for CMYK, a contrast check and lighter or darker shades.
Ratings and comments
Loading…