Home/ Questions/Q 751813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T14:42:35+00:00

What is the quickest method to see the actual color of the hex code

  • 0

What is the quickest method to see the actual color of the hex code #a7a7a7?

When i work on another’s CSS, I want to be able to quickly see the color of that particular hex code.

Example: If I’m editing CSS in notepad, and I found code #a7a7a7, then how can I know what color this code corresponds to?

I already have tools that can give me a hex value for a color on screen, but I need one that does the opposite.

I don’t want a color chart; I just want a tool to convert from hex value to color.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You drop notepad as an editor and choose from one of the many freely available CSS editors?

    Random example:
    http://speckyboy.com/2008/09/15/7-free-css-editors-which-is-the-best-you-choose/

    EDIT: So… to make this a programming question, and since you are on Windows XP, I made a little HTA application that does color code previews:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:hta="http://tempuri.org/microsoft/hta">
<head>
  <title>Hex Helper</title>
  <hta:application 
    id="HexColor"
    version="0.1"
    applicationname="Hex Helper"
    sysmenu="yes"
    maximizebutton="no"
    minimizebutton="no"
    border="dialog"
    innerborder="no"
    scroll="no"
    selection="no"
    contextmenu="no"
    windowstate="normal"
  />
  <style type="text/css"> 
    * {
      border: 0 none; margin: 0; padding: 0; 
    }
    html, body { 
      height:100%;
      background-color: black; 
    }
    #container {
      padding: 5px; 
    }
    #preview {
      width: 130px; height: 90px; 
      border: 2px ridge;
    }
    #colorcode {
      width: 100%;
      height: 1.2em;
    }
  </style>
  <script type="text/javascript">
    var trim      = /^\s+|\s$/g;
    var fullColor = /^\s*#?([a-f0-9]{6})\s*$/;
    var abbrColor = /^\s*#?([a-f0-9])([a-f0-9])([a-f0-9])\s*$/;

    function setColor(hex) {
      hex = hex.replace(trim, "");

      var preview = document.getElementById("preview");
      var m = null;

      if (m = fullColor.exec(hex)) {
        preview.style.backgroundColor = "#"+m[1];
      } else if (m = abbrColor.exec(hex)) {
        preview.style.backgroundColor = "#"+m[1]+m[1]+m[2]+m[2]+m[3]+m[3];
      }
    }

    function setValue(preview) {
      var colorcode = document.getElementById("colorcode")
      colorcode.value=preview.style.backgroundColor;
    }
  </script>
</head>

<body onload="window.resizeTo(150,150)">
  <form action="#" id="container">
    <div id="preview" onclick="setValue(this);"></div>
    <input id="colorcode" type="text" maxlength="7" onkeyup="setColor(this.value);" />
  </form>
</body>
</html>

    Save the above to a file called HexHelper.hta and run the file. Here is how it looks like. Feel free to modify in any way you want.

    Hex Helper screen stot http://img203.imageshack.us/img203/8122/hexhelper.png

    • 0