diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
index 0e8a2d93ca..03476a6627 100644
--- a/src/color-picker/panel/index.tsx
+++ b/src/color-picker/panel/index.tsx
@@ -41,7 +41,13 @@ export default defineComponent({
 
     const defaultEmptyColor = computed(() => (isGradient.value ? DEFAULT_LINEAR_GRADIENT : DEFAULT_COLOR));
 
-    const mode = ref<TdColorModes>(props.colorModes?.length === 1 ? props.colorModes[0] : 'monochrome');
+    const mode = ref<TdColorModes>(
+      props.colorModes?.length !== 1 && innerValue.value?.includes('linear-gradient')
+        ? 'linear-gradient'
+        : props.colorModes?.length === 1
+        ? props.colorModes[0]
+        : 'monochrome',
+    );
     const isGradient = computed(() => mode.value === 'linear-gradient');
 
     const color = ref(new Color(innerValue.value || defaultEmptyColor.value));