JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<!-- YOUR <SVG> HERE !! --> 
<h3>colors</h3>

</h3>
</body>

CSS

h1 {
  color: red;
}

div {
  height: 50px;
  width: 50px;
  float: right;
}

JavaScript

var doc = document.getElementsByTagName("*");
var colors = [];

for (let j = 0; j < doc.length; j++) {

  var styles = window.getComputedStyle(doc[j], null)

  for (let i = 0; i < styles.length; i++) {

    if (typeof styles[styles[i]] !== "undefined" && styles[styles[i]].match(/rgb\([0-9, ]*\)/g)) {
    
    let color = styles[styles[i]].replace(/(.*)(rgb\([0-9, ]*\))(.*)/g,"$2")
      if (!colors.includes(color))
        colors.push(color);
        
    }

  }

}


colors.map(o=>{
let div = document.createElement("div");
div.setAttribute("style","background-color:"+o+";");
document.body.appendChild(div);
})


console.log(colors);