Какой самый быстрый способ увидеть фактический цвет любого шестнадцатеричного кода # a7a7a7? - PullRequest
Новая
       7

Какой самый быстрый способ увидеть фактический цвет любого шестнадцатеричного кода # a7a7a7?

0 голосов
/ 24 апреля 2010

Какой самый быстрый способ узнать фактический цвет шестнадцатеричного кода # a7a7a7?

Когда я работаю над чужим CSS, я хочу иметь возможность быстро увидеть цвет этого конкретного шестнадцатеричного кода.

Пример. Если я редактирую CSS в блокноте и обнаружил код # a7a7a7, то как узнать, какому цвету соответствует этот код?

У меня уже есть инструменты, которые могут дать мне шестнадцатеричное значение для цвета на экране, но мне нужен инструмент, который делает обратное.

Я не хочу таблицу цветов; Я просто хочу инструмент для преобразования из шестнадцатеричного значения в цвет.

Ответы [ 7 ]

3 голосов
/ 24 апреля 2010

Вы оставляете блокнот в качестве редактора и выбираете один из многих свободно доступных CSS-редакторов?

Случайный пример: http://speckyboy.com/2008/09/15/7-free-css-editors-which-is-the-best-you-choose/

РЕДАКТИРОВАТЬ : Итак ... чтобы сделать это вопросом программирования, и поскольку вы работаете в Windows XP, я создал небольшое HTA-приложение , которое выполняет предварительный просмотр цветового кода: 

<!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 и запустите файл. Вот как это выглядит. Не стесняйтесь изменять любым способом.

Шестнадцатеричный экранный помощник http://img203.imageshack.us/img203/8122/hexhelper.png

2 голосов
/ 24 апреля 2010
  1. Открыть ColorZilla аддон Firefox
  2. введите цветовой код
  3. нажмите ввод.
2 голосов
/ 24 апреля 2010

После долгих поисков я нашел хороший онлайн-инструмент для этого

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

Здесь мы можем вставить код и увидеть цвет.

альтернативный текст http://shup.com/Shup/322305/11032475925-My-Desktop.png

1 голос
/ 25 февраля 2011

Этот инструмент может оказаться полезным:

http://hexpreview.com/

0 голосов
/ 24 апреля 2010

Этот инструмент довольно полезен и бесплатен:

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

0 голосов
/ 24 апреля 2010

Это может звучать безумно, но да, это очень легко и удобно сделать. написать простой HTML. 

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

Теперь откройте эту страницу в вашем браузере. Продолжайте изменять bgcolor на любой другой цвет, который вы хотите видеть, и обновляйте браузер :)

другой вариант - создать любой HTML и включить CSS, который вы пытаетесь редактировать. Откройте эту страницу на Firefox, теперь с помощью Firebug вы можете увидеть цвет. {Просто наведите курсор на цветовой код CSS, и вы увидите цвет]

альтернативный текст http://img707.imageshack.us/img707/764/62889051.jpg

0 голосов
/ 24 апреля 2010

Photoshop? Я не понимаю, как на самом деле это вопрос для SO-сообщества, но я много работаю с Photoshop и обычно работаю в фоновом режиме. Таким образом, я могу легко переключиться в фотошоп и использовать инструмент цвета, чтобы посмотреть другие значения в шестнадцатеричном формате. В Интернете также есть множество инструментов для этого. Особенно мне нравится дизайнер Color Scheme 3 . Просто нажмите шестнадцатеричное значение и введите шестнадцатеричное значение цвета, и оно покажет вам, какого оно цвета.

В конце концов вам не понадобятся эти инструменты, вы сможете узнать, какие коды соответствуют какому цветовому пространству. И просто почувствуйте, как может выглядеть конкретное значение шестнадцатеричного цвета.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...