diff --git a/components/color-picker/components/ColorTrigger.tsx b/components/color-picker/components/ColorTrigger.tsx
index 60e210951d..9b822576a9 100644
--- a/components/color-picker/components/ColorTrigger.tsx
+++ b/components/color-picker/components/ColorTrigger.tsx
@@ -79,7 +79,7 @@ const ColorTrigger = forwardRef<HTMLDivElement, ColorTriggerProps>((props, ref)
       default:
         return alpha < 100 ? `${hexString.slice(0, 7)},${alpha}%` : hexString;
     }
-  }, [color, format, showText, activeIndex]);
+  }, [color, format, showText, activeIndex, locale.transparent, colorTextCellPrefixCls]);
 
   // ============================= Render =============================
   const containerNode = useMemo<React.ReactNode>(
diff --git a/components/color-picker/hooks/useModeColor.ts b/components/color-picker/hooks/useModeColor.ts
index ffef564b5e..a3961d476f 100644
--- a/components/color-picker/hooks/useModeColor.ts
+++ b/components/color-picker/hooks/useModeColor.ts
@@ -57,7 +57,7 @@ export default function useModeColor(
     pushOption('gradient', locale.gradientColor);
 
     return [optionList, modes];
-  }, [mode]);
+  }, [mode, locale.singleColor, locale.gradientColor]);
 
   // ======================== Post ========================
   // We need align `mode` with `color` state