Simple Ways to Find the Hex Code of Any Color on Your Computer

Download Article

Check and identify color codes on your screen with apps or websites

Download Article

Using Digital Color Meter on a Mac

|

Using Color Cop for Windows

|

Using Imagecolorpicker.com

|

Using Firefox (for Colors on the Web)

|

Video

|

Tips

Colors are identified in HTML and CSS by their hexadecimal codes. If you're creating a webpage or other HTML project and want to include an element that matches a specific color in an image, website, or window on your computer screen, you'll need to find the color's hex code. This How.com.vn teaches you how to use a variety of free tools to quickly identify the hex code of any color.

How to Find a Hex Color Code

Upload the picture to an online color chooser, like Image Color Picker, and tap the color on the screen you want to identify. Then, tap the Copy icon next to the 6-digit hex code to copy it. Alternatively, use programs like Digital Color Meter or Color Cop.

Method 1

Method 1 of 4:

Using Digital Color Meter on a Mac

Download Article

This tool, which comes with macOS, can identify the color value of any color on the screen.^{[1]XResearch source} Open Finder, double-click the Applications folder, double-click the Utilities folder, and then double-click Digital Color Meter to open it.
2
Move the mouse cursor to color you want to identify. As you move the mouse, the values in the tool will update in real-time. Don't move your mouse from this location until you lock both the horizontal and vertical apertures.
- You can use the tool to identify colors on the web, too. Just open Safari (or your preferred browser) and navigate to a website that contains the color you want to identify.
Advertisement
This locks both the horizontal and vertical apertures, which means the color value will not change when you move the mouse.
You can also copy the hex code by clicking the Color menu and selecting Copy Color as Text.
You can paste it directly into your HTML code, a text file, or any other typing area.
If you want to identify another color, this releases the lock so the cursor once again acts as a color value identifier.

Method 2

Method 2 of 4:

Using Color Cop for Windows

Download Article

1
Install Color Cop. Color Cop is a small, free utility you can use to quickly identify the hex code of any color on the screen. Here's how to get the app:
- Go to http://colorcop.net/download in a web browser.
- Click colorcop-setup.exe under "self-installing." If the file doesn't download automatically, click Save or OK to start the download.
- Double-click the downloaded file (it's in the Downloads folder, and usually at the bottom-left corner of the browser tab).
- Follow the on-screen instructions to install the application.
You'll find it in your Start menu.
You can identify any color on the screen, including those in other applications and on websites.
The code will appear in the blank at the center of the application.
This copies the hex code to your clipboard.
You can use Ctrl + V to paste the hex code anywhere you wish, such as in your HTML or CSS code.

Method 3

Method 3 of 4:

Using Imagecolorpicker.com

Download Article

Go to https://imagecolorpicker.com on your computer, phone, or tablet. You can use this free tool to identify the hex code of any color in an uploaded image. This method will work in any web browser, including those on your Android, iPhone, or iPad.
2
Upload an image or enter a URL. You'll need to decide whether you want to upload your own image or use an image or website already online. Either method can be used to display a picture or webpage for you to select your desired color.
- To upload an image, scroll down and select Upload your image, navigate to the image on your computer, phone, or tablet, and select the option to upload it.
- To use a website, scroll down to the "Use this box to get the HTML color code from a website" option, enter the URL, and then click or tap Take website.
- To select a direct image on the web instead of a whole website, enter the URL to the image into the "Use this box to get the HTML color code from a picture via this URL" box, then click or tap Take image.
This displays the color hex code at the bottom-left corner of the screen.
It's the two overlapping squares to the right of the hex code. You can then paste it into any text file or typing area.

Method 4

Method 4 of 4:

Using Firefox (for Colors on the Web)

Download Article

1
Open Firefox on your PC or Mac. The Firefox web browser comes with a free Eyedropper tool you can use to identify the hex code of any color on the web. If you have Firefox, you'll find it in the Start menu (Windows) or in the Applications folder (macOS).
- You can download Firefox for free at https://www.mozilla.org/en-US/firefox.
- Firefox will only tell you the value of a color on a website. You can't use it outside of the browser.
Make sure the element you need the color for is in view.
It's the three horizontal lines at the top-right corner of Firefox.
Another menu will expand.
Your mouse cursor will turn into a large circle.
You'll notice the hex value of the colors update live as you move the mouse to the location. Once you click the mouse, Firefox will save the hex code to your clipboard.
You can use Control + V (PC) or Command + V (Mac) to paste the hex code into your HTML, CSS, or any other type of text file.

Expert Q&A

Search

Add New Question

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Video

Tips

There are other websites, browser extensions, and image editing programs that will also allow you to use a color picker to reveal the hue's hex code, too.
Thanks
Helpful0 Not Helpful0
If you know who created the webpage with the color you're trying to match, you can always ask them what hex code they used. Alternatively, you can dig in the website's source code to find the hex code listed there.
Thanks
Helpful0 Not Helpful0