How to Build a Hex Color Generator in JavaScript

If you want to create your color generator using JavaScript, then you’re welcome to our tutorial.

In this snippet, we are going to build a hex color generator step by step. Firstly, we need a folder with three files:

  • index.html - for our markup
  • style.css - for styling
  • app.js - for the function(s)

We must bring these three files all together using links. Open your index.html file in a text editor and add a title, a viewport and link all files together, so that the index.html file looks like something like this:

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>
      Hex Color Generator
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <div id="hex"></div>
  <script src ="app.js"></script>
</html>

Now we have to link to our JavaScript file which contains the function of generating the random color.

We know, that colors are defined either in an RGB or Hex format, for example, #000000 (black) or #C0C0C0(grey). For generating the number, we use the Math.random JavaScript function, which returns random numbers between 0 and 1. Here is how this function looks like:

function getColor() {
  return "#" + Math.random();
}

document.write(getColor());

Now we need to convert the number to a string with a hexadecimal value. To do that, we use the toString() method. We are going to add .toString(16) at the end of the Math.random function. Here is how it will look like:

function getColor() {
  return "#" + Math.random().toString(16);
}

document.write(getColor());

The first step is done, but that’s not all. We need to remove the (0) and (.) and limit the result to 6 characters. In this case, we will use the slice() method by adding the .slice(2,8) at the end of the Math.random function. Why 2 and 8? As we want to get six characters, we should slice the result, starting with the first two characters and ending at the eighth character. Here’s the code:

function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}

document.write(getColor());

Finally, the hex value must be set as a background. This can be done using another function, which will set getColor() to a variable and will define the document.body.style.background equal to that variable.

Here’s how it looks like:

function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}

function setBackground() {
  var bgColor = getColor();
  document.body.style.background = bgColor;
}
setBackground();

After all these steps, we can open our HTML file in the browser and see a random color every time we refresh the page. To prevent refreshing all the time, we should generate a new color every time the space bar clicked. All we need to do is adding the setBackground() function at the end and tell the browser when to run it.

You probably guess that the best way of doing that is using an if statement that will run the setBackground() function in case the code for spacebar (keyCode of 32) pressed.

So the document.body.keyup must be equal to the function, and the function must include an if statement which states that if the .keyCode==32, setBackground() should run.

Here’s an example of the code:

// generator function
function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}
// background color style
function setBackground() {
  var bgColor = getColor();
  document.body.style.background = bgColor;
}
// function on click
document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    setBackground();
  }
};

Now it’s time to pass to our style.css file. All we need to do is adding a transition to make the switching between colors more fluid:

body {
  transition: all 0.5s ease;
}

Related Resources

Do you find this helpful?

Related articles