Tuesday, November 03, 2009

Some color code to make some javascript HTML colors darker

I needed to quickly produce some new darker colours for an array of html colors.

Using this:
http://blog.lotusnotes.be/domino/archive/2007-08-04-javascript-color-functions.html

I built this:
    <div id='outputLifeLine'>
    </div>
    <script type="text/javascript">
        var arr = [[-18, '#00ff00'],
        [-4, '#aaff00'],
... snip...
        [18, '#ff2200']];

        var G = {}, $ = function(a) { return document.getElementById(a) };

        G.color = {
            rgb: function(a) {
                var o = a.toLowerCase();
                return [parseInt(o.slice(0, 2), 16), parseInt(o.slice(2, 4), 16), parseInt(o.slice(4), 16)];
            },
            shade: function(a, b) {
                var v = [], i;
                for (i = 0; i < 3; i++) {
                    v[i] = Math.round(a[i] * b)
                    if (v[i] > 255) v[i] = 255
                    if (v[i] < 0) v[i] = 0
                }
                return v
            },
            hex: function(a) { var f = G.color._hex; return f(a[0]) + f(a[1]) + f(a[2]) },
            _hex: function(a) { return ('0' + a.toString(16)).slice(-2) }
        };

        var txt = '';
        var m = G.color;
        for (var i in arr) {
            var n = m.rgb(arr[i][1].substr(1));
            txt += "[" + arr[i][0] + ",'" + arr[i][1] + "', '#" + m.hex(m.shade(n, 0.6)) + "'],";
            txt += "<br/>"
        }
        var d = document.getElementById("outputLifeLine");
        d.innerHTML = txt;

</script>

And then ran it... Nothing special... but thought I'd share it!

No comments:

Post a Comment