shadeColorTone.js

/*
* @param      rgb = Object {r, g, b}
* @param  percent = int (-100 to 100)
*/
function shadeColorTone(rgb, percent)
{
    perc = 1 + percent / 100;
    ret = {}
    Object.keys(rgb).map(function(v) {
        col = rgb[v];
        if (col >= 128) {
            diff = 255 - col;
            col -= diff;
            col += diff * perc;
        } else col *= perc;
        ret[v] = parseInt(col);
    });
    return ret;
}

var base = {
    r: 10,
    g: 160,
    b: 255
};
document.getElementById('base').style.background = 'rgb(' + base.r + ', ' + base.g + ', '+ base.b + ')';

function showit(percent){
    color = shadeColorTone(base, percent);
    txtColor = 'rgb(' + color.r + ', ' + color.g + ', '+ color.b + ')';
    document.body.style.background = txtColor;
    txt = "Contrast: " + percent + "% ==> " + txtColor;
    document.querySelector("div").innerHTML = txt;
    
};

document.querySelector("input").oninput = (function(){
    showit(document.querySelector("input").value);
});

showit(0);


/*
********
* HTML *
********

<div id="base">All your base are belong to us!</div>
<br><br>
<input type="range" min="-100" max="100">

*******
* CSS *
*******

#base {
    text-align: center;
    padding: 3em;
}
input {
    width: 95%;
}

*************
* JSfiddle: *
*************

http://jsfiddle.net/w5eurs72/18/

*/