Random Color Generator Project

In this project, we will see how to create a Random Color Generator Project using HTML, CSS, and JavaScript. This is a beginner-friendly project that will help you to grasp JavaScript concepts.

What is the logic behind the Color Generation?

We created a button when clicked generates a new color and sets the background color to that generated color. Though this project is very simple but can teach you important concepts of JavaScript.

Note: The GitHub Source Code project is attached to the page.

HTML Part:

Here, we created a ‘container’ div whose child is a second div named ‘box’. In the ‘box’ div, we created a ‘h3’ heading which shows us the randomly generated color and has a ‘button’ that is to be clicked to generate a new color.

<body>
    <div id="container" class="container">
        <div class="box">
            <h3 class="code">#fff</h3>
            <button onclick="getColor()" id="btn" class="click">Click Me</button>
        </div>
    </div>
    <script src="app.js"></script>
</body>

CSS Part:

In this part, we are simply designing the layout of the page.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    transition: 0.3s;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box{
    width:25rem;
    height: 6rem;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#btn{
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border-radius: 5px;
    outline: 0;
    color: white;
    cursor: pointer;
    background-color: rgb(199, 56, 56);
    font-size: 16px;
}

#btn:active{
    background-color:rgb(37, 5, 5);
}

JavaScript Part:

Main logic lies in JavaScript where a function has been used that generates a random hex color code using the ‘math’ built-in function and inserts that color code into an HTML document using ‘querySelector()’

const getColor=()=>{
    //hex code
    const randomNum=Math.floor(Math.random()*1215);
    const ranCode='#'+randomNum.toString(16);
    document.querySelector(".code").innerText=ranCode;
    document.body.style.backgroundColor=ranCode;
    
}
getColor();

Conclusion

Our main idea of the random color generator project is to understand the functionality of JavaScript to generate random hex colors and how to manipulate the document page using the DOM Manipulation concept of JavaScript. Thanks for visiting Codehelping.

Code Link of this project repo: (Link)

One thought on “Random Color Generator Project: JavaScript”

coloring pages says:

July 15, 2025 at 12:42 am

The coloring pages here are absolutely adorable, filled with creativity and charm, they’re perfect for kids and even relaxing for adults too, I love the variety and the high-quality illustrations, everything is printable and ready to enjoy instantly, the cute characters and festive themes make every page fun to color, definitely one of the best collections I’ve come across, can’t wait to print more and keep coloring, thank you for sharing such joyful designs, they truly brighten up my day, amazing work on each page.