How To Identify a Color on a Computer Screen
The digital world translates the colors around us into simple combinations of letters and numbers. To snatch any color you like, you just have to get its code, and you’ll be able to replicate it.
Has a specific color caught your eye while browsing the web? Or do you need to use a particular shade in your design to keep things consistent? Here’s how to grab the RGB or HEX code of any pixel on your screen.
Identify the RGB or HEX Value of Color on Screen
Identifying a color’s RGB or HEX value on your screen doesn’t require an expert eye or an expensive tool. On PC, there are multiple easy ways to get your color code.
Use a PC App
The first way to pick up any color from your screen is by using a computer app. You might already have this app on your PC.
Instant Eyedropper for Windows
If you need to grab color codes often, having a simple tool on-hand will make your life easier. Instant Eyedropper is a free app exclusively for Windows as of now.
Once you install it, you’ll be able to access it from your system tray. Just press and hold your left mouse button on the color of your choice, then release it. The app will instantly copy the color code to your clipboard, and you can paste it into whichever program you want. Instant Eyedropper works on Windows XP-10.
Digital Color Meter for Mac
Digital Color Meter is a similar tool pre-installed on Mac devices. Open your Applications folder and find Utilities. The Digital Color Meter tool should be right there.
Running this app will turn your cursor into an eyedropper you can use to pick up any color from your screen. The app will display the RGB values by default. You can copy these and convert them into HEX later on or tweak the options to get the exact color you want.
SIP for Mac
If you need a more advanced tool, you can look into SIP, available for Mac. SIP is more than a color picker. It also offers a slew of advanced features that any web designer will appreciate. You can edit your colors easily, organize them into palettes, and change their formats to suit your needs.
Unfortunately, SIP isn’t a free tool, but they offer a free trial. You can try it to see whether the extra features are worth your money.
The advantage of these desktop apps is that they can grab colors from virtually any part of your screen. The browser tools below can only do that inside web pages. Of course, you can bypass this restriction by uploading a photo or a screenshot to view it in your browser.
Use Your Browser
The following straightforward way to get the RGB or HEX code color is simply using your browser’s built-in tools. You will only be able to pick colors from the web page at hand, but you can use both Firefox and Chrome for this.
Here’s where to find Firefox’s color picker tool:
- Launch Firefox and open the website where you want to extract a color code.
- Click your browser’s menu (three horizontal lines) in the top right corner.
- Find the Web Developer Tools among the options. It might be under “More tools.”
- A window will open at the bottom of the page. Find the eyedropper icon, and you’ll be able to copy color codes with a click.
The steps are similar in Chrome:
- Launch Chrome and open the website you want.
- Click the menu (three vertical dots) in the top right corner and find the “Developer Tools” under “More Tools”.
- A window will open on the right side of the page. Find and click “Styles” in the second section.
- Under “body,” you will see a bunch of colored boxes. Click any of them to activate the color picker.
Tip: You can also open the developer tools in both browsers by right-clicking on any page and choosing “Inspect.”
Use a Browser Extension
Besides the developer tools, you can also use handy browser extensions to pick any color from a web page. Check out the following extensions that all do the job:
Use a Website
You don’t necessarily need an app or an extension to identify the RGB or HEX code for a color. If you have a specific image you want to grab a color from, you can also use a website. Countless websites allow you to upload a photo, extract a color code, or even generate a harmonious palette.
PineTools Image Color Picker
Find the Image Color Picker tool on the PineTools website and upload your image. Zoom in if necessary to find the pixel you want to grab. You’ll get the RGB values and the HEX code with a simple click.
Image Color Picker
The Image Color Picker website offers several other options than just image upload. Click “Use Your Image” and choose where you want to import an image. You can click any part of the image for a specific color, but the website also suggests a color palette based on the image.
Image Color Finder
Besides a simple color picker, Image Color Finder can also function as a creative tool. You can pixelate the uploaded image for a better overview of its colors and zoom in as much as you want. The site also automatically suggests a couple of colors.
Take a Screenshot
Finally, you can identify the color code without all the tools mentioned above. Instead, you will take a screenshot and pick the color from there.
- Make sure the color you want to pick is visible on your screen.
- Take a screenshot by pressing your keyboard’s Print Screen button (PrntScr, PrtScn, etc.) on Windows or by pressing and holding “Shift + Command + 3” at the same time on Mac. Your screenshot will be automatically copied to your clipboard.
Tip: You can also capture just a portion of your screen. On Windows, open the Snipping Tool from the Start Menu. On Mac, use the “Shift + Command + 4” shortcut.
- Open MS Paint (or any other image processing app) and paste the screenshot.
- Find the eyedropper tool and pick a color.
- Click “Edit colors” next to the color palette in MS Paint. Under the slider, you will see the RGB values of your current color.
To turn these numbers into a HEX code, you will need the help of a website.
- Head to RGB to HEX and input the values in the appropriate fields.
- Click “Convert to Hex,” and you’ll get your code.
What’s the difference between RGB and HEX? Which one do I need?
RGB and HEX codes express the same colors. Nevertheless, the code you’ll need depends on its intended use. RGB codes instruct your screen about how much red, green, and blue light to emit to produce the desired color. HEX codes transmit the same information but in the language of coding.
A designer or developer will most likely need the HEX codes of colors.
How do I identify a color on a mobile device?
To pick a color from your mobile device’s screen, you can download an app or use one of the websites mentioned above. There is also a Color Picker tool for iOS inside the Markup tool. It can give you the HEX code of color, too.
Get Any Color You See With Just a Click
Using the RGB or HEX color codes ensures that there is no chance of error. Thanks to these universal color languages, you can keep your designs consistent with the same shades. Since there are many ways to extract the color code on the screen, you just need to find the easiest method for you.
Which color picker tool do you prefer? Or do you have another trusted method to add? Let us know below.