diff --git a/packages/rn-tester/.maestro/new-arch-examples.yml b/packages/rn-tester/.maestro/new-arch-examples.yml
index 803eb7708efd..66896b177af1 100644
--- a/packages/rn-tester/.maestro/new-arch-examples.yml
+++ b/packages/rn-tester/.maestro/new-arch-examples.yml
@@ -12,6 +12,9 @@ appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebo
 - tapOn: 'Change Background'
 - assertVisible:
     text: 'HSBA: h: 0, s: 1, b: 1, a: 255'
+- tapOn: 'Set Color Prop'
+- assertVisible:
+    text: 'HSBA: h: 0, s: 0, b: 1, a: 255'
 - assertVisible:
     text: '> Interop Layer Measurements <'
 - assertVisible:
diff --git a/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js b/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js
index 70219cdca613..6cdeafe8261f 100644
--- a/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js
+++ b/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js
@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent, ViewProps} from 'react-native';
+import type {ColorValue, HostComponent, ViewProps} from 'react-native';
 
 import * as React from 'react';
 import {UIManager, findNodeHandle, requireNativeComponent} from 'react-native';
@@ -27,7 +27,7 @@ type ColorChangedEvent = {
 type NativeProps = Readonly<{
   ...ViewProps,
   opacity?: number,
-  color?: string,
+  color?: ColorValue,
   onColorChanged?: (event: ColorChangedEvent) => void,
 }>;
 
diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
index 198ade0266fb..b0ca72b0d915 100644
--- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
+++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
@@ -10,6 +10,7 @@
 
 import type {MyLegacyViewType} from './MyLegacyViewNativeComponent';
 import type {MyNativeViewType} from './MyNativeViewNativeComponent';
+import type {ColorValue} from 'react-native';
 
 import RNTMyLegacyNativeView from './MyLegacyViewNativeComponent';
 import {
@@ -33,6 +34,12 @@ const colors = [
   '#000033',
 ];
 
+const legacyColors: ReadonlyArray<ColorValue> = [
+  'rgb(255, 255, 255)',
+  'hsl(240, 100%, 50%)',
+  'steelblue',
+];
+
 const cornerRadiuses = [0, 20, 40, 60, 80, 100, 120];
 
 class HSBA {
@@ -101,6 +108,7 @@ export default function MyNativeView(props: {}): React.Node {
   const ref = useRef<React.ElementRef<MyNativeViewType> | null>(null);
   const legacyRef = useRef<React.ElementRef<MyLegacyViewType> | null>(null);
   const [currentBGColor, setCurrentBGColor] = useState<number>(0);
+  const [legacyColorIndex, setLegacyColorIndex] = useState<?number>(null);
   const [opacity, setOpacity] = useState(1.0);
   const [arrayValues, setArrayValues] = useState([1, 2, 3]);
   const [hsba, setHsba] = useState<HSBA>(new HSBA());
@@ -141,6 +149,9 @@ export default function MyNativeView(props: {}): React.Node {
         ref={legacyRef}
         style={{flex: 1}}
         opacity={opacity}
+        color={
+          legacyColorIndex == null ? undefined : legacyColors[legacyColorIndex]
+        }
         onColorChanged={event => {
           const normalizedHue =
             Platform.OS === 'android'
@@ -195,6 +206,17 @@ export default function MyNativeView(props: {}): React.Node {
             setCurrentBGColor(nextBGColor);
           }}
         />
+        <Button
+          title="Set Color Prop"
+          onPress={() => {
+            setLegacyColorIndex(
+              legacyColorIndex == null ||
+                legacyColorIndex + 1 >= legacyColors.length
+                ? 0
+                : legacyColorIndex + 1,
+            );
+          }}
+        />
         <Button
           title="Set Opacity"
           onPress={() => {
diff --git a/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.kt b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.kt
index f65f7a45b35e..666ee54e6f7e 100644
--- a/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.kt
+++ b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.kt
@@ -33,12 +33,9 @@ internal class MyLegacyViewManager(reactContext: ReactApplicationContext) :
     super.setOpacity(view, opacity)
   }
 
-  @ReactProp(name = ViewProps.COLOR)
-  fun setColor(view: MyNativeView, color: String?): Unit =
-      when (color) {
-        null -> view.setBackgroundColor(Color.TRANSPARENT)
-        else -> view.setBackgroundColor(Color.parseColor(color))
-      }
+  @ReactProp(name = ViewProps.COLOR, customType = "Color")
+  fun setColor(view: MyNativeView, color: Int?): Unit =
+      view.setBackgroundColor(color ?: Color.TRANSPARENT)
 
   @ReactProp(name = "cornerRadius")
   fun setCornerRadius(view: MyNativeView, cornerRadius: Float) {