diff --git a/invokeai/frontend/web/src/common/util/colorCodeTransformers.ts b/invokeai/frontend/web/src/common/util/colorCodeTransformers.ts
new file mode 100644
index 0000000000..f6e47d59e2
--- /dev/null
+++ b/invokeai/frontend/web/src/common/util/colorCodeTransformers.ts
@@ -0,0 +1,17 @@
+import type { RgbaColor } from 'react-colorful';
+
+export function rgbaToHex(color: RgbaColor): string {
+  const hex = ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
+  const alphaHex = Math.round(color.a * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${hex}${alphaHex}`;
+}
+
+export function hexToRGBA(hex: string, alpha: number) {
+  hex = hex.replace(/^#/, '');
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return { r, g, b, a: alpha };
+}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
index e95adad697..093e3459ab 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ColorFieldInputComponent.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { hexToRGBA, rgbaToHex } from 'common/util/colorCodeTransformers';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { fieldColorValueChanged } from 'features/nodes/store/nodesSlice';
 import type { ColorFieldInputInstance, ColorFieldInputTemplate } from 'features/nodes/types/field';
@@ -9,22 +10,6 @@ import { HexColorInput, RgbaColorPicker } from 'react-colorful';
 
 import type { FieldComponentProps } from './types';
 
-function rgbaToHex(color: RgbaColor): string {
-  const hex = ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
-  const alphaHex = Math.round(color.a * 255)
-    .toString(16)
-    .padStart(2, '0');
-  return `#${hex}${alphaHex}`;
-}
-
-function hexToRGBA(hex: string, alpha: number) {
-  hex = hex.replace(/^#/, '');
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  return { r, g, b, a: alpha };
-}
-
 const FALLBACK_COLOR: RgbaColor = { r: 0, g: 0, b: 0, a: 255 };
 
 const ColorFieldInputComponent = (props: FieldComponentProps<ColorFieldInputInstance, ColorFieldInputTemplate>) => {