diff --git a/src/components/ProfileName.js b/src/components/ProfileName.js
index 5158e2c..12f6d3c 100644
--- a/src/components/ProfileName.js
+++ b/src/components/ProfileName.js
@@ -11,7 +11,7 @@ import firebase from "../firebase";
 import ElapsedTime from "./ElapsedTime";
 import User from "./User";
 import { UserContext } from "../context";
-import { generateName } from "../util";
+import { generateColor, generateName } from "../util";
 
 const useStyles = makeStyles((theme) => ({
   vertIcon: {
@@ -45,6 +45,11 @@ function ProfileName({ userId }) {
     handleClose();
   };
 
+  const handleColor = () => {
+    firebase.database().ref(`users/${userId}/color`).set(generateColor());
+    handleClose();
+  };
+
   const handleBan = (minutes) => {
     const endTime = Date.now() + minutes * 60000;
     firebase.database().ref(`users/${userId}/banned`).set(endTime);
@@ -88,6 +93,7 @@ function ProfileName({ userId }) {
                 onClose={handleClose}
               >
                 <MenuItem onClick={handleResetName}>Reset username</MenuItem>
+                <MenuItem onClick={handleColor}>Reset color</MenuItem>
                 {player.banned && Date.now() < player.banned ? (
                   <MenuItem onClick={() => handleUnban()}>Unban</MenuItem>
                 ) : (