diff --git a/src/color-picker/ColorPicker.tsx b/src/color-picker/ColorPicker.tsx
index 782ad0b227..2c4004e275 100644
--- a/src/color-picker/ColorPicker.tsx
+++ b/src/color-picker/ColorPicker.tsx
@@ -1,11 +1,10 @@
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import { Popup, PopupProps } from '../popup';
 import { ColorPickerProps, TdColorContext } from './interface';
 import useClassName from './hooks/useClassNames';
 import useControlled from '../hooks/useControlled';
 import ColorTrigger from './components/trigger';
 import ColorPanel from './components/panel/index';
-import useClickOutside from '../_util/useClickOutside';
 import { colorPickerDefaultProps } from './defaultProps';
 
 const ColorPicker: React.FC<ColorPickerProps> = (props) => {
@@ -13,7 +12,6 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const { popupProps, disabled, inputProps, onChange, colorModes, ...rest } = props;
   const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};
 
-  const [visible, setVisible] = useState(false);
   const [innerValue, setInnerValue] = useControlled(props, 'value', onChange);
   const triggerRef = useRef<HTMLDivElement>();
   const colorPanelRef = useRef();
@@ -22,7 +20,6 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
     placement: 'bottom-left',
     expandAnimation: true,
     trigger: 'click',
-    visible,
     ...restPopupProps,
     overlayClassName: [baseClassName, overlayClassName],
     overlayInnerStyle: {
@@ -31,18 +28,9 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
     },
   };
 
-  useClickOutside(
-    [triggerRef, colorPanelRef],
-    () => {
-      setVisible(false);
-    },
-    true,
-  );
-
   return (
     <Popup
       {...popProps}
-      onVisibleChange={(v) => setVisible(v)}
       content={
         !disabled && (
           <ColorPanel
@@ -50,7 +38,6 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
             disabled={disabled}
             value={innerValue}
             colorModes={colorModes}
-            togglePopup={setVisible}
             onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}
             ref={colorPanelRef}
           />