CSS Color usage

by paulftw

HTML

<div class=a>
    <div class=b>xy</div>
    <div class=c>zx</div>
</div>

CSS

.a {
    color: #abc;
    background-color: #def;
    margin: 10px;
    padding: 20px;
}

.b {
    color: #12a;
    background-color: rgba(100,200,30, 0.7);
    margin: 10px;
}

.c {
    color: #3fe;
    background-color: #aff;
    margin: 10px;
}

JavaScript

$(function() {
        
    var unibg = {};
    var unicolo = {};
    
    var allk = [];
    var rgbs = [];
    
    var groupem = function() {
        
    };

    var inc = function(dict, key) {
        var re = /rgba?\(([0-9]+), ([0-9]+), ([0-9]+)(, ([0-9]?\.?[0-9]+))?\)/;
        var match = re.exec(key);
        var rgb = '#';
        var colo=[];
        if (match) {
            for (var i=0;i<3;i++) {
                var c = Number(match[i+1]).toString(16).toUpperCase();
                colo.push(Number(match[i+1]));
                if (c.length<2) {
                    c = '0' + c;
                }
                rgb += c;
            }
            key = rgb;
            if (match[4]) {
                key += " alpha " + match[5];
            }
            if (allk.indexOf(rgb) < 0) {
                allk.push(rgb);
                rgbs.push(colo);
            }
        }
        dict[key] = dict[key] || 0;
        dict[key]++;
    };
        
    var tos = function(d) {
        //return JSON.stringify(d, null, 4);
        var res=[];
        for (var k in d) {
            //var re = 
            var co = (/#[A-Z0-9]+/).exec(k)[0];
            var l = [k, ' : ', String(d[k]), ];
            l.push('  <div style="background-color:' +co+ '">' +co+ '</div>');
            res.push(l.join(''));
        }
        return res.join('<br/>\n');
    };

    var funo = function(x, el) {
        inc(unibg, $(el).css('background'));
        inc(unicolo, $(el).css('color'));
        $(el).children().each(funo);
    };
    funo(0, 'body');

    $('body').append($('<div style="padding: 40px;background-color:#ccc;position:absolute;z-index:10000;top:0;left:20%;"><div class=foo-out></div></div>'));

    var u1 = tos(unibg);
    var u2 = tos(unicolo);
    $('.foo-out').html(u1 + '<hr/><hr/>\n\n' + u2);
});