PDF download Download Article
Check and identify color codes on your screen with apps or websites
PDF download Download Article

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.

Method 1
Method 1 of 4:

Using Digital Color Meter on a Mac

PDF download Download Article
  1. 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.
  2. 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
  3. This locks both the horizontal and vertical apertures, which means the color value will not change when you move the mouse.
  4. You can also copy the hex code by clicking the Color menu and selecting Copy Color as Text.
  5. You can paste it directly into your HTML code, a text file, or any other typing area.
  6. If you want to identify another color, this releases the lock so the cursor once again acts as a color value identifier.
  7. Advertisement
Method 2
Method 2 of 4:

Using Color Cop for Windows

PDF download Download Article
  1. 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.
  2. You'll find it in your Start menu.
  3. You can identify any color on the screen, including those in other applications and on websites.
  4. The code will appear in the blank at the center of the application.
  5. This copies the hex code to your clipboard.
  6. You can use Ctrl + V to paste the hex code anywhere you wish, such as in your HTML or CSS code.
  7. Advertisement
Method 3
Method 3 of 4:

Using Imagecolorpicker.com

PDF download Download Article
  1. 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. 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.
  3. This displays the color hex code at the bottom-left corner of the screen.
  4. 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.
  5. Advertisement
Method 4
Method 4 of 4:

Using Firefox (for Colors on the Web)

PDF download Download Article
  1. 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).
  2. Make sure the element you need the color for is in view.
  3. It's the three horizontal lines at the top-right corner of Firefox.
  4. Another menu will expand.
  5. Your mouse cursor will turn into a large circle.
  6. 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.
  7. 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.
  8. 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.
  • 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.
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

Understand HexadecimalUnderstand Hexadecimal
Use Adobe Photoshop Tools5 Easy Ways to Use Tools in Adobe Photoshop
Use Font Color Tags in HTMLUse Font Color Tags in HTML
Make a Fake IDMake a Fake ID
Type Symbols Using the ALT KeyUse Your Keyboard to Type Symbols: Alt Key + More
Make Symbols on a MacThe Ultimate Guide: How to Show Symbols, Accents & Emojis on a Mac
Type Less than or Equal to Type a Less Than or Equal to Sign: PC & Mac
Use a Symbol When You Have a Laptop2 Easy Ways to Type a Symbol on a Laptop Keyboard
Check Dpi of Image4 Simple Ways to Find the DPI of an Image on a Computer
Open DWG Files Open and View DWG Files (on Windows, Mac, & More)
Text a Heart Using Symbols Text a Heart <3 Using Symbols Instead of Emoji
Hide Icon Names on a Desktop Hide Icon Names on a Desktop (Windows and MacOS)
Type Subscript Create Subscript in Microsoft Office, Google Docs, & TextEdit
Make a Cat Using Your KeyboardMake a Cat Using Your Keyboard
Advertisement

About This Article

Nicole Levine, MFA
Written by:
wikiHow Technology Writer
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 413,126 times.
How helpful is this?
Co-authors: 22
Updated: July 22, 2024
Views: 413,126
Categories: HTML | Graphics
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 413,126 times.

Is this article up to date?

Advertisement