diff --git a/docs/en-US/component/color-picker.md b/docs/en-US/component/color-picker.md
index a7e52401d2..c8b0263143 100644
--- a/docs/en-US/component/color-picker.md
+++ b/docs/en-US/component/color-picker.md
@@ -60,6 +60,8 @@ color-picker/sizes
 | id                          | ColorPicker id                                                                                                 | ^[string]                                                                                                        | —       |
 | teleported ^(2.7.2)         | whether color-picker popper is teleported to the body                                                          | ^[boolean]                                                                                                       | true    |
 | label ^(a11y) ^(deprecated) | ColorPicker aria-label                                                                                         | ^[string]                                                                                                        | —       |
+| persistent ^(2.10.5)        | when color-picker inactive and persistent is false, the color panel will be destroyed                          | ^[boolean]                                                                                                       | true    |
+| append-to ^(2.10.5)         | which element the color-picker panel appends to                                                                | ^[CSSSelector] / ^[HTMLElement]                                                                                  | -       |
 
 ### Events
 
diff --git a/packages/components/color-picker/src/color-picker.ts b/packages/components/color-picker/src/color-picker.ts
index 3a34f29969..dc6333f094 100644
--- a/packages/components/color-picker/src/color-picker.ts
+++ b/packages/components/color-picker/src/color-picker.ts
@@ -17,6 +17,13 @@ import type {
 import type ColorPicker from './color-picker.vue'
 
 export const colorPickerProps = buildProps({
+  /**
+   * @description when color-picker inactive and persistent is false, the color panel will be destroyed
+   */
+  persistent: {
+    type: Boolean,
+    default: true,
+  },
   /**
    * @description binding value
    */
@@ -62,6 +69,10 @@ export const colorPickerProps = buildProps({
    * @description whether color-picker popper is teleported to the body
    */
   teleported: useTooltipContentProps.teleported,
+  /**
+   * @description which color-picker panel appends to
+   */
+  appendTo: useTooltipContentProps.appendTo,
   /**
    * @description predefined color options
    */
diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index 9340875d9e..fdd80c682a 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -12,7 +12,8 @@
     trigger="click"
     :teleported="teleported"
     :transition="`${ns.namespace.value}-zoom-in-top`"
-    persistent
+    :persistent="persistent"
+    :append-to="appendTo"
     @hide="setShowPicker(false)"
   >
     <template #content>