Unleash Your Creativity: Build a Stunning Colour Generator with HTML, CSS, and JavaScript

In this article, we will learn to create a simple and powerful colour generator using HTML, CSS, and JavaScript. This colour generator will generate random colours and display HEX and RGB codes. In this article, you will learn how to build a simple colour generator.

Before you start this project, you need to have a basic understanding of HTML, CSS, and JS. If you are a beginner and don’t have enough knowledge of the functionalities of HTML, CSS, and JS, you can refer to our Programming tab for more details.

Here are the Steps to build a Colour Generator

Step1: Write the HTML code as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
        <h2 id="color-code"> # Color Code </h2>
        <button id="btn">Click to change color</button>

    </div>


   <script src="index.js"></script>
    
</body>
</html>

Step 2: Write the CSS code as shown below.

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300&family=Roboto:wght@100&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
#container{
width:30%;
margin: 10px;
padding: 10px;
border-radius: 5px;
font-size: 40px;
text-align: center;
transition: 1s;
}
button{
width: 100%;
background-color: black;
display: block;
font-size: 40px;
color: white;
border: none;
border-radius: 5px;
margin-top: 5px;
}

Step 3: Write the JS code as shown below

const getColor = () => {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomCode = "#" + randomNumber.toString(16);
    const container = document.getElementById("container");
    container.style.backgroundColor = randomCode;
    document.getElementById("color-code").innerText = randomCode;
}
document.getElementById("btn").addEventListener("click", getColor);

Explanation

HTML: HTML gives a structure to our project. This project contains a div for colour codes and a button to generate random colours which works through logic as given in the Javascript file.

ALSO READ CF Moto MT 450 Adventure Motorcycle Launched in Nepal

CSS: CSS file styles the project giving it a clean and attractive look. The div changes its background colour every time the button is clicked.

JS: JS gives logic in generating random colours with HEX and RGB codes.

Conclusion

By following these steps you can create a random colour generator using HTML, CSS and Javascript. This project will help you enhance your skills in web development.

Happy Learning!