How to generate random color hex codes with JavaScript

What are color hex codes?

A color hex code is a way of representing RGB colors using a hexadecimal method that consists of Red, Green, and Blue colors in varying shades. Color Hex codes are used in web development and design to represent colors and give web projects beautiful looks.

The hexadecimal method of colors uses six alphanumerical characters to denote color codes, and these take the RGB values and represent colors with the code. The Hex code is described in a manner similar to #ff5783. In this, tutorial we will learn how to generate random Hex colors using HTML, a bit of CSS, and JavaScript.
To get started, create a simple HTML document, with a code editor of your choice, and name it index.html, in the HTML document, create a color box for the illustration, similar to the one shown below, and style it to a default color of black, the content of the box can be named anything, but for the sake of this tutorial, the content of our color box is a color box, add a span element to take in the hex code that we will use javaScript to modify later in this tutorial dynamically.
The next step is to create a button element that will be the event handler to modify our color hex codes once it is clicked on. You should have a box similar to the one shown below if all the steps are followed.

Next, we add our JavaScript code to dynamically modify our color box.
Follow the following steps to create the logic for the Hex code generator.

1. Create a new array of alphanumeric characters that will make up our hex codes as seen below.

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

1. Create another variable to get hold of the button element that will handle the click event.

const btn = document.getElementById(“btn”);

1. Create the last variable that will change the text of the color box to the hex code that is dynamically generated in our code.

const color = document.querySelector(“.color”);

The next step is to add an event listener that will call the hex code generator function once the button is clicked, we will use a for loop to generate an hex code of six alphanumeric character when it is called, but before that, let us have a function that will generate random numbers from our array called hex.

function getRandomNumber() {
    return Math.floor(Math.random() * hex.length)
}; 

This function will be useful in our event listener.

Lets go ahead to create the event listener:

btn.addEventListener("click", function(){
});

This event listener will take an anonymous function that will use a for loop to generate our random hex code as follows:

function(){
  let hexColor= "#";
  for(let i=0; i<6; i++){
      hexColor += hex[getRandomNumber()]
  };

The next step is to change the textContent of to the value of our hex code whenever a hex code is generated as follows:
color.textContent = hexColor;
The last step is to set the color of our box to the randomly generated color hex code when the button is clicked on using the code below:
document.getElementById("box").style.backgroundColor= hexColor;
Putting it together, our event listener should look like the code block below:

btn.addEventListener("click", function () {
  let hexColor = "#";
  for (let i = 0; i < 6; i++) {
    hexColor += hex[getRandomNumber()];
  }
  color.textContent = hexColor;
  document.getElementById("box").style.backgroundColor = hexColor;
});

Anytime we click on the button element, the color of the box should change to the value of the generated color hex code as seen below where the color of our box is updated to the color hex code.

Conclusion.

JavaScript is a powerful tool that can be used to actualize anything you can think of as a developer, and this is the superpower of developers. You can use this color hex

Comments

[Jon Randy 🎖️]

const hexColor= () =>
  '#'+(~~(Math.random()*8**8)).toString(16).padStart(6,0)