diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index 7ee8beb3c5..3ff27004cf 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -16,7 +16,10 @@
     @hide="setShowPicker(false)"
   >
     <template #content>
-      <div v-click-outside="handleClickOutside" @keydown.esc="handleEsc">
+      <div
+        v-click-outside:[triggerRef]="handleClickOutside"
+        @keydown.esc="handleEsc"
+      >
         <div :class="ns.be('dropdown', 'main-wrapper')">
           <hue-slider ref="hue" class="hue-slider" :color="color" vertical />
           <sv-panel ref="sv" :color="color" />
@@ -245,7 +248,6 @@ function setShowPicker(value: boolean) {
 }
 
 const debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })
-
 function show() {
   if (colorDisabled.value) return
   setShowPicker(true)
@@ -271,6 +273,9 @@ function resetColor() {
 
 function handleTrigger() {
   if (colorDisabled.value) return
+  if (showPicker.value) {
+    resetColor()
+  }
   debounceSetShowPicker(!showPicker.value)
 }