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 minHour teaches you how to use a variety of free tools to quickly identify the hex code of any color.
Using Digital Color Meter on a Mac
Open Digital Color Meter on your Mac.
This tool, which comes with macOS, can identify the color value of any color on the screen. Open Finder, double-click the folder, double-click the folder, and then double-click to open it.
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.
Press ⌘ Command+L.
This locks both the horizontal and vertical apertures, which means the color value will not change when you move the mouse.
Press ⇧ Shift+⌘ Command+C to copy the hex code to the clipboard.
You can also copy the hex code by clicking the menu and selecting .
Press ⌘ Command+V to paste the copied code.
You can paste it directly into your HTML code, a text file, or any other typing area.
Press ⌘ Command+L to unlock the apertures.
If you want to identify another color, this releases the lock so the cursor once again acts as a color value identifier.
Using Color Cop for Windows
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.
Open Color Cop.
You’ll find it in your Start menu.
Drag the eyedropper icon to the color you want to identify.
You can identify any color on the screen, including those in other applications and on websites.
Let go of the mouse button to reveal the hex code.
The code will appear in the blank at the center of the application.
Double-click the hex code and press Ctrl+C.
This copies the hex code to your clipboard.
Paste the code where you need it.
You can use to paste the hex code anywhere you wish, such as in your HTML or CSS code.
Using Imagecolorpicker.com
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.
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.
Click or tap the color you want within the image/site preview.
This displays the color hex code at the bottom-left corner of the screen.
Click or tap the copy icon to copy the hex code to your clipboard.
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.
Using Firefox (for Colors on the Web)
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.
Go to a website that contains the color you want to identify.
Make sure the element you need the color for is in view.
Click the menu ☰.
It’s the three horizontal lines at the top-right corner of Firefox.
Click the Web Developer menu.
Another menu will expand.
Click Eyedropper.
Your mouse cursor will turn into a large circle.
Click the color you want to identify.
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.
Paste the code where you need it.
You can use (PC) or (Mac) to paste the hex code into your HTML, CSS, or any other type of text file.
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.
- 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.