<div id="inputs">
  <input type="color" value="#FF0000" oninput="result.style.setProperty('--from-color', this.value)">
  <input type="range" min="0" max="1" value="0.5" step="0.01" oninput="result.style.setProperty('--percent', this.value)">
  <input type="color" value="#0000FF" oninput="result.style.setProperty('--to-color', this.value)">
</div>
<div id="result" style="--from-color: #FF0000; --to-color: #0000FF; --percent: .5">
  Some text.
  <br><br>
  <svg viewBox="0 0 640 512" width="60" title="biking">
  <path d="M400 96a48 48 0 1 0-48-48 48 48 0 0 0 48 48zm-4 121a31.9 31.9 0 0 0 20 7h64a32 32 0 0 0 0-64h-52.78L356 103a31.94 31.94 0 0 0-40.81.68l-112 96a32 32 0 0 0 3.08 50.92L288 305.12V416a32 32 0 0 0 64 0V288a32 32 0 0 0-14.25-26.62l-41.36-27.57 58.25-49.92zm116 39a128 128 0 1 0 128 128 128 128 0 0 0-128-128zm0 192a64 64 0 1 1 64-64 64 64 0 0 1-64 64zM128 256a128 128 0 1 0 128 128 128 128 0 0 0-128-128zm0 192a64 64 0 1 1 64-64 64 64 0 0 1-64 64z" />
</svg>
</div>
@property --result-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: false;
}
@keyframes kf-color-mix {
  0% { --result-color: var(--from-color) }
  100% { --result-color: var(--to-color) }
}

@function color-mix($percent) {
  @return kf-color-mix 1s calc(-1s * #{$percent}) linear forwards paused;
}

#result {
  height: 20px;
  margin-top: 10px;
  padding-top: 10px;
  animation: color-mix(var(--percent));
  border-top: 20px solid var(--result-color);
  color: var(--result-color);
  fill: var(--result-color);
}

body {
  margin: 1em;
  width: 300px;
}

#inputs {
  display: flex;
  align-items: center;
}

[type=color] {
  width: 50px;
  padding: 1px 2px;
}

[type=range] {
  margin: 0 10px;
  flex: 1;
}

View Compiled
window.result = document.getElementById('result');

result.onclick = function() {
  console.log(getComputedStyle(this).backgroundColor);
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.