Question

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

问题：

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

你有你的页面;你有一个来自你的创意人的设计;现在你要检查颜色是否匹配，而不是通过firebug检查每个元素并手动比较它。

理念：

相反，您使用Browser-PlugIn或某些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代码。

enter image description here

是否有一种有效的方式来自动显示网页的所有HTML颜色？

1 个答案: