Color Cycling

by khrome

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js"></script>
<html>
    <body style="background-color:#888888; line-spacing: 30px;">
        <p id="a"></p>
        <hr/>
        <p id="b"></p>
        <hr/>
        <p id="c"></p>
        <hr/>
        <p id="d"></p>
        <hr/>
        <p id="e"></p>
    </body>
</html>

CSS

.chip{
  padding:3px;
  font-family:courier;
  display:inline-block;
  border-radius:10px;
  box-shadow: 2px 2px, -2px -2px, 2px -2px, -2px 2px;
  text-shadow: 0px 0px 1px #FFFFFF, 0px 0px 3px #FFFFFF;
  margin: 5px;
}

JavaScript

function hueShiftedColorSet(){
    var args = {};
    var arg;
    for(var lcv=0; lcv < arguments.length; lcv++){
        arg = arguments[lcv];
        if(typeOf(arg) == 'number') args.num = arg;
        else if(
            typeOf(arg) == 'array' ||
            (typeOf(arg) == 'string' && arg.match(/#?[0-9A-F]{6}/))
        ) args.color = arg;
        else if(typeOf(arg) == 'string') args.result = arg;
    };
    if(!args.num) args.num = 5;
    if(!args.color) args.color = '#FF0000';
    var result = [];
    for(var lcv=0;lcv<args.num;lcv++){
        var newColor = new Color(args.color);
        var newColor = (newColor).setHue((newColor.hsb[0]+(359/args.num)*lcv)%359);
        if(args.result)result.push(newColor[args.result]);
        else result.push(newColor);
    }
    return Array.prototype.slice.call(result);
}

function printColorSet(set){
    return set.map(function(item){ return '<div class="chip" style="background-color:rgb('+item[0]+', '+item[1]+', '+item[2]+')">'+item.join(',')+'</div>' }).join('');
}
document.getElementById('a').innerHTML = 
    printColorSet(hueShiftedColorSet('#0000FF', 2));
document.getElementById('b').innerHTML = 
    printColorSet(hueShiftedColorSet(5));
document.getElementById('c').innerHTML = 
    printColorSet(hueShiftedColorSet(12));
document.getElementById('d').innerHTML = 
    printColorSet(hueShiftedColorSet('#38C4B6', 4));
document.getElementById('e').innerHTML = 
    printColorSet(hueShiftedColorSet('#333377', 4));