diff --git a/native/components/color-rows.react.js b/native/components/color-rows.react.js
--- a/native/components/color-rows.react.js
+++ b/native/components/color-rows.react.js
@@ -11,10 +11,11 @@
 type Props = {
   +pendingColor: string,
   +setPendingColor: SetState<string>,
+  +outerRingSelectedColor?: string,
 };
 
 function ColorRows(props: Props): React.Node {
-  const { pendingColor, setPendingColor } = props;
+  const { pendingColor, setPendingColor, outerRingSelectedColor } = props;
 
   const colorSelectorButtons = React.useMemo(
     () =>
@@ -24,9 +25,10 @@
           color={color}
           pendingColor={pendingColor}
           setPendingColor={setPendingColor}
+          outerRingSelectedColor={outerRingSelectedColor}
         />
       )),
-    [pendingColor, setPendingColor],
+    [outerRingSelectedColor, pendingColor, setPendingColor],
   );
 
   const firstRow = React.useMemo(
diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -12,22 +12,33 @@
   +color: string,
   +pendingColor: string,
   +setPendingColor: SetState<string>,
+  +outerRingSelectedColor?: string,
 };
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color, pendingColor, setPendingColor } = props;
+  const { color, pendingColor, setPendingColor, outerRingSelectedColor } =
+    props;
   const styles = useStyles(unboundStyles);
 
   const colorSplotchStyle = React.useMemo(() => {
     return [styles.button, { backgroundColor: `#${color}` }];
   }, [color, styles.button]);
 
+  const outerRingSelectedStyle = React.useMemo(() => {
+    const result = [styles.outerRingSelected];
+    if (outerRingSelectedColor) {
+      result.push({ backgroundColor: `#${outerRingSelectedColor}` });
+    }
+
+    return result;
+  }, [outerRingSelectedColor, styles.outerRingSelected]);
+
   const onPendingColorSelected = React.useCallback(() => {
     setPendingColor(color);
   }, [setPendingColor, color]);
 
   const isSelected = tinycolor.equals(pendingColor, color);
   return (
-    <View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
+    <View style={isSelected ? outerRingSelectedStyle : styles.outerRing}>
       <TouchableOpacity
         style={colorSplotchStyle}
         onPress={onPendingColorSelected}