Random Color Generator with JavaScript & CSS

In this article, you will learn how to create a random color generator using JavaScript and CSS. This is a basic JavaScript project that can generate random colors with a single click. The color code of that color can be seen in front. Which you can copy and use in your work.

To build this type of JavaScript random color generator you need to have knowledge of HTML CSS and JavaScript. There is a generate button here. When you click on that button, the color code will be copied.

JavaScript Random Color Generator (Live Demo)

Below I have given a live demo of it which will help you to know how this project (Random Color Generator with JavaScript) works. Here you will find the required source code.

See the Pen Random Color Generator Using JavaScript by Raj Template (@RajTemplate) on CodePen.

As you can see above, this is a very nice and simple project. First I designed the webpage. Then I made a box here. I first gave a heading in that box. Then there is a display where random color can be seen to be generated. Then there is a small box where the color code can be found.

I have created two buttons at the end of all. To generate one color and copy another color. Each time you click on the Generate button, there will be a different color general at random. If you want to copy that color code, the copy button will help.

How To Generate a Random Color in JavaScript

Now I have shared the complete tutorial on how to create this project (Random color generator in JavaScript). If you know the basics of JavaScript, you can easily build it. 

Here you have complete step-by-step tutorials that will help you know which code works. First, you create an HTML and CSS file.

Step 1: Basic structure of Color Generator

I have created the basic structure of this color generator using the following HTML and CSS code. A small box has been created on the page where all the information will be added. The background color of the box is white.

<div class="container">

 

</div>

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    border: none;

    outline: none;

    font-family: sans-serif;

}

body{

    background-color: #0574c8;

}

.container{

    background-color: white;

    width: 60vmin;

    padding: 2.5em 1.1em;

    position: absolute;

    transform: translate(-50%,-50%);

    top: 50%;

    left: 50%;

    font-size: 3vmin;

    border-radius: 10px;

}

Step 2: Add a heading using HTML

Now I have added a heading in this box using the following codes. It basically enhances the beauty. For this, I have used the h1 tag of HTML and designed it with the help of CSS.

<h1>Color Generator</h1>

.container h1{

  font-size: 27px;

  text-align: center;

  margin-top: -20px;

  color: #09599a;

  margin-bottom: 20px;

}

Step 3: Create a display for color viewing

Now HTML and CSS code have helped to create the display. The display is basically for viewing by generating colors. Whenever you click on the generator button, you can see the color in this display. Its width is 100% and height is 30vmin. Box-shadow has been used to enhance beauty.

 <div id="output-color">

    <span></span>

 </div>

#output-color{

    position: relative;

    height: 30vmin;

    width: 100%;

     box-shadow: 0 0 20px rgba(0,139,253,0.25);

    border: 2px solid #ffffff;

    margin: auto;

    display: grid;

    margin-bottom: 15px;

    place-items: center;

}

#output-color span{

    display: block;

    width: 100%;

    height: 100%;

}

 I have added a kind of animation using the below CSS. There will be a kind of animation whenever this color can be seen in the display.

.show-color{

    animation: pop 0.8s;

}

@keyframes pop{

    0%{

        transform: scale(0);

    }

    100%{

        transform: scale(1);

    }

}

Step 4: Create a box to view the color code

 Now I have created a small box where the code of this generated color can be seen.

 <input type="text" id="output" readonly>

input[type="text"]{

    width: 100%;

    background-color: transparent;

    box-shadow: 0 0 20px rgba(0,139,253,0.65);

    font-size: 1.3em;

    padding: 0.3em 0;

    margin: 1em 0;

    border-radius: 5px;

    color: #000000;

    text-align: center;

}

input[type="text"]::-moz-selection{

    background: transparent;

}

input[type="text"]::selection{

    background: transparent;

}

Step 5: Create a generator and copy button

 Now I have created two buttons to generate the color and to copy the color. The width of the button is 120px and the height depends on the padding.

 <div class="btns">

     <button id="gen-btn">Generate</button>

     <button id="copy-btn">Copy</button>

 </div>

.btns{

    display: flex;

    margin-top: 15px;

    justify-content: space-around;

}

.btns button{

    font-size: 1.03em;

    padding: 0.8em 1.7em;

    border-radius: 7px;

    width: 120px;

    font-weight: 600;

    cursor: pointer;

}

 Now the following CSS codes have helped to add different background colors for the two buttons. The first button has added blue color to the case. I have added red color in the second case. You can change the background color to your liking.

#gen-btn{

    background-color: #205e94;

    color: #ffffff;

}

#copy-btn{

    background-color: #d23332;

    color: #ffffff;

}

Step 6: Activate Random Color Generator with JavaScript

Above we have designed the basics of this project (Build a Random Color Generator with JavaScript). Now is the time to implement it with JavaScript. I tried to explain the whole code.

First I set the color display, the color code, and the ID function of the two buttons one by one.

let outputColor = document.querySelector("#output-color span");

let output = document.getElementById("output");

let genBtn = document.getElementById("gen-btn");

let copyBtn = document.getElementById("copy-btn");

 Now I have used HexString. It is a binary value that combines with each other to form colors.
Now I have added all the color characters together. Later I will create beautiful colors by randomly adding using JavaScript.

let hexString = "0123456789abcdef";

Now I have done the work of generating color. Math Random helped to create random colors. This is very simple JavaScript. If you know basic JavaScript you can easily understand it.

let genHexCode = () => {

    let hexCode = "#";

    for( i = 0; i < 6; i++){

        hexCode += hexString[Math.floor(Math.random() * hexString.length)];

    }

    output.value = hexCode;

    outputColor.classList.remove("show-color");

    setTimeout( () => {

        outputColor.classList.add("show-color");

    },10);

    outputColor.style.backgroundColor = hexCode;

}

Now I have activated the copy button. This button will help you to copy the color code that will be created above.

copyBtn.addEventListener("click", () => {

    output.select();

    document.execCommand("copy");

})

 Now I have activated the generate button. I have created a system to generate a color. Now I have been instructed to implement that genHexCode system. That system will work whenever you click on the Generate button. This will create color and can be seen in the display.

window.onload = genHexCode;

genBtn.addEventListener("click", genHexCode);

 Hope you learned from this tutorial how I created this random color generator using HTML CSS and JavaScript. Earlier I made a random gradient color generator. The required source code is in the download button below.

The download will start automatically