Download Article
Check and identify color codes on your screen with apps or websites
Download Article
X
This article was co-authored by wikiHow staff writer, Hannah Dillon. Hannah Dillon is a Technology Writer and Editor at wikiHow. She graduated with a B.A. in Journalism from North Dakota State University in 2013 and has since worked in the video game industry as well as a few newspapers. From a young age Hannah has cultivated a love for writing and technology, and hopes to use these passions in tandem to help others in the articles she writes for wikiHow.
This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources.
This article has been viewed 421,012 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.
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.
Steps
-
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 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.Advertisement -
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 Ctrl+V to paste the hex code anywhere you wish, such as in your HTML or CSS code.
Advertisement
-
Open 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. -
Move the mouse cursor to the 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 also use the tool to identify colors on the web. Just open Safari (or your preferred browser) and navigate to a website that contains the color you want to identify.
- If Digital Color Meter is showing RGB colors instead of hex codes, go to View > Display Values > as Hexadecimal.
-
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 Color menu and selecting Copy Color as Text. -
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.
Advertisement
-
Go to 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 so you can select your desired color.- To get started, click Use your image in the lower-right part of the screen.
- Choose how you want to use your image. You can pick Upload image, Color on your Screen, Website Url, Image Url, Paste clipboard, or Search.
- Upload image will allow you to upload an image from your computer. Click Browse or drop image and choose the image you want to upload.
- Color on your Screen will allow you to pick a color that's currently on your screen. Click Start to begin.
- Website Url and Image Url allow you to paste a URL to a website or image you want to find a color from.
- Paste clipboard allows you to paste an image from your clipboard into imagecolorpicker.com.
- Search allows you to find an image on Pexels (a stock photo site).
-
Click or tap the color you want within the image/site preview. This displays the color hex code to the right of the image.- You can also see the RGB color under the hex code.
- Click Show more to see shades, tints, and color combinations with the hex code you picked.
- Look under your image to see a color palette of the main colors in the image.
-
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.
Advertisement
-
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 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 More tools > 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 Control + V (PC) or Command + V (Mac) to paste the hex code into your HTML, CSS, or any other type of text file.
Advertisement
-
Install the ColorZilla browser extension. ColorZilla is a browser extension with several functions, one of which is an eyedropper tool to find the hex codes of colors in your browser.[2] -
Pin the extension to your toolbar. Click the extensions icon in your toolbar to view all extensions, then click the pin icon next to ColorZilla to pin it for easy access. The extensions icon will vary based on your browser; it might be a puzzle piece, a star, or a cube, but it's always to the right of your address bar. -
Click the ColorZilla extension. It looks like an icon of an eyedropper. You will immediately be able to pick out colors on your screen. -
Left-click on a color to copy the color to your clipboard. The ColorZilla extension will remember the last color you picked and show it as a box over the eyedropper icon in your toolbar.- To cancel without picking a color, you can either click the X button in the ColorZilla bar at the top of your screen, or you can right-click on the page.
-
Paste 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.
Advertisement
Expert Q&A
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
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
-
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 into the website's source code to find the hex code.Thanks
Submit a Tip
All tip submissions are carefully reviewed before being published
Name
Please provide your name and last initial
Thanks for submitting a tip for review!
Advertisement
You Might Also Like
Advertisement
References
About This Article
wikiHow Technology Writer
This article was co-authored by wikiHow staff writer, Hannah Dillon. Hannah Dillon is a Technology Writer and Editor at wikiHow. She graduated with a B.A. in Journalism from North Dakota State University in 2013 and has since worked in the video game industry as well as a few newspapers. From a young age Hannah has cultivated a love for writing and technology, and hopes to use these passions in tandem to help others in the articles she writes for wikiHow. This article has been viewed 421,012 times.
How helpful is this?
Co-authors: 23
Updated: July 9, 2025
Views: 421,012
Article SummaryX
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.
Did this summary help you?
Thanks to all authors for creating a page that has been read 421,012 times.
Is this article up to date?
Advertisement
