To pick a colour from any image, open a free colour picker in your browser, add your photo or screenshot, and click the exact pixel you want. The tool reads out that pixel's colour as a HEX, RGB and HSL value, ready to paste into a website, a design file or a document. The whole thing takes under a minute, and there is nothing to install. Our free color picker works exactly this way — and because it runs in your browser, the image you use never leaves your device.
People reach for this tool constantly: matching a client's brand colour from their logo, copying the exact shade from a photo for a presentation, or rebuilding a palette they saw on another website. Here is why the picker gets used, based on the requests we see most often:
Why people pick a colour from an image (editorial estimate) — hover or tap each bar for details.
Step by step: pick a colour from an image
The process is the same whether your starting point is a holiday photo, a product shot or a logo file:
- Open the picker and add your image. Upload it from your device, or paste it straight from the clipboard if you have just copied or screenshotted it.
- Click the exact spot you want. The picker samples the pixel under your cursor. For a flat area of colour, click near the middle of it rather than on an edge or a highlight.
- Read the values. You will see the colour in several formats at once — typically HEX, RGB and HSL. They all describe the same colour; they are just written differently.
- Copy and use the value you need. Paste it into your CSS, your design tool's colour panel, or your document's custom colour box.
Zoom in if the area you want is small. A single pixel on the boundary between two colours is often a blend of both, so sampling a few pixels inside the shape gives you the true colour.
Picking a colour from a website
Websites do not hand you their image files, but the screenshot method works on any site, in any browser. Open the page, take a screenshot of the part you like (on Windows, Windows key + Shift + S; on a Mac, Cmd + Shift + 4), then paste or upload that screenshot into the picker and click the colour you want. On desktop Chrome and Edge there is also a built-in eyedropper inside the developer tools' colour panel, but the screenshot route works everywhere — including on a phone, where developer tools do not exist. Once you have the value, you can reuse that colour in your own site, slides or social graphics so everything matches.
Privacy note: a browser-based picker processes your image on your own device. Nothing is uploaded to a server, so it is safe to use with client logos, unreleased product photos and other images you would not want to send to a random website.
Which value should you copy? HEX, RGB or HSL
The picker gives you the same colour in several notations. Which one you need depends on where the colour is going:
| Format | Best for | Example |
|---|---|---|
| HEX | Websites and CSS, design-tool swatches, sharing a colour in an email or brief | #0E7C7B |
| RGB | Design software, presentation tools, anywhere you set red, green and blue channels separately | rgb(14, 124, 123) |
| HSL | Adjusting a colour by eye — making it lighter, darker or more muted while keeping the same hue | hsl(179, 80%, 27%) |
A useful rule of thumb: copy HEX for anything web-related, because it is compact and unambiguous. Use HSL when you like a colour but need variations of it — keep the first number (the hue) fixed and move only the lightness slider, and you get a family of shades that automatically harmonise.
Building a whole palette from one picked colour
One colour is rarely enough for a design. Once you have a hero colour, colour harmonies tell you which companion colours to pair with it. They are all based on positions around the colour wheel:
| Palette | Base colours | How it works |
|---|---|---|
| Monochromatic | 3 | One hue, varied by lightness — calm, safe, very tidy |
| Analogous | 3 | Neighbours on the wheel — natural, low-contrast, good for backgrounds |
| Complementary | 2 | Opposites on the wheel — maximum contrast, great for buttons and calls to action |
| Split-complementary | 3 | A colour plus the two neighbours of its opposite — contrast with less tension |
| Triadic | 3 | Three colours evenly spaced — bold and balanced, common in branding |
| Tetradic | 4 | Two complementary pairs — rich, but needs one colour to dominate |
Colours in common harmony palettes — hover or tap each bar for details.
Matching brand colours accurately
Sampling a logo is the fastest way to recover a brand colour, but a few things can quietly shift the result. JPEG compression adds noise, so a logo that has been re-saved many times may read a shade or two off from the original. Gradients and drop shadows mean the "same" logo contains dozens of colours — always sample the flattest, most central area. And screens differ: the value you pick is exact, but it may look slightly warmer or cooler on another monitor. For screen work that is fine. For print, treat the picked HEX as a starting point and confirm the final colour with the brand's official guidelines or a printed proof.
Watch the edges: pixels on the border between a logo and its background are anti-aliased — a deliberate blend of the two colours. Clicking there gives you a muddy in-between value that matches neither. Always sample well inside the shape.
Ready to try it? Open the free colour picker, drop in a photo or screenshot, and click the colour you have been trying to describe as "that greeny-blue". Building a full page around your new palette? Our image compressor keeps the page fast, the QR code generator can carry your colours into print, and the Asad Webs blog has more free-tool guides like this one.
Frequently Asked Questions
Can I pick a colour from a photo on my phone?
Yes. Open the picker in your phone's browser, add the photo from your gallery or take a screenshot of whatever is on screen, and tap the colour you want. The HEX, RGB and HSL values work exactly the same as on a desktop.
Is the colour I pick exact?
It is exact for the pixel you clicked. Bear in mind that compressed images and anti-aliased edges contain blended pixels, so for logos and flat graphics, sample the middle of a solid area. That gives you the colour the designer actually used.
What is the difference between the HEX and RGB values?
Nothing in meaning — they are two notations for the same colour. HEX packs the red, green and blue amounts into a short code like #0E7C7B for use in web code, while RGB lists them as three numbers, rgb(14, 124, 123), which design tools often prefer.
Can I pick a colour from a website without taking a screenshot?
On desktop Chrome and Edge, yes — the developer tools include an eyedropper that can sample anything on the page. The screenshot method in this guide works in every browser and on mobile, which is why we recommend it as the universal approach.
Is my image uploaded anywhere when I use the picker?
No. The picker runs entirely in your browser, on your device. Your image is never sent to a server, which makes it safe for client work and unreleased designs.
Be the first to share a useful question or thought.