UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free online image color picker does
Designers constantly need “the colour of that thing in the picture”: the green in a logo screenshot, the sky in a holiday photo, the paint on a sofa in a catalogue. This free online image color picker lets you drop in any image, click anywhere on it and get the exact colour as HEX, RGB, HSL and the nearest colour name, ready to copy.
It also looks at the whole picture and returns a dominant colour palette with the share each colour takes, plus the average colour of the image. A magnifier follows your pointer so you can aim at a single pixel, and an area-average option steadies noisy photos. Everything is processed in your browser, and your image is never uploaded.
How to pick colours from a photo or screenshot
- Add an image. Drop a file onto the box, choose one, or paste a screenshot with Ctrl+V. You can also try the sample image.
- Choose the pick area. Single pixel is exact. A 5×5 or 11×11 average is better for photos.
- Click the image. Each click adds a colour to the Picked colours tab. Hover to use the magnifier.
- Read the palette. The Palette tab shows the main colours and how much of the picture each covers.
- Copy or export. Copy a code, or open Export for CSS variables, JSON, CSV or a HEX list.
On a phone, tap to pick. Press and drag to preview with the magnifier first. For keyboard users, focus the image and press Enter to pick the centre pixel.
How dominant colours are extracted
A photo can hold millions of different pixel values, so the tool summarises them with median cut, a classic colour quantisation method. It samples up to about sixty thousand pixels, finds the colour channel with the widest range, sorts the pixels along it and splits them into two groups at a natural break. It repeats on the group with the most pixels until it has the number of colours you asked for, then averages each group. The share of each colour is the number of pixels in its group divided by the total.
Median cut favours colours that occupy a lot of the image, so a small but striking accent can be missed. If you need it, click it directly and it will appear in your picks. Increasing the palette size also brings small areas into view.
Why a picked colour may not match the real thing
- Lighting and white balance. A white wall can be blue in shade and orange under a lamp.
- Compression. JPEG changes pixels near edges and in gradients.
- Colour profiles. Images may use Display P3 or Adobe RGB while the page reads sRGB values.
- Screens. Two displays show the same code differently.
- Shadows and highlights. Click a mid-tone area, not a glare or a deep shadow.
For matching paint, fabric, print or packaging, use the picked colour as a guide and confirm with a physical sample or a proof. The result is accurate for the pixel in the file, not for the object in the world.
Colour codes you get from an image
| Code | Example | Use |
|---|---|---|
| HEX | #F97316 | CSS, design tools, brand guides |
| RGB | rgb(249, 115, 22) | Code, transparency with rgba() |
| HSL | hsl(25, 95%, 53%) | Adjusting lightness and saturation |
| Name | darkorange | Quick description, CSS shortcuts |
To see the full set including CMYK, Lab and OKLCH, paste the HEX into the Color Picker or the HEX to RGB Converter. To identify what a colour is called, use the Color Name Identifier.
From photo to palette to design: a simple workflow
- Choose the image. Pick a photo that expresses the mood you want, such as a sunset for warmth or a forest for calm.
- Extract the palette. Start with six colours and look at the shares. The largest colours usually become backgrounds and large shapes.
- Pick accents by hand. Click the small but striking areas, such as a flower or a sign, to collect accent colours that median cut may merge.
- Check roles. Decide which colour is background, text, primary and accent. Pair the darkest with the lightest for text.
- Test contrast. Use the Color Contrast Checker on text and button pairs.
- Build a scale. Turn key colours into lighter and darker steps with the Tints and Shades Generator.
- Export. Copy the CSS variables and keep the print sheet with the project.
This route is faster and more natural than guessing, because photographs contain colour relationships that already look good together: the lighting, atmosphere and materials are consistent. Brand palettes, website themes, slide templates and social graphics can all start this way.
Image colour picker, screen eyedropper or design software?
| Method | Strength | Limit |
|---|---|---|
| This image colour picker | Works on any image file or screenshot, gives a palette, a magnifier and averages, no install | Reads only the image you load |
| Screen eyedropper (browser or OS) | Samples anything visible on screen, including other apps | One pixel at a time, no palette, not available in every browser |
| Design software eyedropper | Colour management and exact document colours | Needs the software and the original file |
| Physical colourimeter | Measures real surfaces accurately | Needs special hardware |
For most web and graphic work, an online image colour picker is the quickest route. If you need to sample something that is not an image file, the Color Picker includes a screen eyedropper in supported browsers.
Practical uses for an image colour picker
- Web design: match buttons and backgrounds to a hero photo or logo.
- Branding: pull a palette from a mood board or product image.
- Presentations: colour charts to match a company photo.
- Interior and fashion: collect colours from inspiration pictures.
- Illustration and games: sample references for painting.
- Photography: check skin tones, skies and colour casts.
- Accessibility: read the foreground and background colours of a screenshot, then check contrast.
Tips for getting better colours from images
- Use the largest, least compressed version of the image you have.
- Use a 5×5 or larger area on photos to avoid grain.
- Pick from evenly lit areas.
- Use a palette of 5 to 8 colours for most designs.
- After picking, test text contrast on the colours you plan to use.
- Use the print sheet to share the palette with a team.
When you have picked a colour, blend it with another using the Color Mixer, or put it behind a frosted card with the Glassmorphism CSS Generator.
Privacy, limits and responsible use
The image is drawn to an in-memory canvas and read with standard browser functions. It is not sent anywhere, stored or logged. Very large images are scaled to at most 2000 pixels on the longest side. Animated images use the first frame. Respect copyright when you work from other people’s images: a colour code is not protected, but the picture it came from may be. This free online tool is a design aid and does not replace a calibrated colour-measurement device.
Frequently asked questions
What is an image color picker?
It is a tool that lets you click on any part of a picture and get the exact colour code of that spot, usually as HEX, RGB and HSL, so you can reuse the colour in a design or website.
How do I pick a colour from an image?
Drop, paste or choose your image, then click the spot you want. The colour appears in the Picked colours tab with its codes and a Copy button. Hover first to see the magnifier.
Is my image uploaded to a server?
No. The image is read and analysed in your browser with canvas, so it never leaves your device.
Which image formats work?
Any format your browser can open, such as JPG, PNG, WebP, GIF, BMP, AVIF and SVG. Animated images show their first frame.
Can I paste a screenshot?
Yes. Copy a screenshot or image and press Ctrl+V or Cmd+V while the page is open. The tool loads it immediately.
How is the colour palette made?
The tool samples the image and uses median cut, which repeatedly splits the pixels into groups and averages each group. The result is a set of dominant colours with the share of the image each represents.
How many palette colours can I get?
From 3 to 12. Use fewer for a clean brand-style palette and more to capture detail.
What does the pick area option do?
A single pixel can be noisy in photos because of grain and compression. A 3×3 to 31×31 average gives a steadier, more representative colour.
Why does the colour not match the real object?
Cameras, lighting, white balance, compression and screens all change colours. The code is accurate for the pixel in the file, but not necessarily for the real object.
Can I get the colour name?
Yes. Each palette colour and pick shows the closest CSS colour name.
How do I use the colours in CSS?
Open the Export tab, choose CSS variables and copy the result. It lists your palette and picks as custom properties you can paste into a stylesheet.
What is the average colour of the image?
It is the mean of all visible pixels, shown under the palette. It is useful for a placeholder background that blends with the picture.
Does it work with transparent PNG files?
Yes. Fully transparent pixels are ignored in the palette and picks, and mostly transparent ones are skipped.
Does it work on phones?
Yes. Tap the image to pick a colour. Press and drag on the image to see the magnifier before you lift your finger.
Is there a size limit?
No fixed limit, but very large images are scaled down to a maximum of 2000 pixels on the longest side to keep the page fast. Colours are barely affected.
Can I print or save the results?
Yes. Print or save a colour sheet with a small copy of the image, the dominant colours and your picks, or download CSS, JSON, CSV or a HEX list.
Is this image color picker free?
Yes. It is a free online tool with no sign-up, no watermark and no limit on images.
Sources and further reading
- Paul Heckbert, Color Image Quantization for Frame Buffer Display (1982), the original median cut algorithm.
- MDN Web Docs, CanvasRenderingContext2D.getImageData().
- W3C, CSS Color Module Level 4.
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2.
- Wikipedia, Median cut.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.