Gradient generator from one given color

Insert base color. It will generate color gradients darker then and lighter then given color

by Plippie Plop

HTML

<h1>Color test</h1>

<div id="colordiv">

<h3>Basic colors</h3>
<div class="colorselect" title="FF0000"></div>
<div class="colorselect" title="00FF00"></div>
<div class="colorselect" title="0000FF"></div>
<div class="colorselect" title="FFFF00"></div>
<div class="colorselect" title="00FFFF"></div>
<div class="colorselect" title="FF00FF"></div>

<h3>Extended colors</h3>

<div class="colorselect" title="ef0f0f"></div>
<div class="colorselect" title="ce0017"></div>
<div class="colorselect" title="ae0f83"></div>
<div class="colorselect" title="dc11da"></div>
<div class="colorselect" title="7a12ef"></div>
<div class="colorselect" title="3ed10b"></div>
<div class="colorselect" title="00a134"></div>
<div class="colorselect" title="0a6a20"></div>
<div class="colorselect" title="7c8e00"></div>
<div class="colorselect" title="c9ea11"></div>
<div class="colorselect" title="123bef"></div>
<div class="colorselect" title="0068b1"></div>
<div class="colorselect" title="0099d7"></div>
<div class="colorselect" title="0ddee0"></div>
<div class="colorselect" title="f1e40d"></div>
<div class="colorselect" title="f1ca12"></div>
<div class="colorselect" title="ec7e00"></div>
<div class="colorselect" title="ff6600"></div>
<div class="colorselect" title="834501"></div>
<hr>
<div id="selectedcolor">No color selected</div>

<div id="colorrange"><ul></ul></div>

</div>

CSS

body{margin:5px;}
div{position:relative;}

#colordiv{
padding:5px;
border:1px solid #DFDFDF;
width:180px;
border-radius: 10px;
}
.colorselect{
width:20px;
height:20px;
background-color:#FFFFFF;
margin:4px;
float:left;
border:1px solid #444;
cursor:pointer;
border-radius: 4px;
z-index:1;
}

#colorrange ul li{
text-shadow: 1px 1px 1px #ffffff;
color:#000;
padding:2px;
border:1px solid #000;
margin-bottom:4px;
}

#selectedcolor{
clear:both;
}

JavaScript

$().ready(function(){

// all color selectors:
var $colorSelect= $(".colorselect");

//build color selectors:
$colorSelect.each(function(){                                                    
    var $this=$(this);
    var tcol= "#"+$this.attr("title");
    $this.css({"background-color":tcol});
});

// clicking the base color:
$colorSelect.click(function(){
var scolor =$(this).attr("title");
    $("#selectedcolor").html("<h3>Base color: #"+scolor+"</h3>");    
    
    colorrange(scolor, 5, 3); // Basecolor , gradients, x divider
    
});



// create color range of basecolor
function colorrange(basecolor, steps, blend){
    var Crange= $("#colorrange ul");
    var tempbuild="";    
    var startsteps= Math.round(steps/2);    

// build html
        tempbuild+='<li>V2.0!</li>';            
    
        //lower gradients.
    for(i=startsteps-1;i>=1;i--){        
    newi= newi= "."+i*blend;
    tempbuild+='<li style="background-color:'+darkerColor(basecolor, newi)+';">'+i+' '+darkerColor(basecolor,newi)+'  '+newi+'</li>';            
    }
    
    // base color
    tempbuild+='<li style="background-color:#'+basecolor+';"><strong>'+basecolor+'  0</strong></li>';
        
    // lighter gradients
    for(i=1;i<= startsteps-1; i++){    
    newi= "."+i*blend;
    tempbuild+='<li style="background-color:'+lighterColor(basecolor, newi)+';">'+i+' '+lighterColor(basecolor, newi)+'  '+newi+'</li>';            
    }
                    
            
    Crange.html(tempbuild); // shit out html
    
}




/*  -----[ FUNCTIONS FOR COLOR CHANGER ]------*/
var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    // Trim trailing/leading whitespace
    color = color.replace(/^\s*|\s*$/, '');

    // Expand three-digit hex
    color = color.replace(
       ...