Choosing matching colors when creating a web page is crucial as same as choosing clothes to wear. With the help of Random Hex Color Generator, it can be done in a little easier way. It generates hex color code as an actual color and also in text format randomly.
Math.random() function. On the other hand, you can use this tool in real projects to speed up the color choosing process.
For simplicity, I developed this project idea in two versions.
- First version: was developed as a stand-alone tool to generate random hex colors.
- Second version: was developed to use as an embedded code snippet to generate matching colors randomly for an element of another web project.
The stand-alone version of the project has
<div> elements to display generated color and its hex code in text format. Also a
<button> to trigger the process.
background-color in your web project. Make sure your element is not empty or it has some assigned
height, otherwise it won't be visible.
<element id="yourElement" onclick="randomHexColors('yourElement')"></element>
<element> can be any HTML element such as
<div>. And make sure there is no
background-color added in CSS for the element.
randomHexColors() function was made as parameterized in the second version.
- Stand-alone version:
- Embedded version:
- one for generating a hex code randomly:
- one for displaying the generated hex color as the actual color and also in text format:
You can see the live preview of the stand-alone version at CodePen here.
Note that, when you are using the second version in your project, don't forget to remove all the stuff from your code after choosing your matching color.
As I mentioned before, I've got these two versions of the project idea built within half an hour and I tested them for a couple of my projects.
While testing the second version, I realized that it is more effective when choosing matching colors for separate but close elements at the same time.
Although this is only for choosing background colors, I hope it can be improved to choose
border-color at the same time.
Furthermore, if you are a beginner and want to build this project, first go with the stand-alone tool and then work with the second one. Because, in my opinion, building the second version of the project was a bit trickier than the first one.
Also, I hope this will be a very useful project for any web developer against its simplicity.