diff --git a/index.php b/index.php
index 7fad8f0..1b42aa2 100644
--- a/index.php
+++ b/index.php
@@ -53,10 +53,12 @@
     </head>
     <body class="font-open-sans antialiased">
         <div id="app" class="flex flex-col items-center justify-center w-full min-h-screen">
-            <div class="w-1/2">
+            <div class="w-3/5">
                 <h1 class="text-center text-2xl font-bold">Batch Color Converter</h1>
 
-                <button type="button" class="w-full py-4 uppercase font-bold text-white bg-pink-600 rounded my-8" v-on:click="batchConvert()">Convert</button>
+                <p class="mt-6">Click a particular cell in the table with HSL, RGB, or hex to copy that value.</p>
+
+                <button type="button" class="block w-full py-4 uppercase font-bold text-white bg-pink-600 rounded mt-6 mb-8" v-on:click="batchConvert()">Convert</button>
 
                 <div class="flex flex-row mb-8">
                     <div class="flex w-1/3 mr-4">
@@ -78,9 +80,9 @@
                                     <td v-show="!color.error">
                                         <div class="block mx-2 my-4" style="height: 25px;" :style="{ background: color.hex }"></div>
                                     </td>
-                                    <td v-show="!color.error" class="text-center px-2 py-4">{{ color.hex }}</td>
-                                    <td v-show="!color.error" class="text-center px-2 py-4">{{ color.rgb }}</td>
-                                    <td v-show="!color.error" class="text-center px-2 py-4">{{ color.hsl }}</td>
+                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hex)">{{ color.hex }}</div></td>
+                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.rgb)">{{ color.rgb }}</div></td>
+                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hsl)">{{ color.hsl }}</div></td>
                                 </tr>
                             </tbody>
                         </table>
diff --git a/js/app.js b/js/app.js
index 8f92059..7ab3e44 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,3 +1,5 @@
+const clipboard = navigator.clipboard;
+
 let app = new Vue({
   el: '#app',
 
@@ -10,6 +12,8 @@ let app = new Vue({
     ],
     inputBox: "ccc\n#4f46e5\n#db2777aa\n",
 
+    copyInput: "",
+
     hexRegex: /^\#?[a-f0-9]{3,9}/i,
     rgbRegex: /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)/i,
     rgbaRegex: /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(0(\.[0-9])?|1(\.0)?)\s*\)/i,
@@ -108,6 +112,7 @@ let app = new Vue({
           blue = Number.parseInt(blue);
 
           converted.hex = "#" + this.rgbaToHexa(red, green, blue, alpha);
+
           converted.rgb = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
 
           let hsl = this.rgbToHsl(red, green, blue);
@@ -367,6 +372,12 @@ console.error('hexa to HSLa not implemented yet');
       }
 
       return alpha.toFixed(1);
-    }
+    },
+
+    updateClipboard: function (text) {
+      clipboard.writeText(text).then(() => {
+        console.log('text copied!');
+      });
+    },
   },
 });
