01make-gradation-color.css

.settings{
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.settings-unit{
  display: inline-block;
  margin: 0 4px;
}
.settings-type{
  font-size: 0;
  letter-spacing: 0;
}
.label-type{
  display: inline-block;
  padding: 0 8px;
  border: 1px solid #FF9800;
  font-size: 1rem;
  cursor: pointer;
}
.label-type:nth-of-type(n+2){
  border-left: none;
}
.radio-color-type:checked+.label-type{
  background-color: #FFE0B2;
}
#bt-submit{
  cursor: pointer;
}
/*  */
.color-outer{
  max-width: 400px;
  margin: 0 auto;
}
.input-color,.color-unit{
  display: block;
  box-sizing: border-box;
  width: 200px;
  height: 35px;
  margin: 8px auto;
  cursor: pointer;
}
.color-unit{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
}
#mid-color-box{
  max-height: 75vh;
  overflow-y: auto;
}
.unit-num{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  height: 20px;
  padding: 0 2px;
}
/*  */
#float-message{
  padding: 0 4px;
  position: fixed;
  border-radius: 4px;
  background-color: #eee;
  opacity: 1;
  transition: .2s;
  pointer-events: none;
}
#float-message.off{
  opacity: 0;
}
/*  */
.hide{
  display: none;
}

02make-gradation-color.html

<div class="settings">
  <div class="settings-unit">
    中間の色数:<select id="sel-num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3" selected>3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <!-- 省略 -->
      <option value="98">98</option>
      <option value="99">99</option>
      <option value="100">100</option>
    </select>
  </div>
  <div class="settings-unit settings-type">
    <input type="radio" id="radio-hex" name="color-type" value="hex" class="radio-color-type hide">
    <label for="radio-hex" class="label-type">HEX</label>
    <input type="radio" id="radio-shex" name="color-type" value="shex" class="radio-color-type hide" checked>
    <label for="radio-shex" class="label-type">#HEX</label>
    <input type="radio" id="radio-rgb" name="color-type" value="rgb" class="radio-color-type hide">
    <label for="radio-rgb" class="label-type">RGB</label>
  </div>
  <button id="bt-submit">生成</button>
</div>
<div class="color-outer">
  <input type="color" class="input-color">
  <div id="mid-color-box"></div>
  <input type="color" class="input-color">
</div>
<div id="float-message" class="hide"></div>

03make-gradation-color.js

const sel_num = document.getElementById('sel-num');
const radio_color_type = document.getElementsByClassName('radio-color-type');
const bt_submit = document.getElementById('bt-submit');

const mid_color_box = document.getElementById('mid-color-box');
const input_color = document.getElementsByClassName('input-color');

const float_message = document.getElementById('float-message');

bt_submit.addEventListener('click',makeColor);
let timer_float;

// 初期サンプル
input_color[0].value = '#FF0000';
input_color[1].value = '#0000FF';
makeColor();

function makeColor(){
  //初期化
  mid_color_box.textContent = '';
  //端色取得
  const end_color = (new Array(2)).fill(0).map((v,i)=>{
    return hex_to_rgb(input_color[i].value);
  });
  //
  const num_color = Number(sel_num.value);
  for(let i=1;i<=num_color;i++){
    //中間色算出
    const color = (new Array(3)).fill(0).map((v,j)=>{
      return Math.round(end_color[0][j] + i*(end_color[1][j]-end_color[0][j])/(num_color+1));
    });
    //
    const unit = document.createElement('div');
    unit.classList.add('color-unit');
    //
    const unit_num = document.createElement('div');
    unit_num.classList.add('unit-num');
    unit_num.textContent = i;
    unit.appendChild(unit_num);
    //
    const str_rgb = `rgb(${color.join(',')})`;
    unit.dataset.hex = color.map(v=>digit(v.toString(16),2)).join('');
    unit.dataset.shex = '#'+unit.dataset.hex;
    unit.dataset.rgb = str_rgb;
    unit.addEventListener('click',pickColor);
    //
    unit.style.backgroundColor = str_rgb;
    mid_color_box.appendChild(unit);
  }
}

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

function pickColor(e){
  const type = (()=>{
    for(let i=0;i<radio_color_type.length;i++){
      if(radio_color_type[i].checked){
        return radio_color_type[i].value;
      }
    }
    return 'shex';
  })();
  const el = e.currentTarget;
  const str = el.dataset[type];
  navigator.clipboard.writeText(str).then(()=>{
    float_message.classList.add('hide');
    float_message.style.left = el.getBoundingClientRect().left+'px';
    float_message.style.top = el.getBoundingClientRect().top+'px';
    float_message.textContent = 'copied '+str;
    float_message.classList.remove('hide');
    float_message.classList.remove('off');
    clearTimeout(timer_float);
    timer_float = setTimeout(()=>{
      float_message.classList.add('off');
    },1000)
  });
}

function digit(n, d){
  return '0'.repeat(d-String(n).length) + n;
}