How to sample a color from an image in a browser
Pick a color from an image on your screen and get its HEX, RGB, or HSL value. Learn how to sample accurately in a browser without installing software.
You found the exact shade you want in a photo, but need its color code for a design, website, or document. You can sample the color directly from the image as it appears on your screen, without installing an app.
The Color Picker gives you color values such as HEX, RGB, and HSL. It works best in Chrome or Edge on a computer. The browser can sample what is displayed, though that may not be identical to the image file's original pixel data.
Sample a color from the image
- Open the Color Picker in Chrome or Edge on a computer. Open the image in a browser tab or image viewer, and keep it visible on the screen.
- Make the image large enough to see the area you want, but leave the specific color unobstructed. For a broad, flat color, choose a point well away from its edges.
- In the Color Picker, choose its option for picking a color from the screen. If the browser asks to allow the action, approve it.
- Move the picker over the image and select the point you want to sample. Avoid a border, shadow, or area where two colors meet.
- Read the displayed HEX, RGB, or HSL value. If you need another part of the image, repeat the screen-picking action and select a new point.
If the image is in another tab or window, switch to it when the screen picker is active. Keep the image on the same display as the one where you are using the picker. The tool can only sample colors that are visible on your screen.
Choose the color value you need
HEX for web colors
A HEX value looks like #3A78B5. It is a compact way to specify a color in many web design tools and stylesheets. Copy the full value, including the #, if the field you are using expects HEX.
RGB for channel values
RGB gives the red, green, and blue amounts that combine to make the color. Each channel is commonly shown from 0 to 255. This format is useful when a program asks for separate color channels rather than one HEX code.
HSL for adjusting a shade
HSL describes hue, saturation, and lightness. Hue is the general color, saturation is how vivid it is, and lightness is how bright or dark it is. If you want to make a sampled color slightly paler or less vivid, HSL can be easier to adjust than individual RGB values.
The sampled color looks different from the image
Check that you selected a solid part of the image, not an edge or a partly transparent area. The color may also look different in another app or on another display, even when the numeric value is the same.
Fix common sampling problems
- Use a supported browser. Screen color picking works in Chrome and Edge on a computer. Other browsers may offer a reduced version or no screen-picking option. If the option is missing, try Chrome or Edge.
- Allow the browser action. If you declined a browser prompt, start screen picking again and allow it. If the browser remembers a blocked permission, open the site permissions from the icon beside the address bar, change the relevant permission, and reload the page.
- Keep the target visible. A minimized window, hidden tab, or image covered by another window cannot be sampled. Bring the image forward and try again.
- Choose a clearer point. A pixel near text, a border, or a blended edge may contain a mix of neighboring colors. Pick the center of a larger area with an even fill.
- Check the image scale. When a browser or viewer resizes an image, it may blend nearby pixels to draw the new size. View the image at its original size when possible, then sample the center of the feature you want.
- Reload the tool. If the picker stops responding, close and reopen its window, then try again. If it still fails, restart the browser and test in a fresh tab.
What the browser samples
The picker reads the color rendered on your display, not necessarily the exact color stored in the image file. Image resizing can blend nearby pixels. Transparent areas show the background underneath, and soft edges can contain a mixture of the foreground and background colors. JPEG compression can also change pixel values slightly.
Color profiles can affect how an image is displayed, and your monitor's settings affect how it looks to you. So a screen sample is useful when you want to match the visible appearance of an image. If you need the original numeric value of a specific image pixel, use a method that reads the image file's pixel data instead.
The Color Picker works in your browser, and the image stays where you opened it on your device.
