HomeApplicationGraphic design

How to Get the Hex Code of a Color on Your Computer Screen

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 particular color in an image, website, or program window on your computer...
Method 1 of 4:

Using GIMP or Similar Image Software (for Colors on Images or Screenshots)

  1. How to Get the Hex Code of a Color on Your Computer Screen Picture 1How to Get the Hex Code of a Color on Your Computer Screen Picture 1
    Download GIMP or another advanced image editor. GIMP is a free image manipulation software, but Photoshop and other advanced image editing programs will work, too, with very similar methods.
  2. How to Get the Hex Code of a Color on Your Computer Screen Picture 2How to Get the Hex Code of a Color on Your Computer Screen Picture 2
    Find an image with the color you're trying to match. If the color you're matching is already in a picture saved on your computer, you can use that image. If you're trying to match a color on a webpage or computer program, you can take a screenshot that contains the color you're trying to match.
  3. How to Get the Hex Code of a Color on Your Computer Screen Picture 3How to Get the Hex Code of a Color on Your Computer Screen Picture 3
    Open the image with the color in question in GIMP.
  4. How to Get the Hex Code of a Color on Your Computer Screen Picture 4How to Get the Hex Code of a Color on Your Computer Screen Picture 4
    Select the color picker tool. It looks like an eyedropper.
  5. How to Get the Hex Code of a Color on Your Computer Screen Picture 5How to Get the Hex Code of a Color on Your Computer Screen Picture 5
    Click on the color you want to match in the image.
  6. How to Get the Hex Code of a Color on Your Computer Screen Picture 6How to Get the Hex Code of a Color on Your Computer Screen Picture 6
    Click on the foreground color box, now that it reflects your chosen color. Locate the hex code - referred to as "HTML notation" - in the "Change Foreground Color" window that pops up.
    1. You can also select "Use info window" from the left-hand side color picker menu. Then, when you click your chosen color with the picker, the color info window will pop up, and the hex code will be listed there.
  7. How to Get the Hex Code of a Color on Your Computer Screen Picture 7How to Get the Hex Code of a Color on Your Computer Screen Picture 7
    Use the hex code. You can note it down, or right-click on the code and copy it to your clipboard. Then you can use that code in the font color, background color, or other elements in the HTML or CSS project you're creating.
Method 2 of 4:

Using Firefox (for Colors on an Existing Website)

  1. How to Get the Hex Code of a Color on Your Computer Screen Picture 8How to Get the Hex Code of a Color on Your Computer Screen Picture 8
    Open up a Firefox browser. If you're trying to copy a color from an existing website and have Firefox installed, this is your quickest option.
  2. How to Get the Hex Code of a Color on Your Computer Screen Picture 9How to Get the Hex Code of a Color on Your Computer Screen Picture 9
    Navigate to the page where the color you want to copy is. Make sure the element you need the color for is in view.
  3. How to Get the Hex Code of a Color on Your Computer Screen Picture 10How to Get the Hex Code of a Color on Your Computer Screen Picture 10
    Hover over "Tools" in the menu and select "Web Developer". From there, click "Eyedropper".
  4. How to Get the Hex Code of a Color on Your Computer Screen Picture 11How to Get the Hex Code of a Color on Your Computer Screen Picture 11
    Click on the color you're looking for. When you do so, Firefox will save the hex code to your clipboard.
  5. How to Get the Hex Code of a Color on Your Computer Screen Picture 12How to Get the Hex Code of a Color on Your Computer Screen Picture 12
    Paste the code where you need it. You can use that code in the font color, background color, or other elements in the HTML or CSS project you're creating.
Method 3 of 4:

Using Imagecolorpicker.com

  1. How to Get the Hex Code of a Color on Your Computer Screen Picture 13How to Get the Hex Code of a Color on Your Computer Screen Picture 13
    Go to imagecolorpicker.com.
  2. How to Get the Hex Code of a Color on Your Computer Screen Picture 14How to Get the Hex Code of a Color on Your Computer Screen Picture 14
    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.
    1. Click "Upload your image" if that's what you want to do. Select "Choose File" and locate the image in your computer folders. Then click "Submit" to upload it.
    2. Enter the URL for a website or image, if preferred. You can type out or copy and paste this from your browser. Then click the arrow to load the site.
  3. How to Get the Hex Code of a Color on Your Computer Screen Picture 15How to Get the Hex Code of a Color on Your Computer Screen Picture 15
    Click the color you want within the image/site preview. This color will be displayed on the bottom left corner of the screen.
  4. How to Get the Hex Code of a Color on Your Computer Screen Picture 16How to Get the Hex Code of a Color on Your Computer Screen Picture 16
    Find the hex code listed next to the chosen color. You can copy it and then use that code to match the font color, background color, or other elements in your HTML or CSS project.
Method 4 of 4:

Using Pixie Software (for Windows OS)

  1. How to Get the Hex Code of a Color on Your Computer Screen Picture 17How to Get the Hex Code of a Color on Your Computer Screen Picture 17
    Install Pixie. It's a tiny utility to find color values of pointed pixel.
  2. How to Get the Hex Code of a Color on Your Computer Screen Picture 18How to Get the Hex Code of a Color on Your Computer Screen Picture 18
    Run it. Run the program by navigating and clicking it.
  3. How to Get the Hex Code of a Color on Your Computer Screen Picture 19How to Get the Hex Code of a Color on Your Computer Screen Picture 19
    Move the cursor. Move cursor to the color.
  4. How to Get the Hex Code of a Color on Your Computer Screen Picture 20How to Get the Hex Code of a Color on Your Computer Screen Picture 20
    Find values of that color. You will see HEX, HTML, RGB etc values of it.
  5. How to Get the Hex Code of a Color on Your Computer Screen Picture 21How to Get the Hex Code of a Color on Your Computer Screen Picture 21
    Exit from utility by pressing the cross button.
4.5 ★ | 4 Vote
colorimagecodeclick

You should read it

May be interested

Graphic design