グラデーション色相スクラブ

<div class="view08-16-06">
          <div class="swatch08-16-06"></div>
          <div class="label08-16-06">HUE 0°</div>
          <div class="scr08-16-06">
            <div class="sp08-16-06">
              <span class="hint08-16-06">↓ 枠内をスクロール<br>スクロール量が背景の色相(0〜300°)になります</span>
            </div>
          </div>
        </div>

.d08-16-06{background:#1e1b4b;align-items:stretch;}
        .d08-16-06 .view08-16-06{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(135deg,hsl(0,75%,55%),hsl(60,70%,45%));
        }
        .d08-16-06 .swatch08-16-06{position:absolute;top:24px;left:50%;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.6);}
        .d08-16-06 .label08-16-06{position:absolute;bottom:14px;left:14px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:99px;letter-spacing:.05em;}
        .d08-16-06 .scr08-16-06{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-06 .sp08-16-06{height:900px;padding:16px 18px 0;}
        .d08-16-06 .hint08-16-06{display:inline-block;font-size:11.5px;line-height:1.7;color:#fff;background:rgba(0,0,0,.35);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-06 .scr08-16-06');
        if(!scr)return;
        var view=document.querySelector('.d08-16-06 .view08-16-06');
        var label=document.querySelector('.d08-16-06 .label08-16-06');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          var hue=Math.round(p*300);
          view.style.background='linear-gradient(135deg,hsl('+hue+',75%,55%),hsl('+((hue+60)%360)+',70%,45%))';
          label.textContent='HUE '+hue+'°';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();