diff --git a/packages/graph-editor/src/components/controls/color.tsx b/packages/graph-editor/src/components/controls/color.tsx
index 20f4815d..f9382501 100644
--- a/packages/graph-editor/src/components/controls/color.tsx
+++ b/packages/graph-editor/src/components/controls/color.tsx
@@ -23,6 +23,10 @@ export const ColorField = observer(({ port, readOnly }: IField) => {
     }
   }, [port.value]);
 
+  const isValidHexColor = (hex: string): boolean => {
+    return /^#([0-9A-Fa-f]{3}){1,2}$/.test(hex);
+  };
+
   const onChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement> | string) => {
       let col;
@@ -38,7 +42,15 @@ export const ColorField = observer(({ port, readOnly }: IField) => {
       }
 
       //We need to convert from hex
-      (port as Input).setValue(hexToColor(col));
+      try {
+        // Only convert if the hex color is valid
+        if (isValidHexColor(col)) {
+          (port as Input).setValue(hexToColor(col));
+        }
+      } catch (error) {
+        console.error('Error converting hex color:', error);
+        // Don't set invalid value to port, just update the display value
+      }
     },
     [port, useDelayed],
   );
@@ -65,7 +77,15 @@ export const ColorField = observer(({ port, readOnly }: IField) => {
       {useDelayed && (
         <IconButton
           icon={<FloppyDisk />}
-          onClick={() => (port as Input).setValue(val)}
+          onClick={() => {
+            try {
+              if (isValidHexColor(val)) {
+                (port as Input).setValue(hexToColor(val));
+              }
+            } catch (error) {
+              console.error('Error saving hex color:', error);
+            }
+          }}
         />
       )}
     </Stack>
diff --git a/packages/graph-engine/src/nodes/color/lib/utils.ts b/packages/graph-engine/src/nodes/color/lib/utils.ts
index be35546e..f9cc7b36 100644
--- a/packages/graph-engine/src/nodes/color/lib/utils.ts
+++ b/packages/graph-engine/src/nodes/color/lib/utils.ts
@@ -18,7 +18,13 @@ export const toHex = (color: Color): string =>
 	color.to('srgb').toString({ format: 'hex' });
 
 export const hexToColor = (hex: string): ColorType => {
-	return toColorObject(new Color(hex));
+	try {
+		return toColorObject(new Color(hex));
+	} catch (error) {
+		console.error('Invalid hex color:', error);
+		// Return black as a fallback
+		return Black;
+	}
 };
 
 export const Black = {