diff --git a/CreateDB.sql b/CreateDB.sql
index 7934f31..b2896a0 100644
--- a/CreateDB.sql
+++ b/CreateDB.sql
@@ -9,7 +9,7 @@ CREATE TABLE `Room` (
     `whitelist` JSON,
     CHECK (JSON_VALID(`whitelist`)),
     `tv_url` VARCHAR(1024),
-    `carpet_color` VARCHAR(8),
+    `carpet_color` VARCHAR(9),
     `room_details` JSON,
     CHECK (JSON_VALID(`room_details`))
 );
@@ -25,7 +25,7 @@ CREATE TABLE `Headset` (
     `date_created` TIMESTAMP DEFAULT CURRENT_TIME,
     -- the last time this headset was actually seen
     `last_used` TIMESTAMP DEFAULT CURRENT_TIME,
-    `user_color` VARCHAR(8),
+    `user_color` VARCHAR(9),
     `user_name` VARCHAR(64),
     -- Stuff like player color, nickname, whiteboard state
     `user_details` JSON,
diff --git a/velconnect/templates/index.jinja b/velconnect/templates/index.jinja
index e7ea056..848d558 100644
--- a/velconnect/templates/index.jinja
+++ b/velconnect/templates/index.jinja
@@ -91,7 +91,7 @@
                     <div class="tile tile-centered">
                         <div class="tile-content">
                             <div class="tile-title text-bold">User Color</div>
-                            <input class="btn user_color" type="text" id="user_color" placeholder="----">
+                            <input class="btn user_color" type="color" id="user_color" placeholder="#ffffff">
                         </div>
                         <div class="tile-action">
                             <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_user_color"
@@ -102,7 +102,7 @@
                     <div class="tile tile-centered">
                         <div class="tile-content">
                             <div class="tile-title text-bold">Carpet Color</div>
-                            <input class="btn carpet_color" type="text" id="carpet_color" placeholder="----">
+                            <input class="btn carpet_color" type="color" id="carpet_color" placeholder="#ffffff">
                         </div>
                         <div class="tile-action">
                             <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_carpet_color"