diff --git a/CI-ColorWebs/Pages/Index.cshtml b/CI-ColorWebs/Pages/Index.cshtml
index 9176e8053303b2a585ebc015351ff2aa3322d4c7..8a4e9066d6a98a85dd4d18572cd1927667cdd27f 100644
--- a/CI-ColorWebs/Pages/Index.cshtml
+++ b/CI-ColorWebs/Pages/Index.cshtml
@@ -15,7 +15,21 @@
    
  }
 </style> 
-<script>src = 'site.js'</script>
+<script>
+src = 'site.js'
+function copyHex(celement) { 
+    let hexCopy = celement.innerText;
+    let input = document.createElement('input');
+    input.setAttribute('value', hexCopy);
+    document.body.appendChild(input);
+    input.select();
+
+    document.execCommand('copy');
+    document.body.removeChild(input);
+    alert('Copied: ' + celement.innerText);
+}
+</script>
+
 <div class="text-center">
     <div class = gifDiv>
         <h1 class="introHeader">Welcome to Color Palette Generator!</h1>
@@ -29,13 +43,13 @@
         <span id="palName" class = "paletteName"></span>
         <br>
         <br>
-        <button id="color"></button>
-        <button id="color2"></button>
-        <button id="color3"></button>
-        <button id="color4"></button>
-        <button id="color5"></button>
-        <button id="color6"></button>
-        <canvas width="700"></canvas>
+        <button id="color" onclick="copyHex(color)"></button>
+        <button id="color2" onclick="copyHex(color2)"></button>
+        <button id="color3" onclick="copyHex(color3)"></button>
+        <button id="color4" onclick="copyHex(color4)"></button>
+        <button id="color5" onclick="copyHex(color5)"></button>
+        <button id="color6" onclick="copyHex(color6)"></button>
+        <canvas width="700" ></canvas>
     </h2>
     <h3>
         <p>View your pallete visualized through AI art:</p>