Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* @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/
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment