diff --git a/web/modals/threads/color-selector-button.react.js b/web/modals/threads/color-selector-button.react.js
--- a/web/modals/threads/color-selector-button.react.js
+++ b/web/modals/threads/color-selector-button.react.js
@@ -13,7 +13,7 @@
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
   const { color, currentThreadColor, onColorSelection } = props;
 
-  const active = color === currentThreadColor;
+  const active = color.toLowerCase() === currentThreadColor.toLowerCase();
   const containerClassName = classNames(css.container, {
     [css.active]: active,
   });
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -41,7 +41,7 @@
 import { useSelector } from '../../redux/redux-utils';
 import Input from '../input.react';
 import Modal from '../modal.react';
-import ColorPicker from './color-picker.react';
+import ColorSelector from './color-selector.react';
 import css from './thread-settings-modal.css';
 
 const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
@@ -218,14 +218,10 @@
           </div>
           <div className={css.edit_thread_color_container}>
             <div className={`${css.form_title} ${css.color_title}`}>Color</div>
-            <div className={css.form_content}>
-              <ColorPicker
-                id="edit-thread-color"
-                value={this.possiblyChangedValue('color')}
-                disabled={inputDisabled}
-                onChange={this.onChangeColor}
-              />
-            </div>
+            <ColorSelector
+              currentThreadColor={this.possiblyChangedValue('color')}
+              onColorSelection={this.onChangeColor}
+            />
           </div>
         </div>
       );