Question

查看十六进制代码＃a7a7a7的实际颜色的最快方法是什么？

当我使用另一个CSS时，我希望能够快速查看该特定十六进制代码的颜色。

示例：如果我在记事本中编辑CSS，并且我找到了代码＃a7a7a7，那么我怎么知道这段代码对应的颜色？

我已经拥有可以为屏幕上的颜色提供十六进制值的工具，但我需要一个相反的工具。

我不想要彩色图表;我只想要一个工具将十六进制值转换为颜色。

Answer 1

您将记事本作为编辑器删除，并从许多免费提供的CSS编辑器中选择一种？

随机示例： http://speckyboy.com/2008/09/15/7-free-css-editors-which-is-the-best-you-choose/

编辑：所以...为了使这个编程问题，并且因为你在Windows XP上，我做了一个HTA application来做色码预览：

<!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>

将上述内容保存到名为HexHelper.hta的文件中并运行该文件。这是它的样子。随意以您想要的任何方式进行修改。

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

Answer 2

经过大量搜索后，我发现了一个很好的在线工具

http://chir.ag/projects/name-that-color/

在这里，我们可以粘贴代码并查看颜色。

alt text http://shup.com/Shup/322305/11032475925-My-Desktop.png

Answer 3

打开ColorZilla firefox插件
输入颜色代码
按回车。

Answer 4

您可能会发现此工具很有用：

http://hexpreview.com/

Answer 5

的Photoshop？我不知道这对SO社区来说真的是一个问题，但我在photoshop中工作很多，并且通常在后台运行photoshop。这样我就可以轻松切换到photoshop并使用颜色工具查看不同的十六进制值。网上还有很多工具可供选择。我特别喜欢的是Color Scheme Designer 3。只需单击十六进制值并输入颜色十六进制值，它将显示它的颜色。

最终您不需要这些工具，您应该能够了解哪些代码映射到哪个颜色空间。只需了解特定十六进制颜色值的样子。

Answer 6

这可能听起来很疯狂，但是这是非常容易和方便的。写一个简单的HTML。

<html>
  <body bgcolor="#a7a7a7"></body>
</html>

现在，在浏览器上打开此页面。继续将bgcolor更改为您想要查看的任何颜色并刷新浏览器：）

另一个选项是，创建任何html并包含您尝试编辑的CSS。在firefox上打开那个页面，现在使用firebug可以看到颜色。 {只需将鼠标悬停在css颜色代码上，您就会看到颜色]

alt text http://img707.imageshack.us/img707/764/62889051.jpg

Answer 7

这个工具非常实用且免费：

http://www.iconico.com/colorpic/

查看任何十六进制代码＃a7a7a7的实际颜色的最快方法是什么？

7 个答案: