css-levels.js

// https://gist.github.com/rosszurowski/67f04465c424a9bc0dae
function lerpColor(a, b, amount) {
  var ah = parseInt(a.replace(/#/g, ""), 16),
    ar = ah >> 16,
    ag = (ah >> 8) & 0xff,
    ab = ah & 0xff,
    bh = parseInt(b.replace(/#/g, ""), 16),
    br = bh >> 16,
    bg = (bh >> 8) & 0xff,
    bb = bh & 0xff,
    rr = ar + amount * (br - ar),
    rg = ag + amount * (bg - ag),
    rb = ab + amount * (bb - ab);

  return (
    "#" + (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0).toString(16).slice(1)
  );
}

// https://gist.github.com/gre/1650294
const easing = {
  linear: function(t) {
    return t;
  },
  easeInQuad: function(t) {
    return t * t;
  },
  easeOutQuad: function(t) {
    return t * (2 - t);
  },
  easeInOutQuad: function(t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  },
  easeInCubic: function(t) {
    return t * t * t;
  },
  easeOutCubic: function(t) {
    return --t * t * t + 1;
  },
  easeInOutCubic: function(t) {
    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
  },
  easeInQuart: function(t) {
    return t * t * t * t;
  },
  easeOutQuart: function(t) {
    return 1 - --t * t * t * t;
  },
  easeInOutQuart: function(t) {
    return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
  },
  easeInQuint: function(t) {
    return t * t * t * t * t;
  },
  easeOutQuint: function(t) {
    return 1 + --t * t * t * t * t;
  },
  easeInOutQuint: function(t) {
    return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
  }
};

function getSelector(length = 1) {
  return Array.from({ length }, () => "*").join(" ");
}

function getLevels(level = 1) {
  const selector = getSelector(level);

  if (!document.querySelectorAll(selector).length) {
    return level;
  }

  return getLevels(level + 1);
}

// https://github.com/mrmrs/colors/blob/master/src/_variables.css
const colors = ["#ffffff", "#ff4136"];
const levels = getLevels();

Array.from({ length: levels }, (_, index) => {
  const selector = getSelector(index + 1);

  const amount = easing.easeInOutQuint((1 / levels) * (index + 1));

  const color = lerpColor(colors[0], colors[1], amount);

  document.querySelectorAll(selector).forEach(element => {
    const styles = {
      background: color
    };

    Object.assign(element.style, styles);
  });
});