diff --git a/frontend/index.html b/frontend/index.html
index 4d57f01..46e7405 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -32,11 +32,9 @@
         
         <label for="join-session-colour">Colour:</label>
         <input
-          type="text"
+          type="color"
           id="join-session-colour"
-          placeholder="7ed0ff"
-          value="7ed0ff"
-          pattern="[a-fA-F\d]{6}"
+          value="#7ed0ff"
           required
         />
 
diff --git a/frontend/lib/join-session.mjs b/frontend/lib/join-session.mjs
index 338878f..3fb9041 100644
--- a/frontend/lib/join-session.mjs
+++ b/frontend/lib/join-session.mjs
@@ -79,6 +79,6 @@ export const setupJoinSessionForm = () => {
 
     saveNickname(nickname);
     saveColour(colour);
-    joinSession(nickname.value, sessionId.value, colour.value);
+    joinSession(nickname.value, sessionId.value, colour.value.replace(/^#/, ""));
   });
 };