01rgb-splitter.css

.control{
  text-align: center;
}
.control__row{
  margin: 40px auto;
  overflow-x: auto;
}
.input-color{
  width: 100px;
  height: 30px;
}
#bt-calc{
  padding: 4px 12px;
}
.result{
  display: inline-block;
}
#result__color{
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  margin: 0 auto;

  border: 1px solid #aaa;
}
.result__table{
  margin: 12px auto;
  border-collapse: collapse;
}
.result__td{
  border: 1px solid #777;
}
.result__td-inner{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;

  padding: 0 8px;
}
.icon-copy{
  width: 20px;
}
/*  */
.t-pointer{
  cursor: pointer;
}

02rgb-splitter.html

<div class="control">
  <div class="control__row">
    色A(ベースの色)<br>
    <input type="color" class="input-color t-pointer" value="#ffccaf">
  </div>
  <div class="control__row">
    色C(完成色)<br>
    <input type="color" class="input-color t-pointer" value="#ff6678">
  </div>
  <div class="control__row">
    <button id="bt-calc" class="t-pointer">計算</button>
  </div>
  <div class="control__row">
    色B(乗算で被せたカゲの色)<br>
    <div class="result">
      <div id="result__color"></div>
      <table class="result__table">
        <tr>
          <td class="result__td t-pointer">
            <div class="result__td-inner">
              <span id="result__hex" ></span>
              <img src="pathto/copy.svg" alt="書類が二枚重ねてある、コピーを表すアイコン" class="icon-copy">
            </div>
          </td>
          <td class="result__td t-pointer">
            <div class="result__td-inner">
              <span id="result__rgb"></span>
              <img src="pathto/copy.svg" alt="書類が二枚重ねてある、コピーを表すアイコン" class="icon-copy">
            </div>
          </td>
        </tr>
      </table>
      <div id="result__message"></div>
    </div>
  </div>
</div>

03rgb-splitter.js

const inputs_color = document.getElementsByClassName('input-color');
const bt_calc = document.getElementById('bt-calc');
const el_result__color = document.getElementById('result__color');
const els_result__td = document.getElementsByClassName('result__td');
const el_result__hex = document.getElementById('result__hex');
const el_result__rgb = document.getElementById('result__rgb');
const el_result__message = document.getElementById('result__message');

bt_calc.addEventListener('click',calc);
[...inputs_color].forEach(el=>{
  el.addEventListener('input',calc);
});
[...els_result__td].forEach(el=>{
  el.addEventListener('click',copyColor);
});

calc();

function calc(){
  el_result__message.textContent = '';
  let is_not_exist = false;
  const color_a = hexToRgb(inputs_color[0].value);
  const color_c = hexToRgb(inputs_color[1].value);
  const color_b = (new Array(3)).fill(0).map((v,i)=>{
    if(color_a[i]===0){
      if(color_c[i]!==0){
        is_not_exist = true;
      }
      return '--';
    }else{
      const c = Math.round(color_c[i]*255/color_a[i]);
      if(c>255) is_not_exist = true;
      return c;
    }
  });
  if(is_not_exist){
    el_result__color.style = '';
    el_result__hex.textContent = '-';
    el_result__rgb.textContent = '-';
    [...els_result__td].forEach(el=>{
      el.dataset.color = '';
    });
    return;
  }
  const str_hex = '#' + color_b.map(v=>{
    if(v=='--'){
      return v;
    }else{
      return digit(v.toString(16),2);
    }
  }).join('');
  const str_rgb = `rgb(${color_b.join(',')})`;
  const str_style = str_hex.replace(/\-\-/g,'00');
  el_result__hex.textContent = str_hex;
  el_result__rgb.textContent = str_rgb;
  el_result__color.style.backgroundColor = str_style;
  els_result__td[0].dataset.color = str_hex;
  els_result__td[1].dataset.color = str_rgb;
}

function copyColor(e){
  const color = e.currentTarget.dataset.color || '';
  if(color===''){
    el_result__message.textContent = '';
    return;
  }
  navigator.clipboard.writeText(color).then(()=>{
    el_result__message.textContent = 'copied ' + color;
  });
}

function hexToRgb(hex){
  const match = hex.replace('#','').match(/[0-9a-fA-F]{2}/g);
  return match.map(v=>{
    return parseInt(v,16);
  });
}

function digit(n, d){
  const r = Math.max(d-String(n).length,0);
  return '0'.repeat(r) + n;
}