Free Coding Ebook 👉 Get Now
Create Color Guessing Game Using JavaScript
Welcome to Code With Random blog. In this blog, We learn how we create Color Guessing Game Using HTML, CSS, and JavaScript.
You have to predict the colors that will emerge from the combination of primary colors in this game of color prediction. This game seeks to increase a person’s ability to predict colors by randomly generating a color each time and piques their curiosity about the potential color that could result from a random combination of primary colors.
ADVERTISEMENT
I hope you enjoy our blog so let’s start with a basic HTML structure for Color Guessing Game.
50+ HTML, CSS & JavaScript Projects With Source Code
Code by | Brandon |
Project Download | Link Available Below |
Language used | HTML, CSS and JavaScript |
External link / Dependencies | No |
Responsive | No |
In this blog post, we will discuss Color Guessing Game With JavaScript with complete source code for you so that you can just copy and paste it into your own project. Happy exploring and learning !!
HTML Code For Color Guessing Game
<h1>The RGB Color Guessing Game <br> <span id="colorDisplay">RGB</span> </h1> <div id="stripe"> <button id="reset">New Colors</button> <span id="message"></span> <button id="easyButton">Easy</button> <button id="hardButton"class="selected">Hard</button> </div> <div id="container"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div>
The RGB Color Guessing Game will be the heading, which will be made using the <h1> tag. The break will be added using the <br> tag, and the color display will be added using the span tag.
Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript
The button for choosing between the easy and hard choice will now be created using the button tag, and the square for our color-guessing game will be created using a variety of divs with the class square created using the div tag with id “container” tag.
There is all the HTML code for the Color Guessing Game. Now, you can see output without CSS, then we write css & javascript for the Color Guessing Game.
output
CSS Code For Color Guessing Game
body { background-color: #232323; margin: 0; font-family: "Montserrat", "Avenir"; } .square { width: 30%; background: purple; padding-bottom: 30%; float: left; margin: 1.66%; border-radius: 15%; transition: background 0.6s; -webkit-transition: background 0.6s; -moz-transition: background 0.6s; } #container { margin: 20px auto; max-width: 600px; } h1 { text-align: center; line-height: 1.1; font-weight: normal; color: white; background: steelblue; margin: 0; text-transform: uppercase; padding-top: 20px; padding-bottom: 20px; } #colorDisplay { font-size: 200%; } #stripe { background: white; height: 30px; text-align: center; color: black; } .selected { color: white; background: steelblue; } button { border: none; background: none; text-transform: uppercase; height: 100%; font-weight: 700; color: steelblue; letter-spacing: 1px; font-size: inherit; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; outline: none; } #message { display: inline-block; width: 20%; } button:hover { color: white; background: steelblue; }
ADVERTISEMENT
Step1:We will first set the background to “black” using the body element selector, and we will set the margin to “30 px” using the margin property. We will also change the font family to “Montserrat” using the font-family property.
ADVERTISEMENT
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
ADVERTISEMENT
body { background-color: #232323; margin: 0; font-family: "Montserrat", "Avenir"; }
Step2:Now, using the class selector property (.square), we will set the breadth to 30%, the background color property to “purple” to set the background color of our square tiles, and the padding bottom property to 30% to set the bottom padding. The border radius will now be adjusted to 15% using the border radius property.
ADVERTISEMENT
.square { width: 30%; background: purple; padding-bottom: 30%; float: left; margin: 1.66%; border-radius: 15%; transition: background 0.6s; -webkit-transition: background 0.6s; -moz-transition: background 0.6s; }
Step3:Using the #Id number, the container will now be chosen. Following that, the maximum width property will be used to set the maximum width to 600 px, and the border property will be set to 20 px auto.
ADVERTISEMENT
Responsive Login Page in HTML with CSS Code
Now using the h1 tag selector, using the text-align property, we will set the text alignment as “center”; using the line height property, we will set the line height as “1.1”; using the color property, we will set the font color as “White”; and using the background color property, we will set the background as “Steel Blue”. The styling will also be applied to the buttons and other game components.
#container { margin: 20px auto; max-width: 600px; } h1 { text-align: center; line-height: 1.1; font-weight: normal; color: white; background: steelblue; margin: 0; text-transform: uppercase; padding-top: 20px; padding-bottom: 20px; } #colorDisplay { font-size: 200%; } #stripe { background: white; height: 30px; text-align: center; color: black; } .selected { color: white; background: steelblue; } button { border: none; background: none; text-transform: uppercase; height: 100%; font-weight: 700; color: steelblue; letter-spacing: 1px; font-size: inherit; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; outline: none; } #message { display: inline-block; width: 20%; } button:hover { color: white; background: steelblue; }
CSS Output:
Javascript Code For Color Guessing Game
var numSquares = 6; var colors = generateRandomColors(numSquares); var squares = document.querySelectorAll(".square"); var pickedColor = randomColorG(); var colorDisplay = document.querySelector("#colorDisplay"); var messageDisplay = document.querySelector("#message"); var h1 = document.querySelector("h1"); var resetButton = document.querySelector("#reset"); var easyBtn = document.querySelector("#easyButton"); var hardBtn = document.querySelector("#hardButton"); easyBtn.addEventListener("click", function(){ //highlight button to show selected hardBtn.classList.remove("selected"); easyBtn.classList.add("selected"); //set number of squares to 3 numSquares = 3; //change colors to 3 colors = generateRandomColors(numSquares); //reset winning color pickedColor = randomColorG(); //change display to show new picked color colorDisplay.textContent = pickedColor; //loop through 3 squares and reset colors while displaying none for squares without new reset colors for(var i = 0; i < squares.length; i++){ if(colors[i]){ squares[i].style.background = colors[i]; } else { squares[i].style.display = "none"; } } }); hardBtn.addEventListener("click", function(){ easyBtn.classList.remove("selected"); hardBtn.classList.add("selected"); numSquares = 6; colors = generateRandomColors(numSquares); pickedColor = randomColorG(); colorDisplay.textContent = pickedColor; for(var i = 0; i < squares.length; i++){ squares[i].style.backgroundColor = colors[i]; squares[i].style.display = "block"; } }); resetButton.addEventListener("click", function(){ //generate all new colors colors = generateRandomColors(numSquares); //pick a new random color from array pickedColor = randomColorG(); //change colorDisplay to match picked color colorDisplay.textContent = pickedColor; resetButton.textContent = "New Colors"; messageDisplay.textContent = ""; //change colors of squares for(var i = 0; i < squares.length; i++){ squares[i].style.backgroundColor = colors[i]; } //set winning color highlight back to default h1.style.background = "steelblue"; }) colorDisplay.textContent = pickedColor; for(var i = 0; i < squares.length; i++) { //add initial colors to squares squares[i].style.backgroundColor = colors[i]; //add click listeners to squares squares[i].addEventListener("click", function(){ //grab color of clicked square var clickedColor = this.style.backgroundColor; //compare color to pickedColor console.log(clickedColor, pickedColor); if(clickedColor === pickedColor){ messageDisplay.textContent = "Correct!"; resetButton.textContent = "Play Again?"; changeColors(clickedColor); h1.style.background = clickedColor; } else { this.style.backgroundColor = "#232323"; messageDisplay.textContent = "Try Again"; } }); } function changeColors(colorz){ //loop through all squares for(var i = 0; i < squares.length; i++){ //change each color to match given color squares[i].style.background = colorz; } } function randomColorG(){ //pick a random number var random = Math.floor(Math.random() * colors.length) return colors[random]; } function generateRandomColors(genColor){ //make an array var arr = [] //repeat num times for(var i = 0; i < genColor; i++){ // get random color and push into array arr.push(randomColor()) } //return that array return arr; } function randomColor(){ //pick a "red" from 0 - 255 var r = Math.floor(Math.random() * 256); //pick a "green" from 0 - 255 var g = Math.floor(Math.random() * 256); // pick a "blue" from 0 - 255 var b = Math.floor(Math.random() * 256); return "rgb(" + r +", " + g +", " + b +")"; }
We will first use the document to pick all of the HTML elements inside of our javascript. technique of queryselector We will use the id to select the html elements, and then we will make some variables using the var keyword. Finally, we will add a click event to our guessing game using the easyBtn.addEventlistener, and we will use the click event to add and remove the classlist. The user will then point to each as they correctly predict the answer after we first create the random color using the math.random function using the colordisplay property.
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
Final output Of Color Guessing Game Using JavaScript

Video Output Of Color Guessing Game:
Now we have completed our javascript section, Here is our updated output with javascript. Hope you like the Color Guessing Game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Codepen Preview Of Color Guessing Game:
Google Homepage Clone HTML and CSS Code
In this post, we learn how to create a Color Guessing Game With JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Thank You And Keep Learning!!!
Written by – Code With Random/Anki
Codepen by – Brandon
Which code editor do you use for Color Guessing Game coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
What is a Color guessing Game?
A Player must guess the colors that will be produced when two primary colors are combined in this game of color prediction.The user according the color code of RBG have to guess which color is generated
What is the condition for color guessing game?
Six square boxes must be chosen, and the user must choose one. If the chosen box is incorrect, the user must again choose a color box until the correct box is found.