Photo editing guide 6 min read

How To Pick Colour from a Photo or image online

Use Photo Studio’s free colour picker to sample a pixel, find its HEX code and reuse the sampled shade in shapes, text, brush strokes and gradients.

The Pick color tool in Photo Studio lets you sample a colour directly from a photo and reuse it in your design. Click a pixel on the canvas and the editor sets it as the foreground colour. You can use that colour for a new shape or brush stroke, read its six-digit HEX code and apply the same shade to an editable layer.

Try sampling a leaf for a green caption background, the side of a coffee cup for a warm accent or the main colour of a product for a label. The picker is free to use in your browser. It gives you the colour of the place you clicked, so it helps to decide whether you want a highlight, a shadow or a shade somewhere between them.

Step 1. Open the website and upload the image

Visit the Free Photo Editing Software homepage, then click Photo Editor in the navigation or Open Photo Editor in the header. When Photo Studio opens, click Open a photo and choose a JPEG, PNG or WebP image. If a photo is already open, choose Open photo at the top of the editor to load the image you want to sample.

Wait for the image to appear. Use Fit to locate the relevant object, then zoom in until you can distinguish its highlights, shadows and edges. If you are sampling for a design that will include a photo adjustment, make the adjustment first and wait for the canvas to update. The picker reads the colour visible at the point where you click.

Step 2. Choose Pick color and sample a pixel

In the tool rail, click the eyedropper labelled Pick color. You can also press I when you are working with a keyboard. Click or tap the part of the image whose colour you want. The foreground swatch changes to the sampled colour. On a wide screen, you can also see the updated HEX value beneath Foreground in the Color panel.

Click a point a few pixels inside the object rather than directly on a border. A border pixel may blend the subject and background. On a glossy object, a white highlight can give you a much lighter value than the main surface. Click a shaded area if you want a darker accent, or sample a well-lit but evenly coloured area for a closer match to the body of the object.

Step 3. Compare samples before choosing one

An object in a photo rarely has a single uniform colour. Consider a blue backpack photographed outdoors. The brightest patch may reflect the sky, while fabric folds can look almost black. Sample a plain section of the main fabric and look at the swatch. Try a second point and compare it with the first. Write down any HEX values you want to keep before clicking again, since each click replaces the foreground colour.

On a phone, zoom in before tapping so you have a larger target. If the Color panel is out of view, you can read the exact value from a new shape. After sampling, add a shape, open Layers and find the colour field beside the fill swatch. The new shape uses the sampled foreground colour, so that field gives you the value in text form.

Step 4. Reuse the colour in a new layer

Once the foreground swatch is set, choose Add shape in the toolbar. Pick a shape from the tool options and click the canvas to place it. The shape uses your sampled colour as its fill. Use Move layer to position the shape, or adjust its size in Layers. You can also switch to Brush and paint with the sampled colour on a new stroke layer.

For example, sample a muted blue from a product photo and add a Rounded rectangle behind a short caption. In the layer stack, place the caption above the shape. Read the words at a size close to the one you will publish. If the shade is a good match but the words are hard to read, try lighter or darker lettering and check how it looks over the full rectangle.

Step 5. Apply the HEX value to an existing layer

A HEX value such as #4F6B83 describes a colour with six characters after the hash. Record the value shown for Foreground, then select the layer you want to recolour. In Layers, enter the complete value in Color hex for a shape or Text color hex for a text layer. Use Stroke color hex under Outline if you want the sampled colour on the edge of the object.

This step is useful when your layout is already in place. You can match a caption, two shape fills and an outline with the same value. Check the layer name before typing and verify that the right object changes. If a fill appears different from the swatch, check Opacity and Blend mode. These controls can change how that colour appears over the photo beneath it.

If you need a small palette, collect two or three values with different jobs. A medium tone can work for a label fill, a darker tone for lettering and a pale tone for an outline. Keep a note of which pixel each value came from so you can find a similar shade later.

Step 6. Check the colour against the finished composition

Look at the whole layout after applying the colour. A shade sampled from a large area of an image can feel stronger when used in a small, sharply outlined badge. Try moving the badge to the position it will occupy in the final image and check contrast there. If a headline spans light and dark parts of the photo, a solid shape behind it can keep the lettering readable.

To use the sample as the start of a fade, choose Gradient and check the Start swatch. Set the end colour and opacity before drawing the gradient. The gradient guide shows how to blend a sampled shade into a photo. For solid accents, see the shape layer guide.

Step 7. Save the shade and the finished image

Choose Download image for a PNG of the finished composition. Use Download options if you need JPEG or WebP. Save the HEX value separately if you will use the colour in a website, a slide or another photo. Give each saved shade a name that tells you where it belongs, such as “product label background.”

If you want to change the colour or placement of your layers later, choose File → Download project and keep that copy alongside the export. Reopen the finished image and check the accents and lettering at the size your audience will see.

Frequently asked questions

Why do two points on the same object give me different HEX values?

The picker samples the pixel you click. Light, shadows, reflections and texture all affect the pixels in a photo, even across a single surface.

Why did clicking the eyedropper leave my existing text unchanged?

Picking a colour sets the foreground swatch. Select your text layer and use Text color hex in Layers to apply the sampled value to it.

Can I sample a colour from a visible shape?

Yes. Pick color reads the rendered canvas, including visible layers. Sample the middle of a filled shape for a clean reading away from the edge.