JSFiddle - React, Tailwind, and code Playground

by Gerardo Ramirez

HTML

<div id="colors"></div>

CSS

.color {
  display: inline-block;
  width: 70px;
  height: 30px;
}

JavaScript

var colorsContainer = document.getElementById("colors");

var steps = ['00', '33', '66', '99', 'cc', 'ff'];
for(var r = 0; r < steps.length; r++){
  for(var g = 0; g < steps.length; g++){
    for(var b = 0; b < steps.length; b++){
    	var colorDiv = document.createElement('div');
      colorDiv.className = 'color';
      colorDiv.style.backgroundColor = 
      	'#' + steps[r] + steps[g] + steps[b];
    	colors.appendChild(colorDiv);
      if(b === 5){
    		var br = document.createElement('br');
    		colors.appendChild(br);
    	}
    }
  }
}