diff --git a/projects/Random_Color_generator/css/styles.css b/projects/Random_Color_generator/css/styles.css
new file mode 100644
index 00000000..23cedef8
--- /dev/null
+++ b/projects/Random_Color_generator/css/styles.css
@@ -0,0 +1,43 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-size: 16px;
+}
+
+.mainDiv {
+ min-height: 100vh;
+ width: 100vw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: background-color 0.4s;
+}
+
+.randomBtn {
+ background-color: skyblue;
+ border: 0;
+ padding: 1rem 1.5rem 1rem 1.5rem;
+ font-size: 1.2rem;
+ border-radius: 1rem;
+ cursor: pointer;
+ transition: font-size 0.5s;
+}
+
+.randomBtn:hover {
+ font-size: 1.24rem;
+ background-color: rgb(137, 204, 231);
+}
+
+@media screen and (max-width: 380px) {
+ html {
+ font-size: 10px;
+ }
+
+ .randomBtn {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+}
diff --git a/projects/Random_Color_generator/index.html b/projects/Random_Color_generator/index.html
new file mode 100644
index 00000000..5a79b766
--- /dev/null
+++ b/projects/Random_Color_generator/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
diff --git a/projects/Random_Color_generator/index.js b/projects/Random_Color_generator/index.js
new file mode 100644
index 00000000..8f16d8aa
--- /dev/null
+++ b/projects/Random_Color_generator/index.js
@@ -0,0 +1,10 @@
+function generateColor() {
+ let x = Math.random() * 255;
+ let y = Math.random() * 255;
+ let z = Math.random() * 255;
+ let o = Math.random();
+
+ document.getElementsByClassName(
+ "mainDiv"
+ )[0].style.backgroundColor = `rgba(${x}, ${y}, ${z}, ${o})`;
+}