diff --git a/web/modals/threads/color-selector-button.react.js b/web/modals/threads/color-selector-button.react.js
index 0dc836211..62bd2ed57 100644
--- a/web/modals/threads/color-selector-button.react.js
+++ b/web/modals/threads/color-selector-button.react.js
@@ -1,33 +1,41 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
+import { type SetState } from 'lib/types/hook-types.js';
+
 import css from './color-selector-button.css';
 
 type ColorSelectorButtonProps = {
   +color: string,
-  +active: boolean,
+  +pendingColorSelection: string,
+  +setPendingColorSelection: SetState<string>,
 };
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color, active } = props;
+  const { color, pendingColorSelection, setPendingColorSelection } = props;
 
+  const active = color === pendingColorSelection;
   const containerClassName = classNames(css.container, {
     [css.active]: active,
   });
 
   const colorSplotchStyle = React.useMemo(
     () => ({
       backgroundColor: color,
     }),
     [color],
   );
 
+  const onColorSplotchClicked = React.useCallback(() => {
+    setPendingColorSelection(color);
+  }, [setPendingColorSelection, color]);
+
   return (
-    <div className={containerClassName}>
+    <div onClick={onColorSplotchClicked} className={containerClassName}>
       <div className={css.colorSplotch} style={colorSplotchStyle} />
     </div>
   );
 }
 
 export default ColorSelectorButton;
diff --git a/web/modals/threads/color-selector.react.js b/web/modals/threads/color-selector.react.js
index 08f42b0d4..28a7cfebc 100644
--- a/web/modals/threads/color-selector.react.js
+++ b/web/modals/threads/color-selector.react.js
@@ -1,29 +1,77 @@
 // @flow
 
 import * as React from 'react';
 
 import ColorSelectorButton from './color-selector-button.react';
 import css from './color-selector.css';
 
-function ColorSelector(): React.Node {
+type ColorSelectorProps = {
+  +currentThreadColor: string,
+};
+function ColorSelector(props: ColorSelectorProps): React.Node {
+  const { currentThreadColor } = props;
+  const [pendingColorSelection, setPendingColorSelection] = React.useState(
+    currentThreadColor,
+  );
+
   return (
     <div className={css.container}>
       <div className={css.row}>
-        <ColorSelectorButton color="#4B87AA" active={true} />
-        <ColorSelectorButton color="#5C9F5F" active={false} />
-        <ColorSelectorButton color="#B8753D" active={false} />
-        <ColorSelectorButton color="#AA4B4B" active={false} />
-        <ColorSelectorButton color="#6D49AB" active={false} />
+        <ColorSelectorButton
+          color="#4B87AA"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
+        <ColorSelectorButton
+          color="#5C9F5F"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
+        <ColorSelectorButton
+          color="#B8753D"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
+        <ColorSelectorButton
+          color="#AA4B4B"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
+        <ColorSelectorButton
+          color="#6D49AB"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
       </div>
       <div className={css.row}>
-        <ColorSelectorButton color="#C85000" active={false} />
-        <ColorSelectorButton color="#008F83" active={false} />
-        <ColorSelectorButton color="#648CAA" active={false} />
-        <ColorSelectorButton color="#57697F" active={false} />
-        <ColorSelectorButton color="#575757" active={false} />
+        <ColorSelectorButton
+          color="#C85000"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
+        <ColorSelectorButton
+          color="#008F83"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
+        <ColorSelectorButton
+          color="#648CAA"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
+        <ColorSelectorButton
+          color="#57697F"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
+        <ColorSelectorButton
+          color="#575757"
+          pendingColorSelection={pendingColorSelection}
+          setPendingColorSelection={setPendingColorSelection}
+        />
       </div>
     </div>
   );
 }
 
 export default ColorSelector;