diff --git a/ColorMatch/index.html b/ColorMatch/index.html
new file mode 100644
index 0000000..255c064
--- /dev/null
+++ b/ColorMatch/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Color Matching Game</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div class="game-container">
+ <h1>Color Matching Game</h1>
+ <div class="color-box" id="colorBox"></div>
+ <div class="options">
+ <button class="option-btn" onclick="checkAnswer(0)" id="option0"></button>
+ <button class="option-btn" onclick="checkAnswer(1)" id="option1"></button>
+ <button class="option-btn" onclick="checkAnswer(2)" id="option2"></button>
+ </div>
+ <div id="result"></div>
+ <button onclick="startGame()">New Game</button>
+ </div>
+
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/ColorMatch/script.js b/ColorMatch/script.js
new file mode 100644
index 0000000..eff3a70
--- /dev/null
+++ b/ColorMatch/script.js
@@ -0,0 +1,43 @@
+const colors = ['Red', 'Green', 'Blue', 'Yellow', 'Orange', 'Purple', 'Pink'];
+let correctAnswer;
+
+function startGame() {
+ const randomColorIndex = Math.floor(Math.random() * colors.length);
+ const correctColor = colors[randomColorIndex];
+
+ document.getElementById('colorBox').style.backgroundColor = correctColor.toLowerCase();
+
+ // Shuffle options and place one correct answer randomly
+ let options = shuffleArray([correctColor, getRandomColor(), getRandomColor()]);
+
+ for (let i = 0; i < 3; i++) {
+ document.getElementById(`option${i}`).textContent = options[i];
+ }
+
+ correctAnswer = options.indexOf(correctColor);
+ document.getElementById('result').textContent = "";
+}
+
+function checkAnswer(selectedOption) {
+ if (selectedOption === correctAnswer) {
+ document.getElementById('result').textContent = "Correct!";
+ document.getElementById('result').style.color = "green";
+ } else {
+ document.getElementById('result').textContent = "Wrong! Try again.";
+ document.getElementById('result').style.color = "red";
+ }
+}
+
+function getRandomColor() {
+ return colors[Math.floor(Math.random() * colors.length)];
+}
+
+function shuffleArray(array) {
+ for (let i = array.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [array[i], array[j]] = [array[j], array[i]];
+ }
+ return array;
+}
+
+startGame();
diff --git a/ColorMatch/styles.css b/ColorMatch/styles.css
new file mode 100644
index 0000000..85482e7
--- /dev/null
+++ b/ColorMatch/styles.css
@@ -0,0 +1,71 @@
+body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #f7f7f7;
+}
+
+.game-container {
+ text-align: center;
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+ font-size: 2rem;
+ margin-bottom: 20px;
+}
+
+.color-box {
+ width: 150px;
+ height: 150px;
+ margin: 20px auto;
+ background-color: #333;
+ border-radius: 10px;
+}
+
+.options {
+ display: flex;
+ justify-content: center;
+ gap: 15px;
+ margin: 20px 0;
+}
+
+.option-btn {
+ padding: 10px 20px;
+ border: none;
+ background-color: #007bff;
+ color: white;
+ font-size: 1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.option-btn:hover {
+ background-color: #0056b3;
+}
+
+#result {
+ margin-top: 20px;
+ font-size: 1.2rem;
+}
+
+button {
+ padding: 10px 20px;
+ background-color: #28a745;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ font-size: 1rem;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #218838;
+}