How to Pick a Colour From an Image (Without Guessing)

October 18, 2026 • NOFYI Editorial Team

You like a colour in a photo, a logo, a poster, or a website screenshot, and you want to use exactly that colour in your own design. Guessing by eye is unreliable. Screens differ, memory fades, and two colours that look alike in a small thumbnail can look very different when used as a large background. An eyedropper tool removes the guesswork by reading the exact colour value from a pixel.

This guide explains how to pick a colour from an image, record it as a hex code, check that it works with text, and keep your palette small. It uses general tools found in most image editors, browsers, and design apps: an eyedropper or colour picker, a hex code field, and a contrast checker. The steps are the same whether you are choosing a heading colour, a button colour, or a background.

What an Eyedropper Does

An eyedropper is a tool that samples the colour of one pixel. When you click on a part of an image, the tool reads the red, green, and blue values for that pixel and shows them as a colour code. The most common code on the web is the hex code, a six-character code that starts with a hash sign, such as #2E7D6F. If you copy that code into a design tool, website editor, or document, you get the same colour, rather than a close guess.

Most tools also show the colour in other formats, such as RGB values, which list the amounts of red, green, and blue on a scale from 0 to 255. Hex and RGB describe the same colour in different notation. For web work, hex is usually the easiest to copy, paste, and share.

It helps to understand that a single pixel is not the whole story. A photo contains shading, reflections, compression, and texture. A leaf is not one flat green, and a wall is not one flat blue. The eyedropper gives you the colour of the exact pixel you clicked. If you click a highlight, you get a lighter colour. If you click a shadow, you get a darker colour. That is why sampling several nearby pixels and choosing a representative one matters.

How to Pick a Colour From an Image

Step one: open the image in an editor or colour-picker tool that has an eyedropper. Use the original image if you can, rather than a compressed copy, because compression can shift colours slightly at edges and in gradients.

Step two: zoom in on the area you want to sample. Look for a large, flat area of the colour, away from edges, text, shadows, and highlights. A flat area gives a more reliable sample than a thin line or a boundary between two colours.

Step three: click with the eyedropper on that area. Note the hex code shown. Then sample two or three nearby pixels in the same area. If the codes are very close, you have a stable colour. If they differ a lot, the area may be textured or shaded, and you should choose a middle value that looks right, or pick a flatter area.

Step four: copy the hex code and paste it into a swatch, a palette, or a test document. Do not type it from memory. A single wrong character can change the colour completely. Save the code with a clear name, such as Main teal, so you can reuse it later.

Step five: test the colour in context. Place it next to the colours you will use with it, at the size you will use it. A colour that looks good as a small dot can look overwhelming as a full-page background. A colour that looks good on a light background can disappear on a dark one. Adjust lightness or saturation only if you need to, and save the adjusted code as a new swatch rather than overwriting the original sample.

Worked Example: A Colour From a Photo

Suppose you have a photo of a calm coastal scene, and you want a heading colour for a simple travel page that matches the water. You open the photo in an image editor and zoom in on a flat area of water, away from the sky, the sand, and the white foam.

You click with the eyedropper on the water and see a hex code such as #2E7D6F. You sample two more nearby pixels and get similar codes, one slightly lighter and one slightly darker. That tells you the area is fairly consistent, and the middle sample is a fair representative of the water colour. You copy #2E7D6F and save it as Sea teal.

Next, you build a small palette around it. You pick a very light neutral for the page background, a dark neutral for body text, and the sea teal for headings and links. You also pick a slightly darker version of the teal for use on light backgrounds, because the original teal may not have enough contrast with white for small text. You keep the palette to four colours: background, text, main teal, and dark teal.

Then you test the palette. You create a test page with a heading in sea teal, body text in dark neutral, and a link in dark teal. You check the page on a phone and on a computer, and in daylight and in a dim room if you can. If the heading looks readable and calm on both screens, you keep the palette. If it looks washed out or too bright, you adjust the darker teal rather than adding a fifth or sixth colour.

Test Contrast Before You Use a Colour for Text

Colour is not only about how it looks. It also affects whether people can read your text. Light text on a light background, or dark text on a dark background, can be hard to read, especially for people with low vision or on a screen in bright light. A contrast checker compares the brightness of the text colour and the background colour and gives a ratio that shows how much they differ.

As a general rule, body text needs stronger contrast than large headings, because small letters are harder to read. Many design guides use the widely cited Web Content Accessibility Guidelines, known as WCAG, which recommend a contrast ratio of at least 4.5 to 1 for normal text. Large text can often use a slightly lower ratio, but when in doubt, choose stronger contrast. A contrast checker will tell you whether a pair passes a chosen level, so you do not have to guess.

To test, enter your text colour and your background colour into a contrast checker. Try the exact pair you will use, such as sea teal text on a white background, and also the reverse, such as white text on a sea teal button. If a pair fails, darken the darker colour, lighten the lighter colour, or use the colour for a decorative element rather than for text. Keep a record of the pairs that pass, so you do not have to retest every time you reuse the palette.

Keep the Palette Small

A small palette is easier to use, easier to remember, and easier to keep consistent. Start with a background colour, a text colour, one main accent colour from your image, and one darker or lighter version of that accent for contrast. That is usually enough for a simple page, document, or social graphic.

If you need more colours, add them for a clear reason, such as an error colour for warnings, or a second accent for a chart. Avoid adding a new colour for every section, because the result can look scattered. When you do add a colour, check it against the existing palette for contrast and harmony, and give it a name and a hex code in your notes.

A small palette also helps when you reuse a design. If you know that headings use one hex code, links use another, and the background uses a third, you can update the whole design by changing three values, rather than hunting for colours in many places.

Common Sampling Mistakes

One common mistake is sampling an edge. If you click on the boundary between two colours, the eyedropper may read a blended pixel that is neither colour. Zoom in and sample well inside the area you want.

Another mistake is sampling a highlight or shadow and treating it as the main colour. A shiny object can have a near-white highlight, and a fold can have a very dark shadow. Those pixels are real parts of the image, but they are not representative of the colour you want to reuse.

A third mistake is copying a colour from a screenshot that has a filter, a transparency effect, or a colour overlay. The sampled colour may be the result of the overlay, not the original colour. If you need the original, use the source image without effects, or note that the sampled colour includes the effect.

Finally, do not rely on how a colour looks on one screen alone. Screens differ in brightness, colour settings, and viewing angle. Test your palette on more than one device if you can, and ask someone else to look at it if the design will be used by other people.

Limitations

Picking a colour from an image gives you a colour value, not a guarantee that the colour will look the same everywhere. The same hex code can look different on different screens, in print, or under different lighting. Printing uses a different colour system, so a colour chosen for a website may need adjustment for print.

Photos also contain variation. A colour sampled from a photo is a snapshot of that pixel, not a definition of the object in the photo. The same object in a different photo, under different light, could give a different hex code. For that reason, treat the sampled colour as a starting point, and test it in your design rather than assuming it will match the original object in every setting.

Colour pickers also cannot tell you whether a colour is a good choice for your purpose. A colour that matches a photo may still be a poor choice for text, for a brand, or for accessibility. Use the eyedropper to get the value, then use contrast testing and a small palette to decide how to use it.

Frequently Asked Questions

Why does my sampled colour look different when I paste it?

You may have sampled an edge, a highlight, or a shadow, or the image may have had a filter or transparency effect. Sample a flat area away from edges, check the hex code, and test the colour on a plain background. If it still looks wrong, sample a different area and compare the codes.

What is a hex code?

A hex code is a short code for a colour used on the web. It starts with a hash sign followed by six characters that describe the amounts of red, green, and blue in the colour. Copying the code gives you the same colour in another tool, without guessing.

How many colours should a palette have?

For most simple designs, four colours are enough: a background, a text colour, a main accent, and a darker or lighter version of that accent for contrast. Add more only when you have a clear reason, and check each new colour against the existing palette.

Can I use a sampled colour for text?

You can, if the text and background pair has enough contrast. Test the exact pair in a contrast checker. If it fails, darken the text colour, lighten the background, or use the sampled colour for a heading, border, or graphic rather than for body text.

Quick Checklist

Open the original image, zoom in, and sample a flat area away from edges, highlights, and shadows. Sample several nearby pixels, copy the hex code exactly, and save it with a clear name. Build a small palette around it, test each text and background pair for contrast, and test the design on more than one screen. If a pair fails, adjust the darker or lighter colour rather than adding more colours.