diff --git a/client/src/reducers/colors.js b/client/src/reducers/colors.js
index 11fcf5ed..803fdf51 100644
--- a/client/src/reducers/colors.js
+++ b/client/src/reducers/colors.js
@@ -53,15 +53,19 @@ const ColorsReducer = (
     case "color by categorical metadata":
     case "color by continuous metadata": {
       const { world } = prevSharedState;
-      const { rgb, scale } = createColors(
-        world,
-        action.type,
-        action.colorAccessor
-      );
+
+      /* toggle between this mode and reset */
+      const colorMode = action.type !== state.colorMode ? action.type : null;
+      const colorAccessor =
+        action.colorAccessor !== state.colorAccessor
+          ? action.colorAccessor
+          : null;
+
+      const { rgb, scale } = createColors(world, colorMode, colorAccessor);
       return {
         ...state,
-        colorMode: action.type,
-        colorAccessor: action.colorAccessor,
+        colorMode,
+        colorAccessor,
         rgb,
         scale
       };
@@ -69,11 +73,17 @@ const ColorsReducer = (
 
     case "color by expression": {
       const { world } = prevSharedState;
-      const { rgb, scale } = createColors(world, action.type, action.gene);
+
+      /* toggle between this mode and reset */
+      const colorMode = action.type !== state.colorMode ? action.type : null;
+      const colorAccessor =
+        action.gene !== state.colorAccessor ? action.gene : null;
+
+      const { rgb, scale } = createColors(world, colorMode, colorAccessor);
       return {
         ...state,
-        colorMode: action.type,
-        colorAccessor: action.gene,
+        colorMode,
+        colorAccessor,
         rgb,
         scale
       };