diff --git a/web/modals/threads/color-selector-button.css b/web/modals/threads/color-selector-button.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/color-selector-button.css
@@ -0,0 +1,23 @@
+div.container {
+  height: 48px;
+  width: 48px;
+  border-radius: 48px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  transition: 150ms;
+}
+
+div.active,
+div.container:hover {
+  background-color: var(--shades-black-80);
+  transition: 150ms;
+}
+
+div.colorSplotch {
+  height: 32px;
+  width: 32px;
+  border-radius: 32px;
+  cursor: pointer;
+}
diff --git a/web/modals/threads/color-selector-button.react.js b/web/modals/threads/color-selector-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/color-selector-button.react.js
@@ -0,0 +1,34 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import css from './color-selector-button.css';
+
+type ColorSelectorButtonProps = {
+  +color: string,
+  +active: boolean,
+};
+function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
+  const { color, active } = props;
+
+  const containerClassName = classNames({
+    [css.container]: true,
+    [css.active]: active,
+  });
+
+  const colorSplotchStyle = React.useMemo(
+    () => ({
+      backgroundColor: color,
+    }),
+    [color],
+  );
+
+  return (
+    <div className={containerClassName}>
+      <div className={css.colorSplotch} style={colorSplotchStyle} />
+    </div>
+  );
+}
+
+export default ColorSelectorButton;