Extract the color combination from a web page

script.js

(() => {
  // Settings
  const debug = false;
  const maxDepth = false;
  const rootElementSelector = false;

  // Result
  const refList = [];
  const output = document.createElement('div');

  // Utils
  const isAlreadyReferenced = newRef => refList.some(ref => Object.keys(newRef).every(key => newRef[key] === ref[key]));

  const walk = (node, parentBackgroundColor = 'rgb(255, 255, 255)', depth = 0) => {
    let {color, backgroundColor} = window.getComputedStyle(node);
    if (backgroundColor == 'transparent') {
      backgroundColor = parentBackgroundColor;
    }
    const styles = {color, backgroundColor};
    if (!isAlreadyReferenced(styles)) {
      if (debug) {
        console.log(styles, `${node.tagName}${[...node.classList].map(s=>`.${s}`).join('')}`);
      }
      refList.push(styles);
    }
    if (!maxDepth || depth < maxDepth) {
      [...node.children].forEach(el => walk(el, backgroundColor, depth + 1));
    }
  };

  // Let's go!
  walk(rootElementSelector ? document.querySelector(rootElementSelector) : document.documentElement);
  refList.forEach(ref => {
    const el = document.createElement('div');
    el.setAttribute('style', `float: left; margin: 0.5em 1em; padding: 0.5em 1em; color: ${ref.color}; background-color: ${ref.backgroundColor}`);
    el.innerHTML = 'Lorem Ipsum';
    output.appendChild(el);
  });
  output.setAttribute('style', `position: fixed; top: 0; left: 0; right: 0; z-index: 999999; padding: 0.5em 0; background: white;`);
  document.body.appendChild(output);
})();