How to Find the Hexadecimal Code of Colors on a Computer Screen

Colors are recognized in HTML and CSS using hexadecimal codes. If you want to create another web page or HTML project and want to add an element that matches a certain color in an image, web page, or window on your computer screen, you need to find the hexadecimal code of that color. This article will show you how to use a variety of free tools to quickly determine the hexadecimal code of any color.

Table of Contents

Using Digital Cpor Meter on Mac

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/9e/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-1- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-1-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/9/9e/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-1-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-1-Version-3.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:545,”licensing”:”<div class=”mw-parser-output”></div>”}

Open Digital Cpor Meter on your Mac. This is a tool available on macOS that helps you recognize the color value of any color on the screen. ^{[1] X Research Sources} Open Finder, double-click the Applications folder, double-click the Utilities folder, and double-click Digital Cpor Meter to open the application.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b6/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-2- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-2-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/b/b6/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-2-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-2-Version-3.jpg”,”smallWidth”:460,”smallHeight”:346,”bigWidth” :728,”bigHeight”:548,”licensing”:”<div class=”mw-parser-output”></div>”}

Move the cursor to the desired color. When you move the mouse, the value in the tool will be updated according to the actual. Do not move the mouse out of this position until you have locked both the horizontal and vertical apertures.

You can also use this tool to spot colors on web pages. Just open Safari (or your favorite browser) and go to the website in the color you want to recognize.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/64/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-3- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-3-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/6/64/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-3-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-3-Version-3.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Press ⌘ Command + L . This locks the horizontal and vertical apertures, which means the color value won’t change as you move the mouse.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a9/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-4- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-4-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/a/a9/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-4-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-4-Version-3.jpg”,”smallWidth”:460,”smallHeight”:346,”bigWidth” :728,”bigHeight”:548,”licensing”:”<div class=”mw-parser-output”></div>”}

Press ⇧ Shift + ⌘ Command + C to copy the hexadecimal code to the clipboard. You can also copy the code by clicking the Cpor menu and choosing Copy Cpor as Text .

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/e4/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-5- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-5-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/e/e4/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-5-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-5-Version-3.jpg”,”smallWidth”:460,”smallHeight”:347,”bigWidth” :728,”bigHeight”:549,”licensing”:”<div class=”mw-parser-output”></div>”}

Press ⌘ Command + V to paste the copied code. You can directly paste the code into your HTML code, text file, or any input field.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/59/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-6- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-6-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/5/59/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-6-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-6-Version-3.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Press ⌘ Command + L to unlock aperture. If you want to recognize a different color, this immediately unlocks the pointer to become a color value detector.

Using Cpor Cop on Windows

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b8/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-7- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-7-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/b/b8/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-7-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-7-Version-3.jpg”,”smallWidth”:460,”smallHeight”:348,”bigWidth” :728,”bigHeight”:550,”licensing”:”<div class=”mw-parser-output”></div>”}

Install Cpor Cop. This is a free add-on that you can use to quickly determine the hexadecimal code of any color on the screen. Here’s how to install the app:

Go to http://cporcop.net/download using a web browser.
Click cporcop-setup.exe under “self-installing”. If the file doesn’t download automatically right away, you’ll click Save or OK to start downloading.
Double-click the downloaded file (stored in the Downloads folder and usually in the lower left corner of the browser tab).
Follow the on-screen instructions to install the app.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/ac/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-8- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-8-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/a/ac/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-8-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-8-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth” :728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open Cpor Cop. You will find the application in the Start menu.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b6/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-9- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-9-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/b/b6/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-9-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-9-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth” :728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Drag the dropper icon to the color you want to identify. You can recognize any color on the screen, including colors in other apps and websites.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/77/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-10- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-10-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/7/77/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-10-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-10-Version-3.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Release the mouse button to see the hexadecimal code. The code shows up in the field in the middle of the app.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b3/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-11- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-11-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/b/b3/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-11-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-11-Version-3.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Double click the hexadecimal code and press Ctrl + C . This will copy the hexadecimal code to the clipboard.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/ee/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-12- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-12-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/e/ee/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-12-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-12-Version-3.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth” :728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Paste the code where it is needed. You can use Ctrl + V to paste the hexadecimal code anywhere, such as in HTML or CSS code.

Use Imagecporpicker.com

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/53/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-13- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-13-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/5/53/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-13-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-13-Version-3.jpg”,”smallWidth”:460,”smallHeight”:346,”bigWidth” :728,”bigHeight”:547,”licensing”:”<div class=”mw-parser-output”></div>”}

Visit https://imagecporpicker.com on your computer, phone or tablet. You can use this free tool to determine the hexadecimal code of every color in an uploaded image. This method works on any Android, iPhone or iPad browser.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b5/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-14- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-14-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/b/b5/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-14-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-14-Version-3.jpg”,”smallWidth”:460,”smallHeight”:349,”bigWidth” :728,”bigHeight”:552,”licensing”:”<div class=”mw-parser-output”></div>”}

Upload a photo and enter the URL. You can choose to upload photos that are available on your computer or use an online photo or website. Both methods display a photo or web page for you to choose from.

To upload a photo, scroll down and select Upload your image , navigate to the photo on your computer, phone or tablet and select the upload method.
To use the website, scroll down to the “Use this box to get the HTML cpor code from a website” option, enter the URL and click or tap Go to Take website (Get website).
To select an image on a page instead of the entire website, enter the URL to the image in the “Use this box to get the HTML cpor code from a picture via this URL” box. via this URL), and then click or tap Take image .

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/87/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-15- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-15-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/8/87/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-15-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-15-Version-3.jpg”,”smallWidth”:460,”smallHeight”:346,”bigWidth” :728,”bigHeight”:547,”licensing”:”<div class=”mw-parser-output”></div>”}

Click or tap the color you want in the photo/page preview. This shows you the hexadecimal color code in the bottom left corner of the screen.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f3/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-16- Version-3.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-16-Version-3.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/f/f3/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-16-Version-3.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-16-Version-3.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Click or tap the copy icon to copy the hexadecimal code to the clipboard. It’s the two overlapping squares to the right of the hexadecimal code. You can paste the code into any text file or input field.

Use Firefox (for color on web pages)

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a7/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-17- Version-2.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-17-Version-2.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/a/a7/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-17-Version-2.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-17-Version-2.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:545,”licensing”:”<div class=”mw-parser-output”></div>”}

Open Firefox on your Windows or Mac computer. The Firefox browser has a free eyedropper tool that you can use to detect the hexadecimal code of any color on a web page. If your computer has Firefox, you’ll find it in the Start menu (on Windows) or the Applications folder (on macOS).

You can download Firefox for free at https://www.mozilla.org/en-US/firefox.
Firefox only tells you the color value on the website. You cannot use it outside of the browser.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/37/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-18- Version-2.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-18-Version-2.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/3/37/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-18-Version-2.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-18-Version-2.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Go to a website with a color to recognize. Make sure the element for which you need to find the color code is visible on the screen.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/bf/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-19- Version-2.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-19-Version-2.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/b/bf/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-19-Version-2.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-19-Version-2.jpg”,”smallWidth”:460,”smallHeight”:346,”bigWidth” :728,”bigHeight”:548,”licensing”:”<div class=”mw-parser-output”></div>”}

Click the menu ☰ . It’s the three dashes icon in the top right corner of Firefox.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d7/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-20- Version-2.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-20-Version-2.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/d/d7/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-20-Version-2.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-20-Version-2.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth” :728,”bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Click the Web Developer menu. Another menu opens.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/ac/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-21- Version-2.jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-21-Version-2.jpg”,”bigUrl”:”https: //www.wikihow.com/images/thumb/a/ac/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-21-Version-2.jpg/v4- 728px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-21-Version-2.jpg”,”smallWidth”:460,”smallHeight”:346,”bigWidth” :728,”bigHeight”:547,”licensing”:”<div class=”mw-parser-output”></div>”}

Click Eyedropper . The cursor will turn into a large circle.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6a/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-22. jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-22.jpg”,”bigUrl”:”https://www.wikihow.com/ images/thumb/6/6a/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-22.jpg/v4-728px-Get-the-Hex-Code-of- a-Cpor-on-Your-Computer-Screen-Step-22.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Click the color you want to recognize. You will see the hexadecimal value of the color displayed as soon as you move the mouse somewhere. When you click, Firefox saves the hexadecimal code to the clipboard.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6c/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-23. jpg/v4-460px-Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-23.jpg”,”bigUrl”:”https://www.wikihow.com/ images/thumb/6/6c/Get-the-Hex-Code-of-a-Cpor-on-Your-Computer-Screen-Step-23.jpg/v4-728px-Get-the-Hex-Code-of- a-Cpor-on-Your-Computer-Screen-Step-23.jpg”,”smallWidth”:460,”smallHeight”:344,”bigWidth”:728,”bigHeight”:545,”licensing”:”<div class=”mw-parser-output”></div>”}

Paste the code where it is needed. You can use the keyboard shortcut Contrp + V (on Windows) or Command + V (on Mac) to paste the hexadecimal code into any HTML, CSS, or text file.

Advice

There are many websites, browser extensions, and photo-editing programs that allow you to use color pickers to find hexadecimal codes.
If you know the person who created a website with the color you’re looking for, try asking what hexadecimal code they used. Or, you can open the website’s source code to find the hexadecimal code here.

Steps

Using Digital Cpor Meter on Mac

Using Cpor Cop on Windows

Use Imagecporpicker.com

Use Firefox (for color on web pages)

Advice

Related Posts