byte-color.to.heat-map.value.js

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>`;
  }
});