diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
--- a/web/avatars/emoji-avatar-selection-modal.css
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -15,6 +15,7 @@
 }
 
 div.tabBody {
+  height: 300px;
   padding-top: 20px;
   display: flex;
   justify-content: center;
@@ -33,10 +34,6 @@
   align-items: center;
 }
 
-div.colorSelectorContainer {
-  margin: 20px 60px;
-}
-
 div.saveButtonContainer {
   display: flex;
   flex-direction: column;
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -139,10 +139,11 @@
             </div>
           </Tabs.Item>
           <Tabs.Item id="color" header="Color">
-            <div className={css.colorSelectorContainer}>
+            <div className={css.tabBody}>
               <ColorSelector
                 currentColor={pendingAvatarColor}
                 onColorSelection={onColorSelection}
+                size="large"
               />
             </div>
           </Tabs.Item>
diff --git a/web/modals/threads/color-selector-button.css b/web/modals/threads/color-selector-button.css
--- a/web/modals/threads/color-selector-button.css
+++ b/web/modals/threads/color-selector-button.css
@@ -4,6 +4,12 @@
   border-radius: 24px;
 }
 
+.containerLarge {
+  height: 80px;
+  width: 80px;
+  border-radius: 40px;
+}
+
 .active,
 .container:hover {
   background-color: var(--color-selector-active-bg);
@@ -15,3 +21,9 @@
   border-radius: 16px;
   cursor: pointer;
 }
+
+div.colorSplotchLarge {
+  height: 60px;
+  width: 60px;
+  border-radius: 30px;
+}
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
@@ -11,15 +11,23 @@
   +color: string,
   +currentColor: string,
   +onColorSelection: (hex: string) => void,
+  +size?: 'small' | 'large',
 };
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color, currentColor, onColorSelection } = props;
+  const { color, currentColor, onColorSelection, size } = props;
 
   const active = tinycolor.equals(color, currentColor);
-  const containerClassName = classNames(css.container, {
+  const containerClassName = classNames({
+    [css.container]: true,
+    [css.containerLarge]: size === 'large',
     [css.active]: active,
   });
 
+  const colorSplotchClassName = classNames({
+    [css.colorSplotch]: true,
+    [css.colorSplotchLarge]: size === 'large',
+  });
+
   const colorSplotchStyle = React.useMemo(
     () => ({
       backgroundColor: `#${color}`,
@@ -33,7 +41,7 @@
 
   return (
     <Button onClick={onColorSplotchClicked} className={containerClassName}>
-      <div className={css.colorSplotch} style={colorSplotchStyle} />
+      <div className={colorSplotchClassName} style={colorSplotchStyle} />
     </Button>
   );
 }
diff --git a/web/modals/threads/color-selector.css b/web/modals/threads/color-selector.css
--- a/web/modals/threads/color-selector.css
+++ b/web/modals/threads/color-selector.css
@@ -9,3 +9,7 @@
   width: 100%;
   padding: 6px 0;
 }
+
+div.containerLarge {
+  row-gap: 36px;
+}
diff --git a/web/modals/threads/color-selector.react.js b/web/modals/threads/color-selector.react.js
--- a/web/modals/threads/color-selector.react.js
+++ b/web/modals/threads/color-selector.react.js
@@ -1,5 +1,6 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import { selectedThreadColors } from 'lib/shared/color-utils.js';
@@ -10,9 +11,10 @@
 type ColorSelectorProps = {
   +currentColor: string,
   +onColorSelection: (hex: string) => void,
+  +size?: 'small' | 'large',
 };
 function ColorSelector(props: ColorSelectorProps): React.Node {
-  const { currentColor, onColorSelection } = props;
+  const { currentColor, onColorSelection, size } = props;
 
   const colorSelectorButtons = React.useMemo(
     () =>
@@ -22,12 +24,18 @@
           color={color}
           currentColor={currentColor}
           onColorSelection={onColorSelection}
+          size={size}
         />
       )),
-    [currentColor, onColorSelection],
+    [currentColor, onColorSelection, size],
   );
 
-  return <div className={css.container}>{colorSelectorButtons}</div>;
+  const containerClassName = classNames({
+    [css.container]: true,
+    [css.containerLarge]: size === 'large',
+  });
+
+  return <div className={containerClassName}>{colorSelectorButtons}</div>;
 }
 
 export default ColorSelector;