JSFiddle - React, Tailwind, and code Playground

HTML

<div id='colors'>#94723f
#d6ae84
#cea47a
#e1ba8e
#96764c
#e2b697
#c19a6d
#c19a6d
#a07b5f
#b79161
#bc8e6f
#a27357
#dcb88f
#8d6c4d
#c79c76
#5c3e2f
#997551
#503626
#a67962
#cea778
#dab68c
#e0ae8c
#bd9071
#ac885a
#aa7c63
#f1cca3
#864c3f
#b79264
#b79264
#886952
#deb78a</div>

<div id='bodt'>

</div>

CSS

#colors {
	display: none;
}
.color {
	width: 200px;
	height: 20px;
	margin:5px;
	display: inline-block;
}

JavaScript

function rgbToHex (r, g, b) {  
        r = r.toString(16);
        g = g.toString(16);
        b = b.toString(16);
        
        if (r.length == 1) r = '0' + r;
        if (g.length == 1) g = '0' + g;
        if (b.length == 1) b = '0' + b;
        
        return (r + g + b).toUpperCase();
    }
	var Hex = rgbToHex (255, 255, 255);
	
	
	function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
	function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
	function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
	function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

	
	
	var colors = document.getElementById('colors').innerHTML.split("\n");
	
	console.log(colors);
	
	var paste='', rgb, hex, r, g, b;
	
	for(var i=0; i < colors.length; i++) {
		rgb = cutHex(colors[i]) ;
		
		r = hexToR(rgb);
		g = hexToG(rgb);
		b = hexToB(rgb);
		
		paste += "<div class='color' style='background: "+colors[i] +"'>"+colors[i]+"</div><div class='color' style='background: rgb(" + (r) + "," + (g-70) + "," + (b-30) + ")'>" + (r) + " " + (g-100) + " " + (b-60) + "</div><br>";
	}
	
	document.getElementById('bodt').innerHTML = paste;