Create a Colour Flipper using JavaScript

Last Updated : 28 Apr, 2025

Color flippers are an entertaining way to add a bit of life to a website or application. With the help of JavaScript, it is possible to create a color flipper that will change the background color of an element with a click of a button. In this article, we will guide you through the steps required to create a color flipper using JavaScript.

Step 1: HTML Markup
To create a color flipper, we first need an element to apply the color. In this example, we will use a div element with an id of colorFlipper. We will also create a button that will trigger the color flip. The HTML markup will look like this:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Color Flipper</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="colorFlipper">
        <button onclick="changeColor()">
              Flip Color
          </button>
    </div>

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

Step 2: CSS Styling: To style the div element, we need to add some CSS code. In this example, we will set the width and height of the div element to 100vw and give it a border of 1px solid black. We will also set the initial background color to white.

CSS

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

#colorFlipper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    background-color: white;
}

button {
    height: 50px;
    width: 200px;
    background-color: black;
    color: white;
    border-radius: 50px;
    outline: none;
    font-size: 20px;
    cursor: pointer;
}

Step 3: JavaScript Function
Now it's time to write the JavaScript code that will change the background color of the div element. We will define a function called changeColor() that will generate a random color and apply it to the div element. To generate a random color, we will use the Math.random() method to generate a number between 0 and 255 for each of the red, green, and blue color values. We will then concatenate these values into a string and apply it as the background color of the div element.

JavaScript

function changeColor() {
    let red = Math.floor(Math.random() * 256);
    let green = Math.floor(Math.random() * 256);
    let blue = Math.floor(Math.random() * 256);
    let color = "rgb(" + red + "," + green + "," + blue + ")";
    document.getElementById("colorFlipper").style.backgroundColor = color;
}

Step 4: Testing: Finally, we can test our color flipper by opening the HTML file in a web browser and clicking the "Flip Color" button. Each time the button is clicked, the background color of the div element will change to a random color.

Output:

Congratulations! You have successfully created a color flipper using JavaScript. You can customize the code by adding more elements and styling or adjusting the code to fit your specific needs.

Create a Colour Flipper using JavaScript

How to create RGB color generator using HTML CSS and JavaScript ?

nishth7hs8

Improve

Article Tags :

Create a Colour Flipper using JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?