JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div>
  <div id="sampleA" class="sample"></div>
  <input type="range" name="fader" min="0" max="100" id="slider">
  <div id="sampleB" class="sample"></div>
</div>
<div id="out"></div>

CSS

.sample {width:20px;height:20px;display:inline-block}
#slider {width:150px; margin: 0 5px;}
#out {width:210px;height:40px;background-color:#333}

JavaScript

/**
 * для вопроса https://toster.ru/q/300703
 * «Магический пересчет HEX кодов, возможно?»
 */
var colorA = 'FF9900';
var colorB = '66FF33';
var out = document.getElementById("out");
var slider = document.getElementById("slider");

function getMid(a,b,k) {
  return ('0' + Math.round(
    parseInt(a,16)*(1-k) + parseInt(b,16)*k
  ).toString(16)).slice(-2);
}

function update() {
  var colorMid = ''
    ,i
    ,k = slider.value/100
  ;
  for(i=0;i<3;i++)
    colorMid += getMid(colorA.substr(i*2,2),colorB.substr(i*2,2),k);
  out.style.backgroundColor = '#'+colorMid;
}

document.getElementById("sampleA").style.backgroundColor = '#'+colorA;
document.getElementById("sampleB").style.backgroundColor = '#'+colorB;

slider.addEventListener("input", update);
update();