Is there an efficient way to automatically display all HTML colors of a Webpage?

Question

my idea is quite simple, but I hope there is already something around that solves it more efficiently. So hopefuly somebody can point me in the right direction...

The Problem:

Quick Hex-Code based verification of Website-Colors.

You have your page; you have a design from your creative guy; now you want to check wheather the colors match without inspecting each element via firebug and manually comparing it.

The Idea:

Instead you use a Browser-PlugIn or some SASS/JS/CSS/PHP Code/Library to display little hexcode-color-indicators for each element.

The important part is to see the page as it is, but also be able to see the colorvalues of the elements too, so you can easily verify them.

The Question:

Is there some tool or library that would help with this task already around?

My approach ideas:

using selenium
hacking some JS code to add a string to each element with a background oder color css style

Both would kinda work, but my feeling is that there might be something better already around ...

My Solution:

Well, took a while, but got it working using JS and found some helpful Tools as well:

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 '';
}

Thank You @Rob W and @rsk82, https://stackoverflow.com/a/8769287/1370465

Thank You @Erick Petrucelli, https://stackoverflow.com/a/3627747/1370465

hope this solution helps somebody else too ...

This question is [too broad](http://stackoverflow.com/help/on-topic). There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs. — Jørgen R, May 18 '15 at 09:05
If someone passes you a design then he should also pass you all the hex-codes as part of that design, so you know what colours you should be using and you are not shooting in the dark. — Andrew, May 18 '15 at 09:07
HTML colors of what background(of divs and other elements) or text? — divy3993, May 18 '15 at 09:07
@jurgemaiser: part of my problem, searching for this is a mess. I have a clear vision for an answer: a library or too that I can use to display all hex-colors of my elements attached to them. — Jook, May 18 '15 at 09:16
@Andrew yes, I have them too, but errors happen, so now I pass the hex-code and my page to QA and they shall chek if all is right - how would you save them some time? — Jook, May 18 '15 at 09:17
@all: I am sorry if this is an off-topic question; I did describe the problem, however it is a request for a tool or library, as I can't find one on my own - eighter beacause it does not exists or is not easy to find. That is why I asked and why I think people will often aks here for guidance in such cases ... is there a StackExchange section where it is allowed to get some recommendations on Tools or Libs? — Jook, May 18 '15 at 09:28
@Jook, you are a victim of overzealous moderators who focus on being *librarians* rather than either being helpful or minding their own business/moving on when it's not their area. Your question makes sense to me and with specific, winning answers possible. Unfortunately I don't have an answer for you. A programmatic approach to this would make for interesting tools and auto-theme matching for injecting independently scripts into a page for a more seamless experience without explicit configuration. — Jason Kleban, May 18 '15 at 18:02

score 0 · Accepted Answer · answered May 18 '15 at 09:07

0

There's a plugin for Chrome and Firefox that might do what you want. It doesn't show on every element what color it is (this would get very crowded as well), but it can show you which colors are used on the web page. Just clicking on the color will tell you the HEX-code.

enter image description here

answered May 18 '15 at 09:07

Rvervuurt

8,589
8
39
62

hm, yes, the Webapge DOM Color Analyser is the most helpful I could find, but I hoped for more :) – Jook May 18 '15 at 09:19

Is there an efficient way to automatically display all HTML colors of a Webpage?

1 Answers1