diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 33e423af1f..4612f52e08 100644
--- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -767,6 +767,388 @@ Array [
 ]
 `;
 
+exports[`renders components/color-picker/demo/controlled.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-color-picker-trigger"
+  >
+    <div
+      class="ant-color-picker-color-block"
+    >
+      <div
+        class="ant-color-picker-color-block-inner"
+        style="background: rgb(22, 119, 255);"
+      />
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div
+      class="ant-popover-arrow"
+      style="position: absolute;"
+    />
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div
+            class="ant-color-picker-panel"
+          >
+            <div
+              class="ant-color-picker-inner-panel"
+            >
+              <div
+                class="ant-color-picker-select"
+              >
+                <div
+                  class="ant-color-picker-palette"
+                  style="position: relative;"
+                >
+                  <div
+                    style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                  >
+                    <div
+                      class="ant-color-picker-handler"
+                      style="background-color: rgb(22, 119, 255);"
+                    />
+                  </div>
+                  <div
+                    class="ant-color-picker-saturation"
+                    style="background-color: rgb(0, 0, 0);"
+                  />
+                </div>
+              </div>
+              <div
+                class="ant-color-picker-slider-container"
+              >
+                <div
+                  class="ant-color-picker-slider-group"
+                >
+                  <div
+                    class="ant-color-picker-slider ant-color-picker-slider-hue"
+                  >
+                    <div
+                      class="ant-color-picker-palette"
+                      style="position: relative;"
+                    >
+                      <div
+                        style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                      >
+                        <div
+                          class="ant-color-picker-handler ant-color-picker-handler-sm"
+                          style="background-color: rgb(0, 0, 0);"
+                        />
+                      </div>
+                      <div
+                        class="ant-color-picker-gradient"
+                        style="position: absolute; inset: 0;"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="ant-color-picker-slider ant-color-picker-slider-alpha"
+                  >
+                    <div
+                      class="ant-color-picker-palette"
+                      style="position: relative;"
+                    >
+                      <div
+                        style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                      >
+                        <div
+                          class="ant-color-picker-handler ant-color-picker-handler-sm"
+                          style="background-color: rgb(22, 119, 255);"
+                        />
+                      </div>
+                      <div
+                        class="ant-color-picker-gradient"
+                        style="position: absolute; inset: 0;"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ant-color-picker-color-block"
+                >
+                  <div
+                    class="ant-color-picker-color-block-inner"
+                    style="background: rgb(22, 119, 255);"
+                  />
+                </div>
+              </div>
+              <div
+                class="ant-color-picker-input-container"
+              >
+                <div
+                  class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
+                >
+                  <div
+                    class="ant-select-selector"
+                  >
+                    <span
+                      class="ant-select-selection-search"
+                    >
+                      <input
+                        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+                        aria-autocomplete="list"
+                        aria-controls="rc_select_TEST_OR_SSR_list"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        aria-owns="rc_select_TEST_OR_SSR_list"
+                        autocomplete="off"
+                        class="ant-select-selection-search-input"
+                        id="rc_select_TEST_OR_SSR"
+                        readonly=""
+                        role="combobox"
+                        style="opacity: 0;"
+                        type="search"
+                        unselectable="on"
+                        value=""
+                      />
+                    </span>
+                    <span
+                      class="ant-select-selection-item"
+                      title="HEX"
+                    >
+                      HEX
+                    </span>
+                  </div>
+                  <div
+                    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  >
+                    <div>
+                      <div
+                        id="rc_select_TEST_OR_SSR_list"
+                        role="listbox"
+                        style="height: 0px; width: 0px; overflow: hidden;"
+                      >
+                        <div
+                          aria-label="HEX"
+                          aria-selected="true"
+                          id="rc_select_TEST_OR_SSR_list_0"
+                          role="option"
+                        >
+                          hex
+                        </div>
+                        <div
+                          aria-label="HSB"
+                          aria-selected="false"
+                          id="rc_select_TEST_OR_SSR_list_1"
+                          role="option"
+                        >
+                          hsb
+                        </div>
+                      </div>
+                      <div
+                        class="rc-virtual-list"
+                        style="position: relative;"
+                      >
+                        <div
+                          class="rc-virtual-list-holder"
+                          style="max-height: 256px; overflow-y: auto;"
+                        >
+                          <div>
+                            <div
+                              class="rc-virtual-list-holder-inner"
+                              style="display: flex; flex-direction: column;"
+                            >
+                              <div
+                                aria-selected="true"
+                                class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                title="HEX"
+                              >
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  HEX
+                                </div>
+                                <span
+                                  aria-hidden="true"
+                                  class="ant-select-item-option-state"
+                                  style="user-select: none;"
+                                  unselectable="on"
+                                />
+                              </div>
+                              <div
+                                aria-selected="false"
+                                class="ant-select-item ant-select-item-option"
+                                title="HSB"
+                              >
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  HSB
+                                </div>
+                                <span
+                                  aria-hidden="true"
+                                  class="ant-select-item-option-state"
+                                  style="user-select: none;"
+                                  unselectable="on"
+                                />
+                              </div>
+                              <div
+                                aria-selected="false"
+                                class="ant-select-item ant-select-item-option"
+                                title="RGB"
+                              >
+                                <div
+                                  class="ant-select-item-option-content"
+                                >
+                                  RGB
+                                </div>
+                                <span
+                                  aria-hidden="true"
+                                  class="ant-select-item-option-state"
+                                  style="user-select: none;"
+                                  unselectable="on"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    class="ant-select-arrow"
+                    style="user-select: none;"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="down"
+                      class="anticon anticon-down ant-select-suffix"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="down"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </div>
+                <div
+                  class="ant-color-picker-input"
+                >
+                  <span
+                    class="ant-input-affix-wrapper ant-color-picker-hex-input ant-input-affix-wrapper-sm"
+                  >
+                    <span
+                      class="ant-input-prefix"
+                    >
+                      #
+                    </span>
+                    <input
+                      class="ant-input ant-input-sm"
+                      type="text"
+                      value="1677FF"
+                    />
+                  </span>
+                </div>
+                <div
+                  class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input"
+                >
+                  <div
+                    class="ant-input-number-handler-wrap"
+                  >
+                    <span
+                      aria-disabled="true"
+                      aria-label="Increase Value"
+                      class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
+                      role="button"
+                      unselectable="on"
+                    >
+                      <span
+                        aria-label="up"
+                        class="anticon anticon-up ant-input-number-handler-up-inner"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="up"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span
+                      aria-disabled="false"
+                      aria-label="Decrease Value"
+                      class="ant-input-number-handler ant-input-number-handler-down"
+                      role="button"
+                      unselectable="on"
+                    >
+                      <span
+                        aria-label="down"
+                        class="anticon anticon-down ant-input-number-handler-down-inner"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="down"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="64 64 896 896"
+                          width="1em"
+                        >
+                          <path
+                            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                  </div>
+                  <div
+                    class="ant-input-number-input-wrap"
+                  >
+                    <input
+                      aria-valuemax="100"
+                      aria-valuemin="0"
+                      aria-valuenow="100"
+                      autocomplete="off"
+                      class="ant-input-number-input"
+                      role="spinbutton"
+                      step="1"
+                      value="100%"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/color-picker/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <div
diff --git a/components/color-picker/__tests__/__snapshots__/demo.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo.test.ts.snap
index 5f3ff38444..7d7aaf394c 100644
--- a/components/color-picker/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo.test.ts.snap
@@ -30,6 +30,21 @@ exports[`renders components/color-picker/demo/base.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/color-picker/demo/controlled.tsx correctly 1`] = `
+<div
+  class="ant-color-picker-trigger"
+>
+  <div
+    class="ant-color-picker-color-block"
+  >
+    <div
+      class="ant-color-picker-color-block-inner"
+      style="background:rgb(22, 119, 255)"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders components/color-picker/demo/disabled.tsx correctly 1`] = `
 <div
   class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
diff --git a/components/color-picker/demo/base.tsx b/components/color-picker/demo/base.tsx
index 9affd3cc30..c43769e905 100644
--- a/components/color-picker/demo/base.tsx
+++ b/components/color-picker/demo/base.tsx
@@ -1,10 +1,6 @@
-import { ColorPicker, theme } from 'antd';
-import type { Color } from 'antd/es/color-picker';
-import React, { useState } from 'react';
+import { ColorPicker } from 'antd';
+import React from 'react';
 
-export default () => {
-  const { token } = theme.useToken();
-  const [color, setColor] = useState<Color | string>(token.colorPrimary);
+const Demo = () => <ColorPicker />;
 
-  return <ColorPicker value={color} onChange={setColor} />;
-};
+export default Demo;
diff --git a/components/color-picker/demo/controlled.md b/components/color-picker/demo/controlled.md
new file mode 100644
index 0000000000..bb04600504
--- /dev/null
+++ b/components/color-picker/demo/controlled.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `value` 和 `onChange` 设置组件为受控模式。
+
+## en-US
+
+Set the component to controlled mode.
diff --git a/components/color-picker/demo/controlled.tsx b/components/color-picker/demo/controlled.tsx
new file mode 100644
index 0000000000..eaebe080ea
--- /dev/null
+++ b/components/color-picker/demo/controlled.tsx
@@ -0,0 +1,11 @@
+import { ColorPicker, theme } from 'antd';
+import type { Color } from 'antd/es/color-picker';
+import React, { useState } from 'react';
+
+const Demo: React.FC = () => {
+  const { token } = theme.useToken();
+  const [color, setColor] = useState<Color | string>(token.colorPrimary);
+  return <ColorPicker value={color} onChange={setColor} />;
+};
+
+export default Demo;
diff --git a/components/color-picker/demo/trigger.tsx b/components/color-picker/demo/trigger.tsx
index 3f244e8353..0136f8b481 100644
--- a/components/color-picker/demo/trigger.tsx
+++ b/components/color-picker/demo/trigger.tsx
@@ -11,17 +11,17 @@ export default () => {
     [color],
   );
 
+  const divStyle: React.CSSProperties = {
+    width: token.sizeMD,
+    height: token.sizeMD,
+    borderRadius: token.borderRadiusSM,
+    backgroundColor: bgColor,
+  };
+
   return (
     <ColorPicker value={color} onChange={setColor}>
       <Space>
-        <div
-          style={{
-            width: token.sizeMD,
-            height: token.sizeMD,
-            borderRadius: token.borderRadiusSM,
-            backgroundColor: bgColor,
-          }}
-        />
+        <div style={divStyle} />
         <span>{bgColor}</span>
       </Space>
     </ColorPicker>
diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md
index 332299f0bb..f386923ebc 100644
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@@ -20,6 +20,7 @@ Used when the user needs to customize the color selection.
 
 <!-- prettier-ignore -->
 <code src="./demo/base.tsx">Basic Usage</code>
+<code src="./demo/controlled.tsx">controlled mode</code>
 <code src="./demo/disabled.tsx" debug>Disable</code>
 <code src="./demo/allowClear.tsx">Clear Color</code>
 <code src="./demo/trigger.tsx">Custom Trigger</code>
diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md
index 8617d2fa19..76d23d3bf5 100644
--- a/components/color-picker/index.zh-CN.md
+++ b/components/color-picker/index.zh-CN.md
@@ -21,6 +21,7 @@ group:
 
 <!-- prettier-ignore -->
 <code src="./demo/base.tsx">基本使用</code>
+<code src="./demo/controlled.tsx">受控模式</code>
 <code src="./demo/disabled.tsx" debug>禁用</code>
 <code src="./demo/allowClear.tsx">清除颜色</code>
 <code src="./demo/trigger.tsx">自定义触发器</code>