How to copy a color from a logo without Photoshop
Pick a logo color in your browser, copy its HEX or RGB value, and avoid common sampling mistakes that can make the match look wrong.
You need the exact blue from a company logo for a slide, flyer, or website, but you do not have Photoshop. You can sample the color directly from the logo on your screen and copy its HEX, RGB, or HSL value.
The Color Picker works from anywhere on your screen in Chrome and Edge on a computer. It gives you a useful color value, but the result depends on the pixels you sample and how the logo is displayed.
Copy a color from the logo
- Open the logo on your computer, then open the Color Picker in Chrome or Edge. Keep the logo visible in a window or tab.
- When the browser asks to share your screen, choose the screen or window showing the logo. Follow the browser prompt to start sharing. The picker needs to see the displayed logo to sample it.
- Move the picker over a large, flat part of the color you want. Aim well inside the shape, away from its edge, outline, shadow, or lettering.
- Read the color value shown by the tool. Use HEX for many design and web projects, or RGB if the app asks for red, green, and blue numbers. Select the value and copy it, then paste it into your project.
If the logo is in a separate window, you may need to choose the full screen rather than just the browser tab so the picker can reach it. Close or stop screen sharing when you finish.
Choose the right color value
Use HEX for a website or design app
A HEX value usually looks like #1A73E8. It represents the amounts of red, green, and blue in a compact form. Many website editors and design apps accept HEX directly. Copy the leading # too if the field expects it.
Use RGB when the app asks for separate channels
RGB is written as three numbers, one for red, one for green, and one for blue. Each channel commonly runs from 0 to 255. Enter the numbers in the matching fields, and do not swap their order.
Use HSL to adjust the color by appearance
HSL describes hue, saturation, and lightness. It can be easier to make a sampled color slightly lighter or less vivid with HSL controls. If you need to reproduce the original shade, keep the sampled values unchanged rather than adjusting them by eye.
Fix a color that looks wrong
- Sample the center of the shape. Logo edges often contain blended pixels that soften the boundary against the background. These edge pixels are not the logo's flat color. Choose a broad, solid area instead.
- Zoom in on the logo. If the colored area is small, enlarge the logo before sampling. Avoid zooming so far that the program blurs or redraws the image in a way that changes the pixels you see.
- Check for transparency or effects. A transparent logo can look different over a colored background, and a shadow or gradient can have several shades. Sample the actual flat fill, not the visual effect around it.
- Allow screen sharing in the browser. If the picker cannot see the screen, use Chrome or Edge on a computer and respond to the screen-sharing prompt. On a Mac, check System Settings › Privacy & Security › Screen & System Audio Recording (some macOS versions say Screen Recording) and allow the browser if it is listed. On Windows 11, there is no equivalent general screen-capture permission switch for desktop browsers, so check the browser prompt and try sharing the full screen.
- Check the display profile only if needed. A color profile changes how colors appear on your monitor, so your eyes may see a shade differently from another person's display. Windows 11 has color options under Settings › System › Display › Color profile. On macOS, look under System Settings › Displays. Do not change a calibrated profile just to make one sampled color look right.
- Try a supported browser. Color Picker's full screen sampling works in Chrome and Edge on a computer. Other browsers may offer a reduced version or no screen sampling, and phones are not a substitute for the desktop workflow.
What the sampled value can and cannot tell you
The picker reports the color of the pixel visible on your screen. It does not automatically recover the original color code used to create the logo. Image compression, resizing, transparency, color profiles, and effects can all make a displayed pixel differ from the original design value.
If the logo is a small image, enlarge it and sample several points in the same solid area. If they all give the same value, that is a good sign that you found the fill color. If the values vary, the image may be compressed, scaled, or shaded. For a brand-critical match, ask for the original logo file or its approved color specification rather than relying on a screenshot.
On a computer, the picker reads what is displayed, so use the same screen and browser you plan to work with when consistency matters.
