html - 有没有一种有效的方法可以自动显示网页的所有 HTML 颜色？

标签 html css background-color

<分区>

我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。

关闭 8 年前。

Improve this question

我的想法很简单，但我希望周围已经有一些东西可以更有效地解决它。所以希望有人能指出我正确的方向......

问题:

基于快速十六进制代码的网站颜色验证。

你有你的页面；你有一个来自你的创意人的设计；现在您想检查颜色是否匹配，而无需通过 Firebug 检查每个元素并手动比较它。

想法:

相反，您使用浏览器插件或某些 SASS/JS/CSS/PHP 代码/库来为每个元素显示小的 hexcode-color-indicators。

重要的部分是按原样查看页面，而且还能够查看元素的颜色值，这样您就可以轻松验证它们。

问题:

是否有一些工具或库可以帮助完成这项任务？

我的方法想法:

使用 Selenium
破解一些 JS 代码以将字符串添加到具有背景或颜色 css 样式的每个元素

两者都可以，但我觉得可能已经有更好的东西了......

我的解决方案:

好吧，花了一段时间，但使用 JS 让它工作并找到了一些有用的工具:

advocode.com
zeplin.io
colorZilla
colorPeek

像素缩放器

$('.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

希望这个解决方案也能帮助其他人......

最佳答案

Chrome 有一个插件和 Firefox那可能会做你想要的。它不会在每个元素上显示它是什么颜色(这也会变得非常拥挤)，但它可以告诉您网页上使用了哪些颜色。只需单击颜色即可告诉您十六进制代码。

enter image description here