random hex color code generator in javascript

#Random hex color code generator in javascript full#

You can find the complete code on my GitHub repository. An example of a Hex color representation is 123456, 12. We've successfully built a random hex color generator using HTML, CSS and a few lines of JavaScript. About Color Generator Hex - 6-digit, 24 bit, hexidecimal number that represents Red, Green, and Blue. Here is how this function looks like: Now we need to convert the number to a string with a hexadecimal value. For generating the number, we use the Math.random JavaScript function, which returns random numbers between 0 and 1.

#Random hex color code generator in javascript full#

Then the cycle repeats itself until the 6th round is over at which time a full 6-digit hex code will have been generated.Īll that's left is to set the textContent of the span tag and the background color of the page to be the value of hex. //store your colors in an array, each one separated by a comma 2. We know, that colors are defined either in an RGB or Hex format, for example, 000000 (black) or C0C0C0 (grey). I can now access the hexValues array item in the position corresponding to the generated index number using bracket notation, then add it to the end of the hex variable i.e hex += hexValues. The random whole number generated is appended to a new variable index. This makes sure that any number generated is a valid hexValues index. It basically rounds it down to the nearest whole number. First we need to create two files index.html and style.css then we need to do code for it. So what do we do if we want a whole number larger than 1? We multiply it by the number we want (in this case, the length of the hexValues array) and wrap it within the Math.floor() function which returns the largest integer less than or equal to a given number. We know, that colors are defined either in an RGB or Hex format, for example, 000000 (black) or C0C0C0 (grey). Hello guys in this tutorial we will create random hex color code generator Using HTML CSS and javaScript. Now, the Math.random() function picks a random number between 0 and 1 (not including 1) and returns a decimal but we don't want decimals. Then it loops over the hexValues array 6 times and each time generates a random number using Math.random(). padStart(6, '0') // in case the number is too small to fill 6 hex digits. Enter fullscreen mode Exit fullscreen modeĮvery time the button is clicked, the changeHex function is called which creates a variable hex and sets its value to #. So you can simplify your random number generation something like this: const color '' + Math.floor(Math.random() (0xffffff + 1)).