How to Create a Random Color Picker Using JavaScript

Random color choices

All of the colors that appear on a website have their respective codes. Random color choices very useful as a reference material when looking for colors and color codes. Then how do you do random color selection with JavaScript? It’s easy, let’s open your computer and follow some of the simple steps below.


1. Open the XAMPP control panel and activate Apache.

2. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

          Random Color Picker                        
The color copied to clipboard.

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named RandomColorsPicker – save the code above with the name index.html.

3. To see the results of the script code above, you can open your browser and type http: // localhost / RandomColorsPicker.

4. Enter the following CSS3 code.

*{  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: "Open Sans",sans-serif;}.colors-container{  width: 100%;  min-height: 100vh;  display: flex;  flex-wrap: wrap;}.color{  flex: 25%;  min-height: 220px;  transition: .4s linear;  cursor: pointer;  position: relative;}.color:hover{  filter: brightness(80%);}.color-hex{  position: absolute;  bottom: 10%;  width: 100%;  text-align: center;  color: #fff;  font-size: 24px;  letter-spacing: 2px;}.refresh{  position: fixed;  top: 20px;  right: 20px;  width: 50px;  height: 50px;  border: none;  border-radius: 50%;  font-size: 18px;  color: #fff;  background-color: #000;  outline: none;  cursor: pointer;  transition: .4s linear;}.refresh:hover{  transform: rotate(180deg);}.copied{  position: fixed;  bottom: 20px;  left: 50%;  transform: translateX(-50%);  color: #fff;  background-color: #000;  padding: 15px 40px;  min-width: 340px;  text-align: center;  display: none;}@media screen and (max-width: 800px){  .color{    flex: 100%;  }}

Save the CSS3 code in the xampplite folder – htdocs – create a new folder named RandomColorsPicker – save the CSS3 code with the name style.css.

5. Reload the URL address: http: // localhost / RandomColorsPicker. Appearance random color selection display symbol only Update in the upper right corner.

6. To display colors, enter the JavaScript code below in the index.html file. Put the JavaScript code in front of the code .


Don’t forget Ctrl + S.

7. Reload the URL address: http: // localhost / RandomColorsPicker. First view of random color selection. Click on the icon Update to change the color.

Choose a color and click.

The color code will be copied automatically and you can paste the code into the program file.

8. Done. Very interesting, isn’t it?

Hence the explanation of the tutorial ‘How to Make Random color choices with JavaScript ‘. Much luck.

Leave a Reply

Your email address will not be published.