No está claro si desea mostrar el texto sobre cada panel o simplemente hacer que uno de los paneles debajo del título sea el correcto; Por cierto, edité el código para hacer ambas cosas. Intente editar el código de esta manera para verificar si el resultado es el esperado.

parte HTML:

 <header> <h1>Guess the Color</h1> </header> <main> <!-- question --> <p id="hexCodeToGuess"></p> <br> <!-- one --> <span id="oneHexCode" class="label"></span> <div id="one" class="panel"></div> <!-- two --> <span id="twoHexCode" class="label"></span> <div id="two" class="panel"></div> <!-- three --> <span id="threeHexCode" class="label"></span> <div id="three" class="panel"></div> <!-- four --> <span id="fourHexCode" class="label"></span> <div id="four" class="panel"></div> </main>

Parte de JavaScript:

 var colorCodeToGuess = '#' + Math.random().toString(16).slice(2, 8); // set the first label with the question (the color code to guess) hexCodeToGuess.innerHTML = colorCodeToGuess; // list of panels var panels = document.getElementsByClassName('panel'); // list of labels var labels = document.getElementsByClassName('label'); // generate the position of the right answer panel (random to make it unpredictable) var correctPanelIndex = getRandomInt(panels.length); // cycle trough the divs for (var i = 0; i < panels.length; i++) { // set by default a random new color var currentColorCode = '#' + Math.random().toString(16).slice(2, 8); // the div is in the right answer position => override the current color with the colorCodeToGuess generate at the start (the problem of the previous code) if(i == correctPanelIndex){ currentColorCode = colorCodeToGuess; } // set the color to the panel panels[i].style.backgroundColor = currentColorCode; // set the text on a label above the panel labels[i].innerHTML = currentColorCode; } // an useful function to get a random integer passing it the numer of values possible function getRandomInt(max) { return Math.floor(Math.random() * max); }

Notará que uno de los paneles tiene el mismo código de la pregunta del primer código escrito debajo del título. También comenté el código para que pueda eliminar la lógica no deseada de manera consciente.

Su pregunta es un poco vaga, pero si lo hice bien, desea mostrar el color de fondo de uno de sus divs en formato hexadecimal. El siguiente código hará eso. He agregado comentarios sobre el código para explicar lo que estoy haciendo.

 //get your panels (using selector is better that using div) var divs = document.querySelectorAll(".panel"); for (var i = 0; i < divs.length; i++) { divs[i].style.backgroundColor = '#' + Math.random().toString(16).slice(2, 8); } //get the current backgrounds of all panels and add them to an array in hex format curruntColorsArr = []; x = document.querySelectorAll(".panel"); for (i = 0; i < x.length; i++) { //get background color backgroundColors = x[i].style.backgroundColor //convert to hex function rgbToHex(rgb) { return '#' + rgb.match(/[0-9|.]+/g).map((x, i) => i === 3 ? parseInt(255 * parseFloat(x)).toString(16) : parseInt(x).toString(16)).join('') } //push to array curruntColorsArr.push(rgbToHex(backgroundColors)); } //get random color from the array and set it to innerHTML function random_item(items) { return items[Math.floor(Math.random() * items.length)]; } const hexCode = document.getElementById("hexCode") hexCode.innerHTML = random_item(curruntColorsArr)

 .panel { height: 100px; width: 100px; border: 2px solid yellow; border-radius: 25%; }

 <header> <h1>Guess the Color</h1> </header> <main> <span id="hexCode"></span> <div id="one" class="panel"></div> <div id="two" class="panel"></div> <div id="three" class="panel"></div> <div id="four" class="panel"></div> </main>