Free Coding Ebook 👉 Get Now
How to Create Color Flipper Using JavaScript (Source Code)
Welcome to the Codewithrandom blog. In this blog, We learn how we create a Color Flipper Using HTML, CSS, and JavaScript. We have simple color and hex color codes in this Color Flipper Project.
.png)
A colour flipper is a beginner’s project in which the background of our project changes as the user presses the button, and we have a wide range of background colours to change. Every time a user clicks the button, the project’s background changes.
I hope you enjoy our blog so let’s start with a basic HTML structure for the Color Flipper.
ADVERTISEMENT
Code by | N/A |
Project Download | Link Available Below |
Language used | HTML , CSS and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
HTML Code for Main File (Index.Html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Color Flipper || Simple</title> <!-- styles --> <link rel="stylesheet" href="styles.css" /> </head> <body> <nav> <div class="nav-center"> <h4>color flipper</h4> <ul class="nav-links"> <li><a href="index.html">simple</a></li> <li><a href="hex.html">hex</a></li> </ul> </div> </nav> <main> <div class="container"> <h2>background color : <span class="color">#f1f5f8</span></h2> <button class="btn btn-hero" id="btn">click me</button> </div> </main> <!-- javascript --> <script src="app.js"></script> </body> </html>
Using the nav tag we will create the
There is all the HTML Code for the Index.html. Now, we make Hex.html File For Another Page.
Responsive Gym Website Using HTML ,CSS & JavaScript
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Color Flipper || Hex</title> <!-- styles --> <link rel="stylesheet" href="styles.css" /> </head> <body> <nav> <div class="nav-center"> <h4>color flipper</h4> <ul class="nav-links"> <li><a href="index.html">simple</a></li> <li><a href="hex.html">hex</a></li> </ul> </div> </nav> <main> <div class="container"> <h2>background color : <span class="color">#f1f5f8</span></h2> <button class="btn btn-hero" id="btn">click me</button> </div> </main> <!-- javascript --> <script src="hex.js"></script> </body> </html>
Output

Css Code For Color Flipper
/* =============== Fonts =============== */ @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); /* =============== Variables =============== */ :root { /* dark shades of primary color*/ --clr-primary-1: hsl(205, 86%, 17%); --clr-primary-2: hsl(205, 77%, 27%); --clr-primary-3: hsl(205, 72%, 37%); --clr-primary-4: hsl(205, 63%, 48%); /* primary/main color */ --clr-primary-5: hsl(205, 78%, 60%); /* lighter shades of primary color */ --clr-primary-6: hsl(205, 89%, 70%); --clr-primary-7: hsl(205, 90%, 76%); --clr-primary-8: hsl(205, 86%, 81%); --clr-primary-9: hsl(205, 90%, 88%); --clr-primary-10: hsl( 205, 100%, 96% ); /* darkest grey - used for headings */ --clr-grey-1: hsl(209, 61%, 16%); --clr-grey-2: hsl(211, 39%, 23%); --clr-grey-3: hsl(209, 34%, 30%); --clr-grey-4: hsl(209, 28%, 39%); /* grey used for paragraphs */ --clr-grey-5: hsl(210, 22%, 49%); --clr-grey-6: hsl(209, 23%, 60%); --clr-grey-7: hsl(211, 27%, 70%); --clr-grey-8: hsl(210, 31%, 80%); --clr-grey-9: hsl(212, 33%, 89%); --clr-grey-10: hsl(210, 36%, 96%); --clr-white: #fff; --clr-red-dark: hsl(360, 67%, 44%); --clr-red-light: hsl(360, 71%, 66%); --clr-green-dark: hsl(125, 67%, 44%); --clr-green-light: hsl(125, 71%, 66%); --clr-black: #222; --ff-primary: "Roboto", sans-serif; --ff-secondary: "Open Sans", sans-serif; --transition: all 0.3s linear; --spacing: 0.1rem; --radius: 0.25rem; --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); --max-width: 1170px; --fixed-width: 620px; } /* =============== Global Styles =============== */ *, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--ff-secondary); background: var(--clr-grey-10); color: var(--clr-grey-1); line-height: 1.5; font-size: 0.875rem; } ul { list-style-type: none; } a { text-decoration: none; } h1, h2, h3, h4 { letter-spacing: var(--spacing); text-transform: capitalize; line-height: 1.25; margin-bottom: 0.75rem; font-family: var(--ff-primary); } h1 { font-size: 3rem; } h2 { font-size: 2rem; } h3 { font-size: 1.25rem; } h4 { font-size: 0.875rem; } p { margin-bottom: 1.25rem; color: var(--clr-grey-5); } @media screen and (min-width: 800px) { h1 { font-size: 4rem; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1rem; } body { font-size: 1rem; } h1, h2, h3, h4 { line-height: 1; } } /* global classes */ /* section */ .section { padding: 5rem 0; } .section-center { width: 90vw; margin: 0 auto; max-width: 1170px; } @media screen and (min-width: 992px) { .section-center { width: 95vw; } } main { min-height: 100vh; display: grid; place-items: center; } /* =============== Nav =============== */ nav { background: var(--clr-white); height: 3rem; display: grid; align-items: center; box-shadow: var(--dark-shadow); } .nav-center { width: 90vw; max-width: var(--fixed-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .nav-center h4 { margin-bottom: 0; color: var(--clr-primary-5); } .nav-links { display: flex; } nav a { text-transform: capitalize; font-weight: 700; font-size: 1rem; color: var(--clr-primary-1); letter-spacing: var(--spacing); margin-right: 1rem; } nav a:hover { color: var(--clr-primary-5); } /* =============== Container =============== */ main { min-height: calc(100vh - 3rem); display: grid; place-items: center; } .container { text-align: center; } .container h2 { background: var(--clr-black); color: var(--clr-white); padding: 1rem; border-radius: var(--radius); margin-bottom: 2.5rem; } .color { color: var(--clr-primary-5); } .btn-hero { font-family: var(--ff-primary); text-transform: uppercase; background: transparent; color: var(--clr-black); letter-spacing: var(--spacing); display: inline-block; font-weight: 700; transition: var(--transition); border: 2px solid var(--clr-black); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border-radius: var(--radius); font-size: 1rem; padding: 0.75rem 1.25rem; } .btn-hero:hover { color: var(--clr-white); background: var(--clr-black); }
Html + Css Update Output
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
JavaScript Code for Color Flipper (app.js)
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); btn.addEventListener("click", function () { const randomNumber = getRandomNumber(); // console.log(randomNumber); document.body.style.backgroundColor = colors[randomNumber]; color.textContent = colors[randomNumber]; }); function getRandomNumber() { return Math.floor(Math.random() * colors.length); }
JavaScript Code for Color Flipper (Hex.js)
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); btn.addEventListener("click", function () { let hexColor = "#"; for (let i = 0; i < 6; i++) { hexColor += hex[getRandomNumber()]; } // console.log(hexColor); color.textContent = hexColor; document.body.style.backgroundColor = hexColor; }); function getRandomNumber() { return Math.floor(Math.random() * hex.length); }
Final Output Color Flipper Using JavaScript

Now that we have completed our javascript section. Hope you like the Color Flipper Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
Written by – Code With Random/Anki