This article was co-authored by wikiHow staff writer, Nicole Levine, MFA. Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions.
This article has been viewed 322,515 times.
Learn more...
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 wikiHow teaches you how to use a variety of free tools to quickly identify the hex code of any color.
Steps
Using Digital Color Meter on a Mac
-
1Open Digital Color Meter on your Mac. This tool, which comes with macOS, can identify the color value of any color on the screen.[1] Open Finder, double-click the Applications folder, double-click the Utilities folder, and then double-click Digital Color Meter to open it.
-
2Move 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 -
3Press ⌘ Command+L. This locks both the horizontal and vertical apertures, which means the color value will not change when you move the mouse.
-
4Press ⇧ Shift+⌘ Command+C to copy the hex code to the clipboard. You can also copy the hex code by clicking the Color menu and selecting Copy Color as Text.
-
5Press ⌘ Command+V to paste the copied code. You can paste it directly into your HTML code, a text file, or any other typing area.
-
6Press ⌘ 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
-
1Install 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.
-
2Open Color Cop. You'll find it in your Start menu.
-
3Drag 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.
-
4Let go of the mouse button to reveal the hex code. The code will appear in the blank at the center of the application.
-
5Double-click the hex code and press Ctrl+C. This copies the hex code to your clipboard.
-
6Paste the code where you need it. You can use Ctrl + V to paste the hex code anywhere you wish, such as in your HTML or CSS code.
Using Imagecolorpicker.com
-
1Go 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.
-
2Upload 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.
-
3Click 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.
-
4Click 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)
-
1Open 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.
-
2Go to a website that contains the color you want to identify. Make sure the element you need the color for is in view.
-
3Click the menu ☰. It's the three horizontal lines at the top-right corner of Firefox.
-
4Click the Web Developer menu. Another menu will expand.
-
5Click Eyedropper. Your mouse cursor will turn into a large circle.
-
6Click 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.
-
7Paste the code where you need it. 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.
About This Article
1. Open Digital Color Meter on your Mac.
2. Move the mouse cursor to the color.
3. Press Command + L to lock the cursor.
4. Press Shift + Command + C to copy the hex code.
5. Paste the hex code into a file.