diff --git a/packages/react-native/ReactCommon/react/renderer/core/graphicsConversions.h b/packages/react-native/ReactCommon/react/renderer/core/graphicsConversions.h
index 1844f67fdb7c4e..8b863220cc50a8 100644
--- a/packages/react-native/ReactCommon/react/renderer/core/graphicsConversions.h
+++ b/packages/react-native/ReactCommon/react/renderer/core/graphicsConversions.h
@@ -46,7 +46,8 @@ inline void fromRawValue(
     colorComponents.blue = items.at(2);
     colorComponents.alpha = length == 4 ? items.at(3) : 1.0f;
   } else {
-    colorComponents = parsePlatformColor(context, value);
+    result = parsePlatformColor(context, value);
+    return;
   }
 
   result = colorFromComponents(colorComponents);
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/Color.cpp b/packages/react-native/ReactCommon/react/renderer/graphics/Color.cpp
index 83de8a0271dd85..19288044ead056 100644
--- a/packages/react-native/ReactCommon/react/renderer/graphics/Color.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/Color.cpp
@@ -18,22 +18,11 @@ bool isColorMeaningful(SharedColor const &color) noexcept {
 }
 
 SharedColor colorFromComponents(ColorComponents components) {
-  float ratio = 255;
-  return {
-      ((int)round(components.alpha * ratio) & 0xff) << 24 |
-      ((int)round(components.red * ratio) & 0xff) << 16 |
-      ((int)round(components.green * ratio) & 0xff) << 8 |
-      ((int)round(components.blue * ratio) & 0xff)};
+  return {hostPlatformColorFromComponents(components)};
 }
 
 ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
-  float ratio = 255;
-  Color color = *sharedColor;
-  return ColorComponents{
-      (float)((color >> 16) & 0xff) / ratio,
-      (float)((color >> 8) & 0xff) / ratio,
-      (float)((color >> 0) & 0xff) / ratio,
-      (float)((color >> 24) & 0xff) / ratio};
+  return colorComponentsFromHostPlatformColor(*sharedColor);
 }
 
 SharedColor clearColor() {
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/Color.h b/packages/react-native/ReactCommon/react/renderer/graphics/Color.h
index 4bb331bde42d58..ada504d4d9a10f 100644
--- a/packages/react-native/ReactCommon/react/renderer/graphics/Color.h
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/Color.h
@@ -7,25 +7,25 @@
 
 #pragma once
 
-#include <cmath>
 #include <functional>
 #include <limits>
 
 #include <react/renderer/graphics/ColorComponents.h>
+#include <react/renderer/graphics/HostPlatformColor.h>
 
 namespace facebook::react {
 
-using Color = int32_t;
-
 /*
  * On Android, a color can be represented as 32 bits integer, so there is no
  * need to instantiate complex color objects and then pass them as shared
  * pointers. Hense instead of using shared_ptr, we use a simple wrapper class
- * which provides a pointer-like interface.
+ * which provides a pointer-like interface. On other platforms, colors may be
+ * represented by more complex objects that cannot be represented as 32-bits
+ * integers, so we hide the implementation detail in HostPlatformColor.h.
  */
 class SharedColor {
  public:
-  static const Color UndefinedColor = std::numeric_limits<Color>::max();
+  static const Color UndefinedColor = HostPlatformColor::UndefinedColor;
 
   SharedColor() : color_(UndefinedColor) {}
 
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h b/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h
new file mode 100644
index 00000000000000..0dd7abe08f05d0
--- /dev/null
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/graphics/ColorComponents.h>
+#include <cmath>
+
+namespace facebook::react {
+
+using Color = int32_t;
+
+namespace HostPlatformColor {
+static const facebook::react::Color UndefinedColor =
+    std::numeric_limits<facebook::react::Color>::max();
+}
+
+inline Color hostPlatformColorFromComponents(ColorComponents components) {
+  float ratio = 255;
+  return ((int)round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 |
+      ((int)round(components.blue * ratio) & 0xff);
+}
+
+inline ColorComponents colorComponentsFromHostPlatformColor(Color color) {
+  float ratio = 255;
+  return ColorComponents{
+      (float)((color >> 16) & 0xff) / ratio,
+      (float)((color >> 8) & 0xff) / ratio,
+      (float)((color >> 0) & 0xff) / ratio,
+      (float)((color >> 24) & 0xff) / ratio};
+}
+
+} // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/PlatformColorParser.h b/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/PlatformColorParser.h
index b61e0ff388670c..5485575921a12a 100644
--- a/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/PlatformColorParser.h
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/PlatformColorParser.h
@@ -10,11 +10,11 @@
 #include <fbjni/fbjni.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/RawProps.h>
-#include <react/renderer/graphics/ColorComponents.h>
+#include <react/renderer/graphics/Color.h>
 
 namespace facebook::react {
 
-inline ColorComponents parsePlatformColor(
+inline SharedColor parsePlatformColor(
     const PropsParserContext &context,
     const RawValue &value) {
   ColorComponents colorComponents = {0, 0, 0, 0};
@@ -46,7 +46,7 @@ inline ColorComponents parsePlatformColor(
     colorComponents.blue = (argb & 0xFF) / ratio;
   }
 
-  return colorComponents;
+  return {colorFromComponents(colorComponents)};
 }
 
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/HostPlatformColor.h b/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/HostPlatformColor.h
new file mode 100644
index 00000000000000..6ea3c571ac5929
--- /dev/null
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/HostPlatformColor.h
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/graphics/ColorComponents.h>
+#include <cmath>
+
+namespace facebook::react {
+
+using Color = int32_t;
+
+namespace HostPlatformColor {
+static const facebook::react::Color UndefinedColor =
+    std::numeric_limits<facebook::react::Color>::max();
+}
+
+inline Color hostPlatformColorFromComponents(ColorComponents components) {
+  float ratio = 255;
+  return ((int)std::round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)std::round(components.red * ratio) & 0xff) << 16 |
+      ((int)std::round(components.green * ratio) & 0xff) << 8 |
+      ((int)std::round(components.blue * ratio) & 0xff);
+}
+
+inline ColorComponents colorComponentsFromHostPlatformColor(Color color) {
+  float ratio = 255;
+  return ColorComponents{
+      (float)((color >> 16) & 0xff) / ratio,
+      (float)((color >> 8) & 0xff) / ratio,
+      (float)((color >> 0) & 0xff) / ratio,
+      (float)((color >> 24) & 0xff) / ratio};
+}
+
+} // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/PlatformColorParser.h b/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/PlatformColorParser.h
index ffcc3dbfae1343..bc7d988794e3d5 100644
--- a/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/PlatformColorParser.h
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/platform/cxx/react/renderer/graphics/PlatformColorParser.h
@@ -9,11 +9,11 @@
 
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/RawProps.h>
-#include <react/renderer/graphics/ColorComponents.h>
+#include <react/renderer/graphics/Color.h>
 
 namespace facebook::react {
 
-inline ColorComponents parsePlatformColor(
+inline SharedColor parsePlatformColor(
     const PropsParserContext &context,
     const RawValue &value) {
   float alpha = 0;
@@ -21,7 +21,7 @@ inline ColorComponents parsePlatformColor(
   float green = 0;
   float blue = 0;
 
-  return {red, green, blue, alpha};
+  return {colorFromComponents({red, green, blue, alpha})};
 }
 
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.h b/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.h
new file mode 100644
index 00000000000000..0dd7abe08f05d0
--- /dev/null
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.h
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/graphics/ColorComponents.h>
+#include <cmath>
+
+namespace facebook::react {
+
+using Color = int32_t;
+
+namespace HostPlatformColor {
+static const facebook::react::Color UndefinedColor =
+    std::numeric_limits<facebook::react::Color>::max();
+}
+
+inline Color hostPlatformColorFromComponents(ColorComponents components) {
+  float ratio = 255;
+  return ((int)round(components.alpha * ratio) & 0xff) << 24 |
+      ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 |
+      ((int)round(components.blue * ratio) & 0xff);
+}
+
+inline ColorComponents colorComponentsFromHostPlatformColor(Color color) {
+  float ratio = 255;
+  return ColorComponents{
+      (float)((color >> 16) & 0xff) / ratio,
+      (float)((color >> 8) & 0xff) / ratio,
+      (float)((color >> 0) & 0xff) / ratio,
+      (float)((color >> 24) & 0xff) / ratio};
+}
+
+} // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/PlatformColorParser.h b/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/PlatformColorParser.h
index 15c8a5221d66b8..4f4bc6a445178f 100644
--- a/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/PlatformColorParser.h
+++ b/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/PlatformColorParser.h
@@ -9,12 +9,12 @@
 
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/RawProps.h>
-#include <react/renderer/graphics/ColorComponents.h>
+#include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/RCTPlatformColorUtils.h>
 
 namespace facebook::react {
 
-inline ColorComponents parsePlatformColor(
+inline SharedColor parsePlatformColor(
     const PropsParserContext &context,
     const RawValue &value) {
   if (value.hasType<butter::map<std::string, RawValue>>()) {
@@ -22,11 +22,12 @@ inline ColorComponents parsePlatformColor(
     if (items.find("semantic") != items.end() &&
         items.at("semantic").hasType<std::vector<std::string>>()) {
       auto semanticItems = (std::vector<std::string>)items.at("semantic");
-      return RCTPlatformColorComponentsFromSemanticItems(semanticItems);
+      return {colorFromComponents(
+          RCTPlatformColorComponentsFromSemanticItems(semanticItems))};
     }
   }
 
-  return {0, 0, 0, 0};
+  return clearColor();
 }
 
 } // namespace facebook::react