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
@@ -7,15 +7,16 @@
 import type { SetState } from 'lib/types/hook-types.js';
 
 import ColorSelectorButton from './color-selector-button.react.js';
+import type { ViewStyle } from '../types/styles.js';
 
 type Props = {
   +pendingColor: string,
   +setPendingColor: SetState<string>,
-  +outerRingSelectedColor?: string,
+  +outerRingSelectedColorStyle?: ViewStyle,
 };
 
 function ColorRows(props: Props): React.Node {
-  const { pendingColor, setPendingColor, outerRingSelectedColor } = props;
+  const { pendingColor, setPendingColor, outerRingSelectedColorStyle } = props;
 
   const colorSelectorButtons = React.useMemo(
     () =>
@@ -25,10 +26,10 @@
           color={color}
           pendingColor={pendingColor}
           setPendingColor={setPendingColor}
-          outerRingSelectedColor={outerRingSelectedColor}
+          outerRingSelectedColorStyle={outerRingSelectedColorStyle}
         />
       )),
-    [outerRingSelectedColor, pendingColor, setPendingColor],
+    [outerRingSelectedColorStyle, 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
@@ -7,15 +7,16 @@
 import type { SetState } from 'lib/types/hook-types.js';
 
 import { useStyles } from '../themes/colors.js';
+import type { ViewStyle } from '../types/styles.js';
 
 type ColorSelectorButtonProps = {
   +color: string,
   +pendingColor: string,
   +setPendingColor: SetState<string>,
-  +outerRingSelectedColor?: string,
+  +outerRingSelectedColorStyle?: ViewStyle,
 };
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color, pendingColor, setPendingColor, outerRingSelectedColor } =
+  const { color, pendingColor, setPendingColor, outerRingSelectedColorStyle } =
     props;
   const styles = useStyles(unboundStyles);
 
@@ -25,12 +26,12 @@
 
   const outerRingSelectedStyle = React.useMemo(() => {
     const result = [styles.outerRingSelected];
-    if (outerRingSelectedColor) {
-      result.push({ backgroundColor: `#${outerRingSelectedColor}` });
+    if (outerRingSelectedColorStyle) {
+      result.push(outerRingSelectedColorStyle);
     }
 
     return result;
-  }, [outerRingSelectedColor, styles.outerRingSelected]);
+  }, [outerRingSelectedColorStyle, styles.outerRingSelected]);
 
   const onPendingColorSelected = React.useCallback(() => {
     setPendingColor(color);