Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
function getHSLColor( val ){
// normalize
val = (+val)>255?255:(+val)< 0?0:(+val);
// NON-STANDARD
// val = ((+val)-250) /285 - 320;
// h = (1 - (+val)) * 280;
// s = 100;
// l = (+val) * 50;
// l = 50;
// 5 color heat-map
const R = (+val) /255
const TR = 0.83; // 0.75
val = R *TR; // SHIFT => 0.77 == down 0.78 == up
h = (1 + (+val)) * 240;
s = 100;
// White-out any above 75-%
l = (+val) * ( R>=TR? (80 + ( 80 * (R -TR)*(1+TR*2) )):80);
// default: line-up
// l = (+val) * 80;
return `hsl(${h}, ${s}%, ${l}%);`;
}
window.addEventListener('load', ()=>{
const wrapper = document.getElementById('wrapper');
wrapper.innerHTML = '';
for( let i=0; i<255+100; i++ ){
wrapper.innerHTML += `<div class="w" style="background: ${ getHSLColor( i ) }"></div>`;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment