diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/TextPanel.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/TextPanel.tsx
index ea5c1ed8a..d6321de42 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/TextPanel.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/TextPanel.tsx
@@ -40,6 +40,10 @@ export function TextPanel({
       color: [next.r, next.g, next.b, Math.round(next.a * 255)],
     });
   };
+  const toggleColorOpen = () => {
+    if (colorOpen) commitColor();
+    setColorOpen((open) => !open);
+  };
 
   return (
     <div className="space-y-3">
@@ -165,7 +169,7 @@ export function TextPanel({
             type="button"
             className="mt-1 flex h-9 w-full items-center gap-2 rounded-lg border border-(--platform-subpanel-border) bg-white/65 px-2 text-left text-xs disabled:opacity-40"
             disabled={readOnly}
-            onClick={() => setColorOpen((open) => !open)}
+            onClick={toggleColorOpen}
           >
             <span
               className="size-5 rounded border border-black/15"
@@ -178,11 +182,12 @@ export function TextPanel({
         </ComponentField>
         {colorOpen && !readOnly ? (
           <div className="absolute right-0 top-full z-20 mt-2 w-64 rounded-xl border border-(--platform-subpanel-border) bg-white p-3 shadow-xl">
-            <div
-              onPointerUp={() => commitColor()}
-              onPointerCancel={() => setColorDraft(null)}
-            >
-              <RgbaColorPicker color={rgba} onChange={setColorDraft} />
+            <div onPointerCancel={() => setColorDraft(null)}>
+              <RgbaColorPicker
+                color={rgba}
+                onChange={setColorDraft}
+                onChangeEnd={commitColor}
+              />
             </div>
             <ComponentNumberInput
               label="Alpha"