Find out the hex code of a color on your computer

Table of contents:

Find out the hex code of a color on your computer
Find out the hex code of a color on your computer
Anonim

Colors are distinguished in HTML and CSS by their hexadecimal codes. If you're creating a web page or working on another 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 hexadecimal code. This wikiHow teaches you how to use a variety of free tools to quickly figure out the hex code of any color.

Steps

Method 1 of 4: Using the digital color meter on a Mac

Get the Hex Code of a Color on Your Computer Screen Step 1

Step #1. Open the digital color meter on your Mac

This tool is part of macOS, can distinguish the color value of each color on the screen. Open Finder, double click the folder Programs, double click on the folder Utilities and then double click Digital Color Meter to open it.

Get the Hex Code of a Color on Your Computer Screen Step 2

Step 2. Move the mouse cursor to the color you want to find out the hex code for

When you move the mouse, the values ​​in the tool are updated in real time. Do not move the mouse from this location until you lock both the horizontal and vertical openings.

You can also use the tool to recognize colors on the web. Open a browser such as Safari (or any other browser) and go to a website with the color you want to recognize

Get the Hex Code of a Color on Your Computer Screen Step 3

Step 3. Press ⌘ Command+L

This locks both the horizontal and vertical openings, which means that the color value does not change when you move the mouse.

Get the Hex Code of a Color on Your Computer Screen Step 4

Step 4. Press ⇧ Shift+⌘ Command+C to copy the hex code to the clipboard

You can also copy the hex code by pressing the Colour-menu clicking and Copy color as text to select.

Get the Hex Code of a Color on Your Computer Screen Step 5

Step 5. Press ⌘ Command+V to paste the copied code

You can paste the code directly into your HTML code, into a text file, or elsewhere where you can enter text.

Get the Hex Code of a Color on Your Computer Screen Step 6

Step 6. Press ⌘ Command+L to unlock the color finder

If you want to determine a different color, this releases the lock so that the cursor works as a color value finder again.

Method 2 of 4: Using Color Cop for Windows

Get the Hex Code of a Color on Your Computer Screen Step 7

Step 1. Install Color Cop

Color Cop is a small, free utility that you can use to quickly find out the hex code of any color on the screen. You get this app as follows:

  • Go to http://colorcop.net/download in a web browser.
  • click on colorcop-setup.exe under 'self-installing'. If the file does not download automatically, click Save or OK to start the download.
  • Double click on the downloaded file (it's in the folder Downloads and usually at the bottom left of the browser tab).
  • Follow the on-screen instructions to install the application.
Get the Hex Code of a Color on Your Computer Screen Step 8

Step 2. Open Color Cop

You can find it in the Start menu.

Get the Hex Code of a Color on Your Computer Screen Step 9

Step 3. Drag the eyedropper to the color you want to identify

You can identify any color on the screen, including those in other applications and on websites.

Get the Hex Code of a Color on Your Computer Screen Step 10

Step 4. Release the mouse button to reveal the hex code

The code will appear in the middle of the program in the empty space.

Get the Hex Code of a Color on Your Computer Screen Step 11

Step 5. Double click on the hex code and press Ctrl+C

This copies the hex code to the clipboard.

Get the Hex Code of a Color on Your Computer Screen Step 12

Step 6. Paste the code where you need it

You can Ctrl + V use it to paste the hex code wherever you want, such as in HTML or CSS code.

Method 3 of 4: Using Imagecolorpicker.com

Get the Hex Code of a Color on Your Computer Screen Step 13

Step 1. Go to https://imagecolorpicker.com on your computer, phone or tablet

You can use this free tool to determine the hex code of any color in an uploaded image. This method works in any web browser, including those on an Android, iPhone, or iPad.

Get the Hex Code of a Color on Your Computer Screen Step 14

Step 2. Upload an image or enter a URL

You will have to decide if you want to upload your own image or if you want to use an online image or website. Either method can be used to display an image or web page so that you can select the color you want.

  • To upload an image, scroll down and select Upload your image, then go 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 a website's HTML color code' option, enter the URL, then click or tap the button Take website to select the website.
  • To select a direct image from the web instead of an entire website, put the URL of the image in the "Use this box to get the HTML color code of an image from this URL" box and click or tap Take image.
Get the Hex Code of a Color on Your Computer Screen Step 15

Step 3. Click or tap the color you want in the image/site preview

This displays the color's hex code in the lower left corner of the screen.

Get the Hex Code of a Color on Your Computer Screen Step 16

Step #4. Click or tap the copy icon (the two overlapping squares to the right of the hex code) to copy the hex code to your clipboard

You can then paste it into any text file or typing area.

Method 4 of 4: Using Firefox (for coloring on the web)

Get the Hex Code of a Color on Your Computer Screen Step 17

Step 1. Open Firefox on your PC or Mac

The Firefox web browser comes with a free tool that you can use to identify the hex code of any color on the web. If you have Firefox installed, you can find it in the Start menu (Windows) or in the Applications folder (macOS).

  • You can download Firefox for free at
  • Firefox only returns the value of a color on a website. You cannot use the tool outside of the browser.
Get the Hex Code of a Color on Your Computer Screen Step 18

Step 2. Go to a website that contains the color you want to determine

Make sure the element you need the color for is in the picture.

Get the Hex Code of a Color on Your Computer Screen Step 19

Step 3. Click on the ☰ menu

It's the three horizontal lines in the top right corner of Firefox.

Get the Hex Code of a Color on Your Computer Screen Step 20

Step 4. Click the Web Developer menu

Another menu is expanded.

Get the Hex Code of a Color on Your Computer Screen Step 21

Step 5. Click on the eyedropper

Your mouse cursor will change to a large circle.

Get the Hex Code of a Color on Your Computer Screen Step 22

Step 6. Click on the color you want to determine

The hex value of the colors will be updated instantly as you move the mouse to the location. Once you click the mouse, Firefox will save the hex code to your clipboard.

Get the Hex Code of a Color on Your Computer Screen Step 23

Step 7. Paste the code where you need it

You can Control + V use (PC) or Command + V (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 also allow you to use a color picker to determine the color's hex code.
  • If you know the creators of the webpage with the color you're trying to find, you can always ask which hex code they used. You can also search the source code of the website to find the hex code listed there.

Popular by topic