How to find the HEX code of a color on screen
Pick a color anywhere on your screen and get its HEX code, then learn how to copy it and why the same color may look different elsewhere.
You see a color on a website, photo, or app and want to use that exact shade somewhere else. The hard part is usually not understanding HEX codes, it is sampling the color accurately from your screen.
The Color Picker can sample a pixel from anywhere on your screen and show the color as a HEX value, along with formats such as RGB and HSL. Use it on a computer in Chrome or Edge for the full screen-picking feature.
Find the HEX code
- Open the Color Picker in Chrome or Edge on a computer.
- Start the screen-picking mode using the control shown in the tool. Follow the browser or system prompt if one appears.
- Move the picker to the exact part of the screen you want to sample. For a small detail, zoom in on the page or image first so you can target the right pixel.
- Select the color. Read the HEX value shown in the tool. It usually looks like
#3A78C2.
If the HEX value is selectable text, you can select it and press Ctrl + C on Windows or Command + C on macOS. If the tool provides a copy control, you can use that instead. Paste the value into the app or field where you need the color.
What the result means
The value has six characters after the hash
A value such as #3A78C2 describes a color using three pairs of hexadecimal digits. The first pair represents red, the second green, and the third blue. Each pair runs from 00 for none of that color to FF for the strongest amount. The hash mark is part of the common web format, so include it if the field expects a HEX color.
You see a shorter value, such as #39C
Some tools or apps use a three-character shorthand. Each character stands for a repeated pair, so #39C means #3399CC. If an app does not accept the short form, expand each character into a pair before entering it.
The color looks different after you paste it
The HEX value identifies the color numbers, but it cannot guarantee that every screen displays them identically. Display brightness, color profiles, and the app's color settings can change how a shade looks. Check the value in the destination app before adjusting it, and make sure the app is treating the field as HEX rather than RGB or another format.
The code changes when you sample nearby
That is normal if the area contains gradients, antialiasing, texture, or a soft shadow. A pixel at the edge of text may blend the text color with the background, so it will not match either one exactly. Sample a flat area away from edges when you want a solid color.
If screen picking does not work
- Use Chrome or Edge on a computer. Color Picker's full screen-sampling feature works in these browsers on a computer. Other browsers may offer a reduced version or no screen picking at all. If the screen-picking option is missing, switch to Chrome or Edge and reopen the tool.
- Check that the browser is ready to sample. Start the screen-picking mode from the tool and look for a prompt from the browser or operating system. Follow its instructions, then try selecting the color again.
- Make the target easier to select. Zoom in on the page or enlarge the image before sampling. Avoid selecting a border, shadow, or partly transparent edge if you need the underlying flat color.
- Sample a visible color. A minimized window, hidden menu, or content covered by another window cannot be selected. Bring the target into view and try again.
- Use the displayed color values as a fallback. If your browser does not support screen sampling, check whether the page or app shows the color in its own settings. The Color Picker may still provide other ways to work with colors, depending on your browser.
You do not need to know what the numbers mean to use the result. Copy the HEX value as shown, including the hash when the destination field expects it, and check the color in the place where you plan to use it.
When to use HEX, RGB, or HSL
HEX is common in website builders, design tools, and style settings. RGB is useful when an app asks for separate red, green, and blue numbers. HSL describes hue, saturation, and lightness, which can make it easier to adjust a shade while keeping its general color. The Color Picker shows these formats for the same sampled color, so choose the one the destination app requests.
A sampled HEX value represents the color at one screen pixel, not necessarily the original color in the image or file. If the source is displayed with a filter, transparency, or color adjustment, the on-screen sample may differ from the source's stored value.
