← Vanilla JSColor Interpolation

FromTo10

import kleur from "@driangle/kleur";

const from = kleur("#1a1a8e");
const to   = kleur("#e8a030");
const bars  = document.querySelectorAll(".bar");

bars.forEach((bar, i) => {
  const t = i / (bars.length - 1);
  const color = kleur.mix(from, to, t);
  bar.style.backgroundColor = color.toHex();
  bar.style.color = kleur.isLight(color)
    ? "#111" : "#f5f5f5";
});

#1a1a8e0%

#31298411%

#48387922%

#5f476f33%

#76566444%

#8c645a56%

#a3734f67%

#ba824578%

#d1913a89%

#e8a030100%