diff --git a/RandomColorGenerator/Vasunayak262/README.md b/RandomColorGenerator/Vasunayak262/README.md
new file mode 100644
index 000000000..06f09a672
--- /dev/null
+++ b/RandomColorGenerator/Vasunayak262/README.md
@@ -0,0 +1,12 @@
+# Color Generator App
+
+A simple web application that generates random colors and provides their HEX, RGB, and HSL values.
+
+
+
+
+## Features
+
+- Generates random colors with HEX, RGB, and HSL values.
+- Allows copying color values to the clipboard.
+- Displays a history of generated colors.
\ No newline at end of file
diff --git a/RandomColorGenerator/Vasunayak262/images/Screenshot1.png b/RandomColorGenerator/Vasunayak262/images/Screenshot1.png
new file mode 100644
index 000000000..16d70605e
Binary files /dev/null and b/RandomColorGenerator/Vasunayak262/images/Screenshot1.png differ
diff --git a/RandomColorGenerator/Vasunayak262/index.html b/RandomColorGenerator/Vasunayak262/index.html
new file mode 100644
index 000000000..bf0dc42ab
--- /dev/null
+++ b/RandomColorGenerator/Vasunayak262/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Random Color Generator
+
+
+
+
+
+
+
Color Picker
+
+
+
#FFFFFF
+
rgb(255, 255, 255)
+
hsl(0%, 0%, 100%)
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/RandomColorGenerator/Vasunayak262/script.js b/RandomColorGenerator/Vasunayak262/script.js
new file mode 100644
index 000000000..0b6112484
--- /dev/null
+++ b/RandomColorGenerator/Vasunayak262/script.js
@@ -0,0 +1,89 @@
+const generateColorButton = document.getElementById("generate-color");
+const hexValue = document.getElementById("hex-value");
+const rgbValue = document.getElementById("rgb-value");
+const hslValue = document.getElementById("hsl-value");
+const copyButton = document.getElementById("copy-button");
+const colorBox = document.querySelector(".color-box");
+const colorHistory = document.querySelector(".color-history");
+
+generateColorButton.addEventListener("click", generateRandomColor);
+copyButton.addEventListener("click", copyToClipboard);
+
+function generateRandomColor() {
+ // Generate a random color
+ const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
+
+ // Update color values
+ hexValue.textContent = randomColor;
+ const rgbColor = hexToRgb(randomColor);
+ rgbValue.textContent = `rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b})`;
+ const hslColor = rgbToHsl(rgbColor.r, rgbColor.g, rgbColor.b);
+ hslValue.textContent = `hsl(${hslColor.h}, ${hslColor.s}%, ${hslColor.l}%)`;
+
+ // Update color preview
+ colorBox.style.backgroundColor = randomColor;
+
+ // Add the generated color to the history panel
+ const colorHistoryItem = document.createElement("div");
+ colorHistoryItem.classList.add("color-history-item");
+ colorHistoryItem.style.backgroundColor = randomColor;
+ colorHistory.appendChild(colorHistoryItem);
+}
+
+function copyToClipboard() {
+ const textToCopy = hexValue.textContent;
+
+ // Create a text area element, set its value, and select it for copying
+ const textArea = document.createElement("textarea");
+ textArea.value = textToCopy;
+ document.body.appendChild(textArea);
+ textArea.select();
+ document.execCommand("copy");
+ document.body.removeChild(textArea);
+
+ // Provide user feedback (e.g., change the button text temporarily)
+ copyButton.textContent = "Copied!";
+ setTimeout(() => {
+ copyButton.textContent = "Copy to Clipboard";
+ }, 2000);
+}
+
+// Helper functions for color conversion
+function hexToRgb(hex) {
+ const bigint = parseInt(hex.slice(1), 16);
+ const r = (bigint >> 16) & 255;
+ const g = (bigint >> 8) & 255;
+ const b = bigint & 255;
+ return { r, g, b };
+}
+
+function rgbToHsl(r, g, b) {
+ r /= 255;
+ g /= 255;
+ b /= 255;
+
+ const max = Math.max(r, g, b);
+ const min = Math.min(r, g, b);
+ let h, s, l = (max + min) / 2;
+
+ if (max === min) {
+ h = s = 0; // grayscale
+ } else {
+ const d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ switch (max) {
+ case r:
+ h = (g - b) / d + (g < b ? 6 : 0);
+ break;
+ case g:
+ h = (b - r) / d + 2;
+ break;
+ case b:
+ h = (r - g) / d + 4;
+ break;
+ }
+ h /= 6;
+ }
+
+ return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
diff --git a/RandomColorGenerator/Vasunayak262/style.css b/RandomColorGenerator/Vasunayak262/style.css
new file mode 100644
index 000000000..fc85d0f23
--- /dev/null
+++ b/RandomColorGenerator/Vasunayak262/style.css
@@ -0,0 +1,61 @@
+body {
+ font-family: Arial, sans-serif;
+ background-image: url('https://e0.pxfuel.com/wallpapers/20/892/desktop-wallpaper-firewatch-green-forest-mountains-minimal.jpg');
+ display: flex;
+ background-size: cover;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+}
+.container {
+ text-align: center;
+}
+
+
+.color-box {
+ background-color: #FFFFFF;
+ width: 300px;
+ height: 300px;
+ border-radius: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+ position: relative; /* Add this for animation */
+ overflow: hidden; /* Add this for animation */
+ transition: transform 0.3s ease-in-out; /* Add this for animation */
+}
+
+.color-box:hover {
+ transform: scale(1.05); /* Add this for a smooth hover effect */
+}
+
+.color-heading {
+ font-size: 24px;
+ font-weight: bold;
+ margin: 0 0 20px;
+}
+
+#generate-color {
+ background-color: #3498db;
+ color: #fff;
+ border: none;
+ padding: 10px 20px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ border-radius: 5px;
+ font-weight: bold;
+}
+
+#color-value {
+ font-size: 20px;
+ margin: 0;
+}
+
+.color-box h1 {
+ font-size: 24px;
+ font-weight: bold;
+ margin: 0 0 20px;
+}
\ No newline at end of file