diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index f98a1a90db..59a0daefca 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -949,6 +949,22 @@ describe('ColorPicker', () => {
     expect(onChangeColor.toHexString()).toBe('#2ddcb4');
   });
 
+  it('test the same key', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <ColorPicker
+        open
+        presets={[
+          { label: <span>aaa</span>, colors: ['#333'], defaultOpen: true },
+          { label: <span>bbb</span>, colors: ['#666'], defaultOpen: true },
+          { label: <span>ccc</span>, colors: ['#999'], defaultOpen: true },
+        ]}
+      />,
+    );
+    expect(errorSpy).not.toHaveBeenCalled();
+    errorSpy.mockRestore();
+  });
+
   describe('should disable colorInput', () => {
     it('Should defaultValue work with disabledFormat', async () => {
       const { container } = render(<ColorPicker defaultValue="#000000" disabledFormat />);
diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx
index c3cd041777..0fe5b45f80 100644
--- a/components/color-picker/components/ColorPresets.tsx
+++ b/components/color-picker/components/ColorPresets.tsx
@@ -35,7 +35,10 @@ export const isBright = (value: AggregationColor, bgColorToken: string) => {
   return r * 0.299 + g * 0.587 + b * 0.114 > 192;
 };
 
-const genCollapsePanelKey = ({ label }: PresetsItem) => `panel-${label}`;
+const genCollapsePanelKey = (preset: PresetsItem, index: number) =>
+  typeof preset.label === 'string' || typeof preset.label === 'number'
+    ? `panel-${preset.label}-${index}`
+    : `panel-${index}`;
 
 const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color, onChange }) => {
   const [locale] = useLocale('ColorPicker');
@@ -48,9 +51,11 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
 
   const activeKeys = useMemo(
     () =>
-      presetsValue.reduce<string[]>((acc, preset) => {
+      presetsValue.reduce<string[]>((acc, preset, index) => {
         const { defaultOpen = true } = preset;
-        if (defaultOpen) acc.push(genCollapsePanelKey(preset));
+        if (defaultOpen) {
+          acc.push(genCollapsePanelKey(preset, index));
+        }
         return acc;
       }, []),
     [presetsValue],
@@ -60,8 +65,8 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
     onChange?.(colorValue);
   };
 
-  const items: CollapseProps['items'] = presetsValue.map((preset) => ({
-    key: genCollapsePanelKey(preset),
+  const items: CollapseProps['items'] = presetsValue.map((preset, index) => ({
+    key: genCollapsePanelKey(preset, index),
     label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
     children: (
       <div className={`${colorPresetsPrefixCls}-items`}>