JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>

</head>
<body>
  <button class="hexBtn">Click</button>
  <p class="hex"></p>
  <script>
  	const hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const hexBtn = document.querySelector(".hexBtn");
const bodyBcg = document.querySelector("body");
const hex = document.querySelector(".hex");

bodyBcg.addEventListener('keypress', getHex);

hexBtn.addEventListener('click', getHexClick);


function getHex(e) {
  if (e.key !== ' ' || $(e.target).text() == 'Click')
    return;

  colorGenerator();
}

function getHexClick() {
  colorGenerator();
}

function colorGenerator() {
  let hexColor = "#";

  for (let i = 0; i <= 5; i++) {
    let random = Math.floor(Math.random() * hexNumbers.length);
    hexColor += hexNumbers[random];
  }

  bodyBcg.style.backgroundColor = hexColor;
  hex.innerHTML = hexColor;
}
  </script>
</body>
</html>