JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<div class="training" >
      <div>Treinando<br />Aguarde...</div>
    </div>

    <div class="current-color" style="--red: 255; --green: 0; --blue: 0;" ></div>

    <div class="controls" >
      <div class="control" >
        <input type="range" min="0" max="255" step="1" id="red" value="255" />
        <span id="red-value" >255</span>
      </div>
      <div class="control" >
        <input type="range" min="0" max="255" step="1" id="green" value="0" />
        <span id="green-value" >0</span>
      </div>
      <div class="control" >
        <input type="range" min="0" max="255" step="1" id="blue" value="0" />
        <span id="blue-value" >0</span>
      </div>
    </div>

    <div class="result-container" >
      <button>
        Advinhar Cor:
      </button>    <output>___________</output>
    </div>

CSS

html, body{
  height: 400px;
}
body{
  padding: 15px;
  margin: 0;
}

.current-color{
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: rgb(
    var(--red),
    var(--green),
    var(--blue)
  )
}

button{
  background-color: #0062ac;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 25px;
  padding: 12px 18px;
  cursor: pointer;
}

.training{
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #333;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  opacity: .85;
}
.training.done{
  display: none;
}


.controls{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 15px;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}

.control{
  display: flex;
  flex-flow: column;
  text-align: center;
}

.result-container{
  margin-top: 20px;
  text-align: center;
}

output{
  padding: 12px 20px;
  font-size: 25px;
}

output.refresh{
  background-color: green;
  color: white;
}

JavaScript

const cores = [
  {
  	nome: 'Vermelho',
    valores: [[255,160,122],[250,128,114],[233,150,122],[240,128,128],[205,92,92],[220,20,60],[178,34,34],[255,0,0],[139,0,0],[128,0,0],[255,99,71],[255,69,0],[219,112,147]]
  },
  {
  	nome: 'Verde',
    valores: [[124,252,0],[127,255,0],[50,205,50],[34,139,34],[0,128,0],[0,100,0],[173,255,47],[154,205,50],[0,255,127],[0,250,154],[144,238,144],[152,251,152],[143,188,143],[60,179,113],[32,178,170],[46,139,87],[128,128,0],[85,107,47],[107,142,35]]
  },
  {
  	nome: 'Azul',
    valores: [[240,248,255],[230,230,250],[176,224,230],[173,216,230],[135,206,250],[135,206,235],[0,191,255],[176,196,222],[30,144,255],[100,149,237],[70,130,180],[95,158,160],[123,104,238],[106,90,205],[72,61,139],[65,105,225],[0,0,255],[0,0,205],[0,0,139],[0,0,128],[25,25,112],[138,43,226],[75,0,130]]
  },
  {
  	nome: 'Amarelo',
    valores: [[255,255,204],[255,255,153],[255,255,102],[255,255,51],[255,255,0],[204,204,0],[153,153,0]]
  },
  {
  	nome: 'Laranja',
    valores: [[255,127,80],[255,99,71],[255,69,0],[255,165,0],[255,140,0]]
  },
  {
  	nome: 'Roxo',
    valores: [[230,230,250],[216,191,216],[221,160,221],[238,130,238],[218,112,214],[255,0,255],[255,0,255],[186,85,211],[147,112,219],[138,43,226],[148,0,211],[153,50,204],[139,0,139],[128,0,128],[75,0,130]]
  },
  {
  	nome: 'Rosa',
    valores: [[255,192,203],[255,182,193],[255,105,180],[255,20,147],[219,112,147],[199,21,133]]
  },
  {
  	nome: 'Cinza',
    valores: [[220,220,220],[211,211,211],[192,192,192],[169,169,169],[128,128,128],[105,105,105],[119,136,153],[112,128,144],[47,79,79],[0,0,0]]
  },
  {
  	nome: 'Marrom',
    valores: [[255,248,220],[255,235,205],[255,228,196],[255,222,173],[245,222,179],[222,184,135],[210,180,140],[188,143,143],[244,164,96],[218,165,32],[205,133,63],[210,105,30],[139,69,19],[160,82,45],[165,42,42],[128,0,0]]
  }
]

const entradas = [],
    respostas = [];

cores.forEach((cor, indice) => {
    const codigoCor = [0,0,0,0,0,0,0,0,0];
    codigoCor[indice] =...