Build a Random Color Generator with JavaScript
Color generators are popular among Web Designer. There is many sites that provide free color generators such as:
Have you ever thought about building a generator by yourself?
In this article, I want to share about how to make your own random color generator using Vanilla JavaScript. The main is finding how to make string that contain hex color number.
After some research, I found some interesting article, we can build the hex color by using combination of Math.random() and Math.floor() feature from JavaScript. There is six digits inside hex color number, every digit has 16 number, between 0 until F. If we calculate it, we will get this.
hex Total = 16 ** 6 = 16777216From the total, if we translate it using toString(16), we will get the value of ‘1000000’, it’s not the hex code. We can’t use it, because it takes 7 digits of integer. So, we decrease it by 1 and using 16777215
Boilerplate
index.html
style.css
Output
Yeah, from the boilerplate we will get things that most likely the color generator, but nothing is working here. We need some JavaScript magic to make the program work.
Main Algorithm
Before, I was talking about using Math.random(), Math.floor(), and toString(16). Here is the implementation to your code
Whenever you run the code, it will print different hex value, that contain six digit of string, randomly. Because we want to build the random color generator, we need to make sure every time we click the button, the color will change right?
Build The Program
To change the background color in every click on ‘Click Me’ button, we need to using DOM feature of JavaScript, here is what I did
As you can see, I am declaring four variables. The body and all three palettes. I am using the CSS linear-gradient function to randomize three different color in the body. The palette is used to give the hex color code in the background. If you remember the HTML boilerplate above. Inside line 13 I was calling randomColor() function in the button. So every click on it, will change the the color of the body like this.
From here, our goal for building the random color generator is finish. Congratulation!!!
Bonus
If you ever using random color generator, perhaps you will easily copied the color hex code, by clicking the color. We can make our program do it too. If you read the CSS, you will get something interesting in line 58–61. I give the padding for .color class from pallete text. If I change the transparent into another color, you will see this.
The concept is every time you click inside the area of the color. The hex color code will be copied into your clipboard. In this tutorial I will make an alert whenever you click it. To make it come true, i declare two new function, so my JavaScript program will be like this.
Inside line 18, I am declaring new DOM that takes the .color class from HTML. Also, by using forEach function I make every time the .color class clicked, it will call copyHex() function.
In copyHex() function, I call selectArea() function. The selectArea() is the area of green color just like the picture above. Lastly, I make an alert whenever the area is clicked and also copied the text color hex code.
Finally, the program will be like this:
Conclusion
Congratulation your program is ready!
Have a nice day!✌
