Shannon Crabill's Blog

Building a Random Hex Color Generator with Javascript

Shannon Crabill's photo
Shannon Crabill
·

3 min read

A few months ago, I revisited an old idea for a random hex value generator.

Creating a Random Hex Color

I had tried to build it with Javascript, then Ruby, but for today, I wanted to try a Javascript method again. In the past, I was able to randomly pull an item from an array of valid hex values, but my function ended up repeating the same, random character 6 times.

What I needed to happen was randomly get a character 6 times and then append them together. What the Hex!? A tutorial from Emily, another Flatiron School graduate, had a solution that worked.

generateRandomHexColor = () => {
  const hexadecimalIntegers = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
  let hexColor = "#"

  while (hexColor.length < 7) {
    hexColor += hexadecimalIntegers[Math.round( Math.random() * hexadecimalIntegers.length )]
  }

  return hexColor
}

Calling generateRandomHexColor()3 times in a row would generate results like this:

  • “#a7cb4c”
  • “#19514f”
  • “#5929e8”

Updating the Background Color

I had a basic, HTML 5 document as a shell for this project. To test if I was able to update the background-color of the body element, I did a quick test.

I could query the body element with let body = document.querySelector("body"). Then, I could change the style with body.style.backgroundColor = "pink".

Cool! Now I needed this to work dynamically.

Since the generateRandomHexColor function returns the hex value as a string, I could call the function as the value when changing the color assignment. body.style.backgroundColor = generateRandomHexColor() did exactly what I looking for.

To separate concerns, I created an eventListener that fires after the document is loaded before getting an random color. Otherwise, if the function tries to change the background color of the body before the content has fully loaded, you will get an error. 

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');

    let currentColor = generateRandomHexColor()

    document.querySelector("body").style.backgroundColor = currentColor
    document.querySelector("h2").innerText = currentColor
});

I also added an h2 element that prints out the hex value each time it changes.

Undefined Values

On occasion, generateRandomHexColor() would generate an invalid hex value like #67eundefined. Well, since 6, 7, and ,e were valid characters, the function its self was working, but was getting an invalid/undefined value. So, I took a closer look at the random part of the generateRandomHexColor() to see what was happening.

Math can get weird with Javascript. One thing to know is that Math.round rounds up or down to nearest integer. Math.random generates a float between 0 and 1, but never exactly 1. Multiplying it by the length of hexadecimalIntegers gives us a number between 0 and the length of the array.

Since Math.round can round up or down, the end result could be the number 16. Since counting arrays starts at 0, hexadecimalIntegers[16] would return undefined, since there is no 16th spot in the array!

Changing Math.round to Math.floor resolves this by always rounding down. This way, the largest number that can be randomly generated is 15, which is the last item in the array.

Conclusion

In the end, I’m happy with how Oh Hex! came out. I was able to generate a valid, random hex color with Javascript and dynamically update a DOM element with that color.

<figcaption>Oh Hex! example featuring the hex value #d65ac3 as the background color.</figcaption>

For future improvements, I would like to make the hex value an element that can easily be copied to the clipboard and for the body background color to be updated as a variable, instead of inline (if that’s possible)

2Articles1WeekCSSMathJavaScript