How to make Color Flipper in JavaScript? [2022]

How to make Color Flipper
How to make Color Flipper

Color flipper is primarily used for honing js skills and just for fun. With a few simple steps, you can also make a color flipper.

Color flippers can be possibly created in another language, but in this case, we’re learning and using JavasScript to do it.

All programmers have their own methods of writing code, so don’t be confused, look at all of them and try to understand Code. Our goal is to learn javascript code and use HTML and CSS to create structures and designs.

What is a Color Flipper?

A Color Flipper is a fun mini-javascript project in which you design a simple button that, when clicked, executes a function that creates a random color and then sets the background/color of a pre-selected element to that random color.

For this project, we will change the background color of our body element using three distinct color codes: hex, RGB, and HSL. In Javascript, we will also utilize the Math. random() method in conjunction with the Math.floor() function to produce colors at random.

Constructing the Color Flipper

To begin, open our code editor and create three files named index.html, style.css, and script.js.


<!DOCTYPE html>
<html lang="en">

    <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">

    <div class="container">
        <div class="navbar">
            <h2> Color Flipper</h2>
        <div class="main">
            <h2> Background Color: <span class="color">#50A32C</span></h2>
            <button type="button" class="btn" onclick="btn()">Click Me</button>

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


This is HTML code, and here we connect CSS and javascript and create a button with id and classes with a simple interface.

You may also like:


    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    background-color: #50a3c2;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    transition: all 1000ms;
.navbar h2{
    text-align: center;
    background-color: #fff;
font-weight: bold;
box-shadow:  0 5px 15px rgba(0, 0, 0, 0.2);
    justify-content: center;
    text-align: center;
    align-items: center;
    justify-items: center;
    padding-top: 15rem;

.main h2{
    background-color: #1f1f1f;
    color: aliceblue;
    overflow: hidden;
    margin-left: 35%;
    margin-right: 35%;
    border-radius: 3px;
    padding: 4px;
    text-align: center;
    align-items: center;
    align-content: center;
.main button{
    padding: 5px 15px 5px 15px;
    justify-content: baseline;
    margin: 10px;
    background-color: transparent;
    border: solid #000 2px;
    border-radius: 8%;
    background-color: transparent;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    transition: 0.2s;
button:active {
    transform: translate(0, 0.5rem);
    box-shadow: 0 0.1rem rgba(255, 255, 255, 0.95);

.main button:hover{
    background-color: #fff;

You are free to make your design. It is unimportant that you reprint our design but make sure in id and classes are not different.


const hex =[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const color = document.querySelector(".color");

function btn(){
    let hexColor ="#";
    for(let i=0; i<6; i++){
        hexColor += hex[getRandomNumber()];
  color.textContent =hexColor;


function getRandomNumber(){
    return Math.floor(Math.random() * hex.length);

The most important part is javascript, and we’ll be using arrays and javascript math properties here.


I hope this article is going to help you with How to make Color Flipper in JavaScript? Read the full article and make a beautiful color flipper for free using javascript.

You can also share it with your friends to help them also to make this color flipper. If you have any queries then comment down below if I am able to help you I definitely help you.


Leave a Reply

Related Posts