Find an RGB value in a photo for a mobile app

You have a photo with a color you want to use in a mobile app mockup, but estimating the shade by eye is unreliable. A browser color picker can read the color shown on your screen and give you its RGB values.

Use the Color Picker to sample a spot in the photo. Then decide whether to use that exact color or adjust it to work better in your app design.

Find the RGB value

Open the photo on your computer and leave it visible on screen. For the simplest result, use the original image rather than a thumbnail or a small preview.
Open the Color Picker in Chrome or Edge on a computer. Its pick-from-screen feature works in those browsers. Other browsers may offer a reduced version or no screen picking.
Start the color-picking action in the tool. If the browser opens its own picker, move it over the photo and select the pixel you want to sample.
Read the RGB value shown by the tool. It also provides HEX and HSL values, which you can keep with the color notes for your mockup.

Choose a point well inside the area you want, not on a border, shadow edge, or piece of small text. A single pixel can differ from the surrounding area, especially in a compressed photo or a gradient.

What the result means

The RGB value has three numbers

RGB describes a color with red, green, and blue channel values. Each channel is usually shown as a number from 0 to 255. For example, rgb(46, 88, 130) means 46 red, 88 green, and 130 blue. A higher number means more of that color channel in the displayed pixel.

The numbers describe the point you sampled, not the whole photo. If you pick a nearby pixel, the values may change slightly. For a broad area such as a painted wall or sky, sample a few spots and compare them before choosing a representative value.

The HEX value describes the same color

A HEX value such as #2E5882 is another way to write the same red, green, and blue amounts. Many design tools accept either HEX or RGB. Use whichever format the mockup editor requests, and check that all three channels stay in the right order when you enter them.

The sampled color looks different in the mockup

The picker reads the color as it appears on your screen. It does not recover the original camera color or undo the effects of lighting, image editing, compression, or the display's color settings. A photo may also have a color profile that changes how it appears in different apps or on another screen.

Use the color in your mockup

Decide what job the color should do before applying it everywhere. A saturated color from a photograph can work well as a small accent, but it may feel too strong as a full-screen background. Try it on one button, icon, or highlight first, then view the mockup at the size of a real phone screen.

For a brand accent: Keep the sampled value as a starting point, then check how it looks beside your other interface colors.
For a large background: Consider a lighter or less saturated variation so that controls and text remain easy to see.
For text or icons: Check that the foreground stands out from the background. RGB values alone do not tell you whether the combination is readable.
For a gradient or textured photo: Sample more than one location. One RGB value cannot represent a whole area that changes from pixel to pixel.

If your design tool has a color field, enter the RGB numbers in the same order shown by the picker. If it asks for separate channels, enter red, green, and blue in their matching fields. Save the sampled value somewhere alongside the mockup so you can reuse it consistently.

If the sampled color looks wrong

Sample a larger, flatter area. Avoid edges and tiny details where neighboring pixels blend. If the photo has texture, compare several samples and choose a value that represents the area you have in mind.
Check the photo's zoom level. A small preview can be rescaled or softened by the photo app. Zoom in enough to target the intended part, but avoid relying on an enlarged, visibly pixelated preview.
Check whether a display setting is changing the picture. On Windows 11, look under Settings › System › Display › Color profile. On macOS, open System Settings › Displays and review the color profile for the display. Night light, True Tone, or other display adjustments can affect what you see, even though the picker reports a screen color.
Compare the result in the destination mockup. The same RGB values can appear different across displays and design apps. If matching the photo precisely matters, use the same screen and app for sampling and review, and treat the result as a practical screen match rather than a guarantee of the original image color.

The Color Picker samples what is displayed on your computer, so keep the photo open on the same screen while you pick its color.