有沒有一種有效的方式來自動顯示網頁的所有HTML顏色？

Question

我的想法很簡單，但我希望已經有一些東西可以更有效地解決它。所以hopefuly有人可以點我在正確的方向...

的問題：網站 - 色彩

快速十六進制代碼基於驗證。

你有你的網頁;你有你的創意人的設計;現在你想檢查顏色是否匹配，而不是通過螢火蟲檢查每個元素並手動比較它。

理念：

而是使用一個瀏覽器插件或一些SASS/JS/CSS/PHP代碼/庫顯示小十六進制編碼色的指標爲每個元素。

重要的部分是按照原樣查看頁面，但也能夠查看元素的顏色值，以便您輕鬆驗證它們。

問題：

有一些工具或庫，將與該任務已經圍繞幫助嗎？

我的方法思路：

• 使用硒
• 黑客一些JS代碼到一個字符串添加到每個元素與背景奧德顏色CSS樣式

雙方將還挺工作，但我的感覺是可能有更好的東西已經在...

---

我的解決方案：

好了，過了好一會兒，但得到它使用JS工作，並發現了一些有用的工具還有：

• advocode.com
• zeplin.io
• colorZilla
• colorPeek

• pixelZoomer

  $('.debugColorHexCode').detach(); 
  $.each($('[class*=text]'), function() { 
      $(this).text(''); 
      $(this).css('color', '#FFF'); 
  }); 
  
  var possibilities = ['[style*="background-color:"]'], 
      searchFor = /\bbackground-color:/, 
      cssProp = 'background-color', 
      styles = document.styleSheets, 
      i, j, l, rules, rule, elem, res = []; 
  
  for (i = 0; i < styles.length; i++) { 
      rules = styles[i].cssRules; 
      l = rules.length; 
      for (j = 0; j < l; j++) { 
       rule = rules[j]; 
       if (searchFor.test(rule.cssText)) { 
        possibilities.push(rule.selectorText); 
       } 
      } 
  } 
  possibilities = possibilities.join(','); 
  possibilities = document.querySelectorAll(possibilities); 
  l = possibilities.length; 
  for (i = 0; i < l; i++) { 
      elem = possibilities[i]; 
      res = (window.getComputedStyle(elem, null).getPropertyValue(cssProp)); 
      $(possibilities[i]).prepend('<span class="debugColorHexCode">' + rgb2hex(res) + '</span>'); 
  } 
  
  function rgb2hex (rgb) { 
      rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
      if (rgb) { 
       function hex (x) { 
        return ("0" + parseInt(x).toString(16)).slice(-2); 
       } 
  
       return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
      } 
      return ''; 
  } 
  

謝謝@Rob W和@ rsk82，https://stackoverflow.com/a/8769287/1370465

謝謝@Erick Petrucelli，https://stackoverflow.com/a/3627747/1370465

希望這個解決方案能夠幫助別人太...

Answer 1

有一個插件Chrome和Firefox可能會做你想做的。它不會在每個元素上顯示它是什麼顏色（這會變得非常擁擠），但它可以顯示網頁上使用了哪些顏色。只需點擊顏色即可顯示HEX碼。