color-step.js

(function() {
    function getRgbArray(color, alpha) {
        // Always return an array, either empty or filled.
        var rgb = [];
        var hex;

        // Get an array of rgb(a) values.
        if (color.substr(0, 1) === '#') {
            /* HEX STRING */
            // If the first character is # we're dealing with a hex string. Get
            // an array of each character. This is more explicit than dealing
            // with the indices of a String object due to all other instances
            // of hex in this function.
            hex = color.substr(1).split('');
            if (hex.length === 3) {
                // If this is a 3-char color, e.g. #f00, make it 6 characters
                // by duplicating each one.
                hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2]];
            }
            if (hex.length === 6) {
                // Only deal with 6-char hex colors when computing the rgb
                // array. Anything else at this point has been passed
                // incorrectly.
                var i = 0;
                var x = 0;
                var hexStr;
                // Convert each hex pair (represented by hexStr) into a decimal
                // value to go in rgb[]. i is the rgb[] index whilst x is 2i,
                // which translates Array(3) to Array(6).
                while (i < 3) {
                    hexStr = hex[x] + hex[x + 1];
                    rgb[i] = parseInt(hexStr, 16);
                    i += 1;
                    x = i * 2;
                }
            }
        } else if (color.search(/rgb/) !== -1) {
            /* RGB(A) STRING */
            rgb = color.match(/([0-9]+\.?[0-9]*)/g);
        }

        // Add or remove the alpha value.
        if (alpha && rgb.length === 3) {
            // If an alpha value has been requested and there currently isn't
            // one, add 1 as the alpha value.
            rgb.push(1);
        } else if (! alpha && rgb.length === 4) {
            // Otherwise if there's an alpha value that hasn't been requested,
            // remove it.
            rgb.pop();
        }

        // Ensure all values in rgb are decimal numbers, not strings.
        for (var i = 0; i < rgb.length; i++) {
            rgb[i] = parseInt(rgb[i], 10);
        }

        return rgb;
    }

    function colorStep(from, to, totalSteps, alpha) {
        var steps = [];
        from = getRgbArray(from, alpha);
        to = getRgbArray(to, alpha);
        var diff = [
            to[0] - from[0],
            to[1] - from[1],
            to[2] - from[2]
        ];
        if (from.length === 4 && to.length === 4) {
            diff[3] = to[3] - from[3];
        }
        for (var i = 0; i <= totalSteps; i++) {
            steps[i] = [
                Math.round(from[0] + (diff[0] / totalSteps) * i),
                Math.round(from[1] + (diff[1] / totalSteps) * i),
                Math.round(from[2] + (diff[2] / totalSteps) * i)
            ];
            if (diff[3] !== undefined) {
                steps[i][3] = from[3] + (diff[3] / totalSteps) * i;
            }
        }
        return steps;
    }

    // Demonstrate.
    window.demo = function() {
        var colors = [
            ['#000000', '#ff0000'],
            ['#f0f', '#fff'],
            ['rgb(0,255,50)', 'rgb(50,50,50)'],
            ['rgba(0,255,50,0.2)', 'rgba(0,255,50,1)']
        ];
        var box = document.createElement('div');
        box.setAttribute('style', 'float:left; height:30px; width:30px;');
        var wrapper = document.createElement('div');
        wrapper.setAttribute('style', 'clear:both;');
        var bgColor;
        var bgColors;
        var boxClone;
        var wrapperClone;
        for (var i = 0; i < colors.length; i++) {
            bgColors = colorStep(colors[i][0], colors[i][1], 10, true);
            wrapperClone = wrapper.cloneNode();
            wrapperClone.innerText = colors[i].join(' to ');
            for (var j = 0; j < bgColors.length; j++) {
                bgColor = 'background-color: rgba(' + bgColors[j].join(',') + ')';
                boxClone = box.cloneNode();
                boxClone.setAttribute('style', boxClone.getAttribute('style') + bgColor);
                wrapperClone.appendChild(boxClone);
            }
            document.body.appendChild(wrapperClone);
        }
    };
})();

index.html

<html>
<head>
    <title></title>
    <script type="text/javascript" src="color-step.js"></script>
</head>
<body onload="demo()">
</body>
</html>