Colour Scheme Generator

by Peter Doyle

HTML

<div class="colours">
    <div class="flat-color-gen colour"></div>
    <div class="flat-color-gen colour"></div>
    <div class="flat-color-gen colour"></div>
    <div class="flat-color-gen colour"></div>
    <div class="flat-color-gen colour"></div>
    <div class="flat-color-gen colour"></div> 
</div>

<textarea rows="10"></textarea>

CSS

.colours{
    width:100%;
}

.colour{
    width:80px;
    height:120px;
    float:left;
}
textarea{
    width:50%;
    margin-top:20px;
}

JavaScript

function generateFlatColorWithOrder(num, rr, rg, rb) {
    var colorBase = 180;
    var red = 0;
    var green = 0;
    var blue = 0;
    num = Math.round(num);
    num = num + 1;
    if (num != null) {

        red = (num*rr) % 256;
        green = (num*rg) % 256;
        blue = (num*rb) % 256;
    }
    var redInt = Math.round((red + colorBase) / 2);
    var greenInt = Math.round((green + colorBase) / 2);
    var blueInt = Math.round((blue + colorBase) / 2);
    return rgbToHex(redInt, greenInt, blueInt);
    //"rgb("+redString+", "+greenString+", "+blueString+")";
    //return '#' + redString + greenString + blueString;
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function generateRandomFlatColor() {
    return generateFlatColorWithOrder(Math.round(Math.random()*256));
}

var rr = Math.round(Math.random()*1000);
var rg = Math.round(Math.random()*1000);
var rb = Math.round(Math.random()*1000);
console.log("random red: "+ rr);
console.log("random green: "+ rg);
console.log("random blue: "+ rb);
console.log("----------------------------------------------------");
$('.flat-color-gen').each(function(i, obj) {
    var colour = generateFlatColorWithOrder(i, rr, rg, rb).toString();
    console.log("colour "+i+": "+colour);
    var currentColours = $("textarea").text();
    $("textarea").text(currentColours+colour+",\n");
    console.log("colour "+i+": "+colour);
    $(this).css("background-color",colour);
});