Как сделать плавный переход между двумя цветами, используя только js?

Question

[djEban]

Есть два цвета в формате hex: #7c4830 и #311609
Есть ли какой-то способ интерполировать между двумя hex-значениями в зависимости от скролла?

const scrollX = element.scrollTop;
const range = ["#7c4830", "#311609"];
const start = 0;
const end = 300;

const progress = scrollX / (end - start);
// Теперь в зависимости от прогресса вычислить промежуточное  значение между двумя хексами

Answer 1

[djEban]

Если кому интересно, сделал так:

function hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

    if (!result) {
      throw new Error("Expected a hex value. Received " + hex);
    }

    return {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16),
    };
  }

  function componentToHex(c) {
    const hex = c.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }

  function rgbToHex(r, g, b) {
    return (
      "#" +
      this.componentToHex(r) +
      this.componentToHex(g) +
      this.componentToHex(b)
    );
  }

  function lerpRGB(startRGB, endRGB, t) {
    const rgb = { r: 0, g: 0, b: 0 };

    ["r", "g", "b"].forEach((channel) => {
      const startValue = startRGB[channel];
      const endValue = endRGB[channel];
      rgb[channel] = Math.ceil(t * (endValue - startValue) + startValue);
    });

    return rgb;
  }

  const scrollX = element.scrollTop;
  const range = ["#7c4830", "#311609"];
  const start = 0;
  const end = 300;

  const t = scrollX / (end - start);

  const startRGB = hexToRgb(range[0]);
  const endRGB = hexToRgb(range[1]);
  const { r, g, b } = lerpRGB(startRGB, endRGB, t);
  const hex = rgbToHex(r, g, b);

  element.style.backgroundColor = hex