From f45d57720a14842bfeaf1d8e289752ec03c61b4f Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Mon, 17 Feb 2025 18:16:17 +0800
Subject: [PATCH 1/3] feat(color-picker): add color-picker

---
 site/docs.config.js                           |    8 +
 .../__test__/__snapshots__/demo.test.jsx.snap | 1666 +++++++++++++++++
 src/color-picker/__test__/demo.test.jsx       |   27 +
 src/color-picker/color-picker.en-US.md        |   32 +
 src/color-picker/color-picker.md              |   32 +
 src/color-picker/color-picker.tsx             |  404 ++++
 src/color-picker/constants.js                 |    2 +
 src/color-picker/demos/base.vue               |    8 +
 src/color-picker/demos/format.vue             |   83 +
 src/color-picker/demos/mobile.vue             |   25 +
 src/color-picker/demos/multiple.vue           |   12 +
 src/color-picker/demos/use-popup.vue          |   14 +
 src/color-picker/helper.ts                    |   47 +
 src/color-picker/index.ts                     |   12 +
 src/color-picker/props.ts                     |   79 +
 src/color-picker/style/css.js                 |    1 +
 src/color-picker/style/index.js               |    1 +
 src/color-picker/type.ts                      |  118 ++
 src/components.ts                             |    1 +
 19 files changed, 2572 insertions(+)
 create mode 100644 src/color-picker/__test__/__snapshots__/demo.test.jsx.snap
 create mode 100644 src/color-picker/__test__/demo.test.jsx
 create mode 100644 src/color-picker/color-picker.en-US.md
 create mode 100644 src/color-picker/color-picker.md
 create mode 100644 src/color-picker/color-picker.tsx
 create mode 100644 src/color-picker/constants.js
 create mode 100644 src/color-picker/demos/base.vue
 create mode 100644 src/color-picker/demos/format.vue
 create mode 100644 src/color-picker/demos/mobile.vue
 create mode 100644 src/color-picker/demos/multiple.vue
 create mode 100644 src/color-picker/demos/use-popup.vue
 create mode 100644 src/color-picker/helper.ts
 create mode 100644 src/color-picker/index.ts
 create mode 100644 src/color-picker/props.ts
 create mode 100644 src/color-picker/style/css.js
 create mode 100644 src/color-picker/style/index.js
 create mode 100644 src/color-picker/type.ts

diff --git a/site/docs.config.js b/site/docs.config.js
index 06a28ac97..d3ad11aff 100644
--- a/site/docs.config.js
+++ b/site/docs.config.js
@@ -200,6 +200,14 @@ export const docs = [
         component: () => import('@/checkbox/checkbox.md'),
         componentEn: () => import('@/checkbox/checkbox.en-US.md'),
       },
+      {
+        title: 'ColorPicker 颜色选择器',
+        titleEn: 'ColorPicker',
+        name: 'color-picker',
+        path: '/mobile-vue/components/color-picker',
+        component: () => import('@/color-picker/color-picker.md'),
+        componentEn: () => import('@/color-picker/color-picker.en-US.md'),
+      },
       {
         title: 'Input 输入框',
         titleEn: 'Input',
diff --git a/src/color-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/color-picker/__test__/__snapshots__/demo.test.jsx.snap
new file mode 100644
index 000000000..227f4a556
--- /dev/null
+++ b/src/color-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -0,0 +1,1666 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ColorPicker > ColorPicker baseVue demo works fine 1`] = `
+<div
+  class="t-color-picker__panel"
+>
+  <div
+    class="t-color-picker__body t-color-picker__body--base"
+  >
+    <!---->
+    <!---->
+    <!---->
+    <div
+      class="t-color-picker__swatches-wrap"
+    >
+      <div
+        class="t-color-picker__swatches"
+      >
+        <!---->
+        <div
+          class="t-color-picker__swatches-items"
+        >
+          
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(236, 242, 254);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(212, 227, 252);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(187, 211, 251);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(150, 187, 248);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(105, 158, 245);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(71, 135, 240);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(38, 111, 232);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(0, 82, 217);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(0, 52, 181);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(0, 31, 151);"
+            />
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker > ColorPicker formatVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  
+  <div
+    class="format-line"
+    data-v-e4fcdb38=""
+  >
+    
+    <div
+      class="format-item"
+      data-v-e4fcdb38=""
+    >
+      <!--v-if-->
+       CSS
+    </div>
+    <div
+      class="format-item"
+      data-v-e4fcdb38=""
+    >
+      <!--v-if-->
+       HEX
+    </div>
+    <div
+      class="format-item active"
+      data-v-e4fcdb38=""
+    >
+      <svg
+        class="t-icon t-icon-check"
+        data-v-e4fcdb38=""
+        style="position: absolute; left: 2.5px; top: 2.1px; z-index: 1; color: rgb(255, 255, 255);"
+      >
+        <use
+          href="#t-icon-check"
+        />
+      </svg>
+       RGB
+    </div>
+    
+  </div>
+  <div
+    class="format-line"
+    data-v-e4fcdb38=""
+  >
+    
+    <div
+      class="format-item"
+      data-v-e4fcdb38=""
+    >
+      <!--v-if-->
+       HSL
+    </div>
+    <div
+      class="format-item"
+      data-v-e4fcdb38=""
+    >
+      <!--v-if-->
+       HSV
+    </div>
+    <div
+      class="format-item"
+      data-v-e4fcdb38=""
+    >
+      <!--v-if-->
+       CMYK
+    </div>
+    
+  </div>
+  
+  <div
+    class="t-color-picker__panel"
+    data-v-e4fcdb38=""
+  >
+    <div
+      class="t-color-picker__body t-color-picker__body--multiple"
+    >
+      <div
+        class="t-color-picker__saturation"
+        style="background: rgb(255, 0, 0);"
+      >
+        <div
+          class="t-color-picker__thumb"
+          style="left: 0px; top: 0px;"
+        />
+      </div>
+      <div
+        class="t-color-picker__sliders-wrapper"
+      >
+        <div
+          class="t-color-picker__sliders"
+        >
+          <div
+            class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type"
+          >
+            <div
+              class="t-color-picker__slider"
+            >
+              <div
+                class="t-color-picker__rail"
+              />
+              <div
+                class="t-color-picker__thumb"
+                style="left: 0px;"
+              />
+            </div>
+          </div>
+          <!---->
+        </div>
+      </div>
+      <div
+        class="t-color-picker__format"
+      >
+        <div
+          class="t-color-picker__format-item t-color-picker__format-item--first"
+        >
+          RGB
+        </div>
+        <div
+          class="t-color-picker__format-item t-color-picker__format-item--second"
+        >
+          <div
+            class="t-color-picker__format-inputs"
+          >
+            
+            <div
+              class="t-color-picker__format-input t-color-picker__format-input--base"
+            >
+              0
+            </div>
+            <div
+              class="t-color-picker__format-input t-color-picker__format-input--base"
+            >
+              31
+            </div>
+            <div
+              class="t-color-picker__format-input t-color-picker__format-input--base"
+            >
+              151
+            </div>
+            <div
+              class="t-color-picker__format-input t-color-picker__format-input--base"
+            >
+              100%
+            </div>
+            
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-color-picker__swatches-wrap"
+      >
+        <div
+          class="t-color-picker__swatches"
+        >
+          <div
+            class="t-color-picker__swatches-title"
+          >
+            系统预设色彩
+          </div>
+          <div
+            class="t-color-picker__swatches-items"
+          >
+            
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(236, 242, 254);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(212, 227, 252);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(187, 211, 251);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(150, 187, 248);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(105, 158, 245);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(71, 135, 240);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(38, 111, 232);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(0, 82, 217);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(0, 52, 181);"
+              />
+            </div>
+            <div
+              class="t-color-picker__swatches-item"
+            >
+              <div
+                class="t-color-picker__swatches-inner"
+                style="background-color: rgb(0, 31, 151);"
+              />
+            </div>
+            
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`ColorPicker > ColorPicker mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    ColorPicker 选择器
+  </h1>
+  <p
+    class="summary"
+  >
+    用于颜色选择，支持多种格式。
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 组件类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        基础颜色选择器
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="t-color-picker__panel"
+      >
+        <div
+          class="t-color-picker__body t-color-picker__body--base"
+        >
+          <!---->
+          <!---->
+          <!---->
+          <div
+            class="t-color-picker__swatches-wrap"
+          >
+            <div
+              class="t-color-picker__swatches"
+            >
+              <!---->
+              <div
+                class="t-color-picker__swatches-items"
+              >
+                
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(236, 242, 254);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(212, 227, 252);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(187, 211, 251);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(150, 187, 248);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(105, 158, 245);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(71, 135, 240);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(38, 111, 232);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 82, 217);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 52, 181);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 31, 151);"
+                  />
+                </div>
+                
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        带色板的颜色选择器
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="t-color-picker__panel"
+      >
+        <div
+          class="t-color-picker__body t-color-picker__body--multiple"
+        >
+          <div
+            class="t-color-picker__saturation"
+            style="background: rgb(255, 0, 0);"
+          >
+            <div
+              class="t-color-picker__thumb"
+              style="left: 0px; top: 0px;"
+            />
+          </div>
+          <div
+            class="t-color-picker__sliders-wrapper"
+          >
+            <div
+              class="t-color-picker__sliders"
+            >
+              <div
+                class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type"
+              >
+                <div
+                  class="t-color-picker__slider"
+                >
+                  <div
+                    class="t-color-picker__rail"
+                  />
+                  <div
+                    class="t-color-picker__thumb"
+                    style="left: 0px;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--alpha-type"
+              >
+                <div
+                  class="t-color-picker__slider-padding "
+                />
+                <div
+                  class="t-color-picker__slider"
+                >
+                  <div
+                    class="t-color-picker__rail"
+                  />
+                  <div
+                    class="t-color-picker__thumb"
+                    style="left: 0px;"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__format"
+          >
+            <div
+              class="t-color-picker__format-item t-color-picker__format-item--first"
+            >
+              RGB
+            </div>
+            <div
+              class="t-color-picker__format-item t-color-picker__format-item--second"
+            >
+              <div
+                class="t-color-picker__format-inputs"
+              >
+                
+                <div
+                  class="t-color-picker__format-input t-color-picker__format-input--base"
+                >
+                  0
+                </div>
+                <div
+                  class="t-color-picker__format-input t-color-picker__format-input--base"
+                >
+                  31
+                </div>
+                <div
+                  class="t-color-picker__format-input t-color-picker__format-input--base"
+                >
+                  151
+                </div>
+                <div
+                  class="t-color-picker__format-input t-color-picker__format-input--base"
+                >
+                  100%
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__swatches-wrap"
+          >
+            <div
+              class="t-color-picker__swatches"
+            >
+              <div
+                class="t-color-picker__swatches-title"
+              >
+                系统预设色彩
+              </div>
+              <div
+                class="t-color-picker__swatches-items"
+              >
+                
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(236, 242, 254);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(212, 227, 252);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(187, 211, 251);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(150, 187, 248);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(105, 158, 245);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(71, 135, 240);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(38, 111, 232);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 82, 217);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 52, 181);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 31, 151);"
+                  />
+                </div>
+                
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        弹窗形式的颜色选择器
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        style="margin: 0px 20px;"
+      >
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          role="button"
+          t-class="wrapper"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            
+            展示
+            
+          </span>
+          <!---->
+        </button>
+      </div>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-popup t-popup--bottom"
+        style="display: none;"
+      >
+        <!---->
+        
+        <!---->
+        <div
+          class="t-color-picker__panel"
+        >
+          <div
+            class="t-color-picker__body t-color-picker__body--multiple"
+          >
+            <div
+              class="t-color-picker__saturation"
+              style="background: rgb(255, 0, 0);"
+            >
+              <div
+                class="t-color-picker__thumb"
+                style="left: 0px; top: 0px;"
+              />
+            </div>
+            <div
+              class="t-color-picker__sliders-wrapper"
+            >
+              <div
+                class="t-color-picker__sliders"
+              >
+                <div
+                  class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type"
+                >
+                  <div
+                    class="t-color-picker__slider"
+                  >
+                    <div
+                      class="t-color-picker__rail"
+                    />
+                    <div
+                      class="t-color-picker__thumb"
+                      style="left: 0px;"
+                    />
+                  </div>
+                </div>
+                <!---->
+              </div>
+            </div>
+            <div
+              class="t-color-picker__format"
+            >
+              <div
+                class="t-color-picker__format-item t-color-picker__format-item--first"
+              >
+                RGB
+              </div>
+              <div
+                class="t-color-picker__format-item t-color-picker__format-item--second"
+              >
+                <div
+                  class="t-color-picker__format-inputs"
+                >
+                  
+                  <div
+                    class="t-color-picker__format-input t-color-picker__format-input--base"
+                  >
+                    0
+                  </div>
+                  <div
+                    class="t-color-picker__format-input t-color-picker__format-input--base"
+                  >
+                    31
+                  </div>
+                  <div
+                    class="t-color-picker__format-input t-color-picker__format-input--base"
+                  >
+                    151
+                  </div>
+                  <div
+                    class="t-color-picker__format-input t-color-picker__format-input--base"
+                  >
+                    100%
+                  </div>
+                  
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-color-picker__swatches-wrap"
+            >
+              <div
+                class="t-color-picker__swatches"
+              >
+                <div
+                  class="t-color-picker__swatches-title"
+                >
+                  系统预设色彩
+                </div>
+                <div
+                  class="t-color-picker__swatches-items"
+                >
+                  
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(236, 242, 254);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(212, 227, 252);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(187, 211, 251);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(150, 187, 248);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(105, 158, 245);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(71, 135, 240);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(38, 111, 232);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(0, 82, 217);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(0, 52, 181);"
+                    />
+                  </div>
+                  <div
+                    class="t-color-picker__swatches-item"
+                  >
+                    <div
+                      class="t-color-picker__swatches-inner"
+                      style="background-color: rgb(0, 31, 151);"
+                    />
+                  </div>
+                  
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!---->
+        
+      </div>
+      <!--teleport end-->
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        02 组件状态
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        组件模式选择
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      
+      <div
+        class="format-line"
+        data-v-e4fcdb38=""
+      >
+        
+        <div
+          class="format-item"
+          data-v-e4fcdb38=""
+        >
+          <!--v-if-->
+           CSS
+        </div>
+        <div
+          class="format-item"
+          data-v-e4fcdb38=""
+        >
+          <!--v-if-->
+           HEX
+        </div>
+        <div
+          class="format-item active"
+          data-v-e4fcdb38=""
+        >
+          <svg
+            class="t-icon t-icon-check"
+            data-v-e4fcdb38=""
+            style="position: absolute; left: 2.5px; top: 2.1px; z-index: 1; color: rgb(255, 255, 255);"
+          >
+            <use
+              href="#t-icon-check"
+            />
+          </svg>
+           RGB
+        </div>
+        
+      </div>
+      <div
+        class="format-line"
+        data-v-e4fcdb38=""
+      >
+        
+        <div
+          class="format-item"
+          data-v-e4fcdb38=""
+        >
+          <!--v-if-->
+           HSL
+        </div>
+        <div
+          class="format-item"
+          data-v-e4fcdb38=""
+        >
+          <!--v-if-->
+           HSV
+        </div>
+        <div
+          class="format-item"
+          data-v-e4fcdb38=""
+        >
+          <!--v-if-->
+           CMYK
+        </div>
+        
+      </div>
+      
+      <div
+        class="t-color-picker__panel"
+        data-v-e4fcdb38=""
+      >
+        <div
+          class="t-color-picker__body t-color-picker__body--multiple"
+        >
+          <div
+            class="t-color-picker__saturation"
+            style="background: rgb(255, 0, 0);"
+          >
+            <div
+              class="t-color-picker__thumb"
+              style="left: 0px; top: 0px;"
+            />
+          </div>
+          <div
+            class="t-color-picker__sliders-wrapper"
+          >
+            <div
+              class="t-color-picker__sliders"
+            >
+              <div
+                class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type"
+              >
+                <div
+                  class="t-color-picker__slider"
+                >
+                  <div
+                    class="t-color-picker__rail"
+                  />
+                  <div
+                    class="t-color-picker__thumb"
+                    style="left: 0px;"
+                  />
+                </div>
+              </div>
+              <!---->
+            </div>
+          </div>
+          <div
+            class="t-color-picker__format"
+          >
+            <div
+              class="t-color-picker__format-item t-color-picker__format-item--first"
+            >
+              RGB
+            </div>
+            <div
+              class="t-color-picker__format-item t-color-picker__format-item--second"
+            >
+              <div
+                class="t-color-picker__format-inputs"
+              >
+                
+                <div
+                  class="t-color-picker__format-input t-color-picker__format-input--base"
+                >
+                  0
+                </div>
+                <div
+                  class="t-color-picker__format-input t-color-picker__format-input--base"
+                >
+                  31
+                </div>
+                <div
+                  class="t-color-picker__format-input t-color-picker__format-input--base"
+                >
+                  151
+                </div>
+                <div
+                  class="t-color-picker__format-input t-color-picker__format-input--base"
+                >
+                  100%
+                </div>
+                
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__swatches-wrap"
+          >
+            <div
+              class="t-color-picker__swatches"
+            >
+              <div
+                class="t-color-picker__swatches-title"
+              >
+                系统预设色彩
+              </div>
+              <div
+                class="t-color-picker__swatches-items"
+              >
+                
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(236, 242, 254);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(212, 227, 252);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(187, 211, 251);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(150, 187, 248);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(105, 158, 245);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(71, 135, 240);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(38, 111, 232);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 82, 217);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 52, 181);"
+                  />
+                </div>
+                <div
+                  class="t-color-picker__swatches-item"
+                >
+                  <div
+                    class="t-color-picker__swatches-inner"
+                    style="background-color: rgb(0, 31, 151);"
+                  />
+                </div>
+                
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker > ColorPicker multipleVue demo works fine 1`] = `
+<div
+  class="t-color-picker__panel"
+>
+  <div
+    class="t-color-picker__body t-color-picker__body--multiple"
+  >
+    <div
+      class="t-color-picker__saturation"
+      style="background: rgb(255, 0, 0);"
+    >
+      <div
+        class="t-color-picker__thumb"
+        style="left: 0px; top: 0px;"
+      />
+    </div>
+    <div
+      class="t-color-picker__sliders-wrapper"
+    >
+      <div
+        class="t-color-picker__sliders"
+      >
+        <div
+          class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type"
+        >
+          <div
+            class="t-color-picker__slider"
+          >
+            <div
+              class="t-color-picker__rail"
+            />
+            <div
+              class="t-color-picker__thumb"
+              style="left: 0px;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--alpha-type"
+        >
+          <div
+            class="t-color-picker__slider-padding "
+          />
+          <div
+            class="t-color-picker__slider"
+          >
+            <div
+              class="t-color-picker__rail"
+            />
+            <div
+              class="t-color-picker__thumb"
+              style="left: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-color-picker__format"
+    >
+      <div
+        class="t-color-picker__format-item t-color-picker__format-item--first"
+      >
+        RGB
+      </div>
+      <div
+        class="t-color-picker__format-item t-color-picker__format-item--second"
+      >
+        <div
+          class="t-color-picker__format-inputs"
+        >
+          
+          <div
+            class="t-color-picker__format-input t-color-picker__format-input--base"
+          >
+            0
+          </div>
+          <div
+            class="t-color-picker__format-input t-color-picker__format-input--base"
+          >
+            31
+          </div>
+          <div
+            class="t-color-picker__format-input t-color-picker__format-input--base"
+          >
+            151
+          </div>
+          <div
+            class="t-color-picker__format-input t-color-picker__format-input--base"
+          >
+            100%
+          </div>
+          
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-color-picker__swatches-wrap"
+    >
+      <div
+        class="t-color-picker__swatches"
+      >
+        <div
+          class="t-color-picker__swatches-title"
+        >
+          系统预设色彩
+        </div>
+        <div
+          class="t-color-picker__swatches-items"
+        >
+          
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(236, 242, 254);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(212, 227, 252);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(187, 211, 251);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(150, 187, 248);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(105, 158, 245);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(71, 135, 240);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(38, 111, 232);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(0, 82, 217);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(0, 52, 181);"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches-item"
+          >
+            <div
+              class="t-color-picker__swatches-inner"
+              style="background-color: rgb(0, 31, 151);"
+            />
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker > ColorPicker usePopupVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    style="margin: 0px 20px;"
+  >
+    <button
+      aria-disabled="false"
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      role="button"
+      t-class="wrapper"
+      type="button"
+    >
+      <!---->
+      <span
+        class="t-button__content"
+      >
+        
+        展示
+        
+      </span>
+      <!---->
+    </button>
+  </div>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-popup t-popup--bottom"
+    style="display: none;"
+  >
+    <!---->
+    
+    <!---->
+    <div
+      class="t-color-picker__panel"
+    >
+      <div
+        class="t-color-picker__body t-color-picker__body--multiple"
+      >
+        <div
+          class="t-color-picker__saturation"
+          style="background: rgb(255, 0, 0);"
+        >
+          <div
+            class="t-color-picker__thumb"
+            style="left: 0px; top: 0px;"
+          />
+        </div>
+        <div
+          class="t-color-picker__sliders-wrapper"
+        >
+          <div
+            class="t-color-picker__sliders"
+          >
+            <div
+              class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type"
+            >
+              <div
+                class="t-color-picker__slider"
+              >
+                <div
+                  class="t-color-picker__rail"
+                />
+                <div
+                  class="t-color-picker__thumb"
+                  style="left: 0px;"
+                />
+              </div>
+            </div>
+            <!---->
+          </div>
+        </div>
+        <div
+          class="t-color-picker__format"
+        >
+          <div
+            class="t-color-picker__format-item t-color-picker__format-item--first"
+          >
+            RGB
+          </div>
+          <div
+            class="t-color-picker__format-item t-color-picker__format-item--second"
+          >
+            <div
+              class="t-color-picker__format-inputs"
+            >
+              
+              <div
+                class="t-color-picker__format-input t-color-picker__format-input--base"
+              >
+                0
+              </div>
+              <div
+                class="t-color-picker__format-input t-color-picker__format-input--base"
+              >
+                31
+              </div>
+              <div
+                class="t-color-picker__format-input t-color-picker__format-input--base"
+              >
+                151
+              </div>
+              <div
+                class="t-color-picker__format-input t-color-picker__format-input--base"
+              >
+                100%
+              </div>
+              
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__swatches-wrap"
+        >
+          <div
+            class="t-color-picker__swatches"
+          >
+            <div
+              class="t-color-picker__swatches-title"
+            >
+              系统预设色彩
+            </div>
+            <div
+              class="t-color-picker__swatches-items"
+            >
+              
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(236, 242, 254);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(212, 227, 252);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(187, 211, 251);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(150, 187, 248);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(105, 158, 245);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(71, 135, 240);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(38, 111, 232);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(0, 82, 217);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(0, 52, 181);"
+                />
+              </div>
+              <div
+                class="t-color-picker__swatches-item"
+              >
+                <div
+                  class="t-color-picker__swatches-inner"
+                  style="background-color: rgb(0, 31, 151);"
+                />
+              </div>
+              
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!---->
+    
+  </div>
+  <!--teleport end-->
+  
+</div>
+`;
diff --git a/src/color-picker/__test__/demo.test.jsx b/src/color-picker/__test__/demo.test.jsx
new file mode 100644
index 000000000..2cae842ff
--- /dev/null
+++ b/src/color-picker/__test__/demo.test.jsx
@@ -0,0 +1,27 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import { mount } from '@vue/test-utils';
+import baseVue from '@/color-picker/demos/base.vue';
+import formatVue from '@/color-picker/demos/format.vue';
+import mobileVue from '@/color-picker/demos/mobile.vue';
+import multipleVue from '@/color-picker/demos/multiple.vue';
+import usePopupVue from '@/color-picker/demos/use-popup.vue';
+
+const mapper = {
+  baseVue,
+  formatVue,
+  mobileVue,
+  multipleVue,
+  usePopupVue,
+};
+
+describe('ColorPicker', () => {
+  Object.keys(mapper).forEach((demoName) => {
+    it(`ColorPicker ${demoName} demo works fine`, () => {
+      const wrapper = mount(mapper[demoName]);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md
new file mode 100644
index 000000000..c107c2e5e
--- /dev/null
+++ b/src/color-picker/color-picker.en-US.md
@@ -0,0 +1,32 @@
+:: BASE_DOC ::
+
+## API
+
+### ColorPicker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+autoClose | Boolean | true | \- | N
+clearable | Boolean | false | \- | N
+enableAlpha | Boolean | false | \- | N
+footer | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+header | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+popupProps | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
+swatchColors | Array | - | swatch colors。Typescript：`Array<string> \| null` | N
+type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
+usePopup | Boolean | false | \- | N
+value | String | - | color value。`v-model` and `v-model:value` is supported | N
+defaultValue | String | - | color value。uncontrolled property | N
+visible | Boolean | false | \- | N
+onChange | Function |  | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/> | N
+onClose | Function |  | Typescript：`(trigger: ColorPickerTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/> | N
+onPaletteBarChange | Function |  | Typescript：`(context: { color: ColorObject }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/> | N
+
+### ColorPicker Events
+
+name | params | description
+-- | -- | --
+change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/>
+close | `(trigger: ColorPickerTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md
new file mode 100644
index 000000000..41caa9440
--- /dev/null
+++ b/src/color-picker/color-picker.md
@@ -0,0 +1,32 @@
+:: BASE_DOC ::
+
+## API
+
+### ColorPicker Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+autoClose | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
+clearable | Boolean | false | 是否可清空 | N
+enableAlpha | Boolean | false | 是否开启透明通道 | N
+footer | Slot / Function | - | 底部插槽，仅在 `usePopup` 为 `true` 时有效。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+header | Slot / Function | - | 顶部插槽，仅在 `usePopup` 为 `true` 时有效。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+popupProps | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
+swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null` | N
+type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
+usePopup | Boolean | false | 是否使用弹出层包裹颜色选择器 | N
+value | String | - | 色值。支持语法糖 `v-model` 或 `v-model:value` | N
+defaultValue | String | - | 色值。非受控属性 | N
+visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N
+onChange | Function |  | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/> | N
+onClose | Function |  | TS 类型：`(trigger: ColorPickerTrigger) => void`<br/>关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/> | N
+onPaletteBarChange | Function |  | TS 类型：`(context: { color: ColorObject }) => void`<br/>调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/> | N
+
+### ColorPicker Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/>
+close | `(trigger: ColorPickerTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>
diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx
new file mode 100644
index 000000000..df1fa0e74
--- /dev/null
+++ b/src/color-picker/color-picker.tsx
@@ -0,0 +1,404 @@
+import { defineComponent, ref, watch, computed, onMounted } from 'vue';
+import props from './props';
+import config from '../config';
+import { Popup as TPopup } from '../popup';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
+import type { ColorPickerTrigger, ColorPickerChangeTrigger } from './type';
+import { usePrefixClass } from '../hooks/useClass';
+import { getFormatList, genSwatchList, getCoordinate } from './helper';
+import { Color, getColorObject } from '../_common/js/color-picker';
+import {
+  SATURATION_PANEL_DEFAULT_HEIGHT,
+  SATURATION_PANEL_DEFAULT_WIDTH,
+  SLIDER_DEFAULT_WIDTH,
+  DEFAULT_COLOR,
+} from '../_common/js/color-picker/constants';
+import { ALPHA_MAX, HUE_MAX } from './constants';
+
+const { prefix } = config;
+
+export default defineComponent({
+  name: `${prefix}-color-picker`,
+  components: {
+    TPopup,
+  },
+  props,
+  setup(props, { slots }) {
+    const colorPickerClass = usePrefixClass('color-picker');
+    const innerVisible = ref(props.visible);
+    const panelRect = ref<HTMLElement>();
+    const hueSliderRect = ref<HTMLElement>();
+    const alphaSliderRect = ref<HTMLElement>();
+    const innerValue = ref(props.value);
+
+    const saturationThumbStyle = ref({
+      left: '0',
+      top: '0',
+    });
+    const hueSliderStyle = ref({
+      left: '0',
+      color: '',
+    });
+    const alphaSliderStyle = ref({
+      left: '0',
+      color: '',
+    });
+    const sliderInfo = ref({
+      value: 0,
+    });
+    const saturationInfo = ref({
+      saturation: 0,
+      value: 0,
+    });
+    const color = new Color(props.defaultValue || props.value || DEFAULT_COLOR);
+    const formatList = ref(getFormatList(props.format, color));
+    const innerSwatchList = computed(() => genSwatchList(props.swatchColors));
+
+    watch(
+      () => props.visible,
+      (value) => {
+        innerVisible.value = value;
+      },
+    );
+
+    const renderTNodeJSX = useTNodeJSX();
+    const close = (trigger: ColorPickerTrigger) => {
+      if (props.autoClose) {
+        innerVisible.value = false;
+      }
+
+      props.onClose(trigger);
+    };
+
+    const onVisibleChange = (visible: boolean, trigger: ColorPickerTrigger) => {
+      if (!visible) {
+        close(trigger);
+      }
+    };
+
+    const getSliderThumbStyle = ({
+      value,
+      maxValue,
+      isAlpha,
+    }: {
+      value: number;
+      maxValue: number;
+      isAlpha?: boolean;
+    }) => {
+      const dom = isAlpha ? alphaSliderRect.value : hueSliderRect.value;
+      const { width } = dom.getBoundingClientRect();
+      if (!width) {
+        return;
+      }
+
+      const left = Math.round((value / maxValue) * 100);
+
+      return {
+        left: `${left}%`,
+        color: color.rgb,
+      };
+    };
+
+    const getSaturationThumbStyle = ({ saturation, value }: { saturation: number; value: number }) => {
+      const { width, height } = panelRect.value.getBoundingClientRect();
+      const top = Math.round((1 - value) * height);
+      const left = Math.round(saturation * width);
+
+      return {
+        color: color.rgb,
+        left: `${left}px`,
+        top: `${top}px`,
+      };
+    };
+
+    const setCoreStyle = () => {
+      sliderInfo.value = { value: color.hue };
+      formatList.value = getFormatList(props.format, color);
+      if (isMultiple.value) {
+        const hue = getSliderThumbStyle({ value: color.hue, maxValue: HUE_MAX, isAlpha: false });
+        if (hue) {
+          hueSliderStyle.value = hue;
+        }
+        const alpha = getSliderThumbStyle({ value: color.alpha * 100, maxValue: ALPHA_MAX, isAlpha: false });
+        if (alpha) {
+          alphaSliderStyle.value = alpha;
+        }
+
+        saturationInfo.value = {
+          saturation: color.saturation,
+          value: color.value,
+        };
+        saturationThumbStyle.value = getSaturationThumbStyle({
+          saturation: color.saturation,
+          value: color.value,
+        });
+      }
+    };
+    const formatValue = () => {
+      return color.getFormatsColorMap()[props.format] || color.css;
+    };
+
+    const emitColorChange = (trigger: ColorPickerChangeTrigger) => {
+      props.onChange?.(formatValue(), {
+        trigger,
+        color: getColorObject(color),
+      });
+    };
+
+    const clickSwatch = (swatch: string) => {
+      color.update(swatch);
+      emitColorChange('preset');
+      setCoreStyle();
+    };
+    const isMultiple = computed(() => {
+      return props.type === 'multiple';
+    });
+
+    const getSaturationAndValueByCoordinate = (coordinate: { x: number; y: number }) => {
+      const { width, height } = panelRect.value.getBoundingClientRect();
+      const { x, y } = coordinate;
+      let saturation = x / width;
+      let value = 1 - y / height;
+      saturation = Math.min(1, Math.max(0, saturation));
+      value = Math.min(1, Math.max(0, value));
+
+      return {
+        saturation,
+        value,
+      };
+    };
+
+    const onChangeSaturation = ({ saturation, value }: { saturation: number; value: number }) => {
+      const { saturation: sat, value: val } = color;
+      let changeTrigger: ColorPickerChangeTrigger = 'palette-saturation-brightness';
+      if (value !== val && saturation !== sat) {
+        color.saturation = saturation;
+        color.value = value;
+        changeTrigger = 'palette-saturation-brightness';
+      } else if (saturation !== sat) {
+        color.saturation = saturation;
+        changeTrigger = 'palette-saturation';
+      } else if (value !== val) {
+        color.value = value;
+        changeTrigger = 'palette-brightness';
+      } else {
+        return;
+      }
+
+      props.onPaletteBarChange?.({
+        color: getColorObject(color),
+      });
+
+      emitColorChange(changeTrigger);
+      setCoreStyle();
+    };
+
+    const handleSaturationDrag = (e: TouchEvent) => {
+      const coordinate = getCoordinate(e, panelRect.value.getBoundingClientRect());
+
+      const { saturation, value } = getSaturationAndValueByCoordinate(coordinate);
+
+      onChangeSaturation({ saturation, value });
+    };
+
+    const onChangeSlider = ({ value, isAlpha }: { value: number; isAlpha: boolean }) => {
+      if (isAlpha) {
+        color.alpha = value / 100;
+      } else {
+        color.hue = value;
+      }
+
+      emitColorChange(isAlpha ? 'palette-alpha-bar' : 'palette-hue-bar');
+
+      setCoreStyle();
+    };
+
+    const handleSliderDrag = (e: TouchEvent, isAlpha = false) => {
+      const dom = isAlpha ? alphaSliderRect.value : hueSliderRect.value;
+      const rect = dom.getBoundingClientRect();
+
+      const { width } = rect;
+      const coordinate = getCoordinate(e, rect);
+      const { x } = coordinate;
+      const maxValue = isAlpha ? ALPHA_MAX : HUE_MAX;
+
+      let value = Math.round((x / width) * maxValue * 100) / 100;
+      if (value < 0) value = 0;
+      if (value > maxValue) value = maxValue;
+      onChangeSlider({ value, isAlpha });
+    };
+
+    const handleDiffDrag = (e: TouchEvent, dragType: string) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      switch (dragType) {
+        case 'saturation':
+          handleSaturationDrag(e);
+          break;
+        case 'hue-slider':
+          handleSliderDrag(e);
+          break;
+        case 'alpha-slider':
+          handleSliderDrag(e, true);
+          break;
+        default:
+          break;
+      }
+    };
+
+    const onTouchStart = (e: TouchEvent, dragType: string) => {
+      handleDiffDrag(e, dragType);
+    };
+
+    const onTouchMove = (e: TouchEvent, dragType: string) => {
+      handleDiffDrag(e, dragType);
+    };
+
+    const onTouchEnd = (e: TouchEvent, dragType: string) => {
+      handleDiffDrag(e, dragType);
+    };
+
+    const updateColor = () => {
+      const result = innerValue.value || DEFAULT_COLOR;
+      color.update(result);
+    };
+
+    const init = () => {
+      updateColor();
+      setCoreStyle();
+    };
+
+    onMounted(() => {
+      init();
+    });
+
+    return () => {
+      const { usePopup, type, popupProps, format, enableAlpha } = props;
+
+      const header = renderTNodeJSX('header');
+      const footer = renderTNodeJSX('footer');
+
+      const inner = (
+        <div class={`${colorPickerClass.value}__panel`}>
+          <div class={`${colorPickerClass.value}__body ${colorPickerClass.value}__body--${type}`}>
+            {isMultiple.value && (
+              <div
+                ref={panelRect}
+                class={`${colorPickerClass.value}__saturation`}
+                style={{ background: `hsl(${sliderInfo.value.value}, 100%, 50%)` }}
+                onTouchstart={(e) => onTouchStart(e, 'saturation')}
+                onTouchmove={(e) => onTouchMove(e, 'saturation')}
+                onTouchend={(e) => onTouchEnd(e, 'saturation')}
+              >
+                <div class={`${colorPickerClass.value}__thumb`} style={saturationThumbStyle.value}></div>
+              </div>
+            )}
+
+            {isMultiple.value && (
+              <div class={`${colorPickerClass.value}__sliders-wrapper`}>
+                <div class={`${colorPickerClass.value}__sliders`}>
+                  <div
+                    class={`${colorPickerClass.value}__slider-wrapper ${colorPickerClass.value}__slider-wrapper--hue-type`}
+                  >
+                    <div
+                      class={`${colorPickerClass.value}__slider`}
+                      ref={hueSliderRect}
+                      onTouchstart={(e) => onTouchStart(e, 'hue-slider')}
+                      onTouchmove={(e) => onTouchMove(e, 'hue-slider')}
+                      onTouchend={(e) => onTouchEnd(e, 'hue-slider')}
+                    >
+                      <div class={`${colorPickerClass.value}__rail`}></div>
+                      <div class={`${colorPickerClass.value}__thumb`} style={hueSliderStyle.value}></div>
+                    </div>
+                  </div>
+
+                  {enableAlpha && (
+                    <div
+                      class={`${colorPickerClass.value}__slider-wrapper ${colorPickerClass.value}__slider-wrapper--alpha-type`}
+                    >
+                      <div class={`${colorPickerClass.value}__slider-padding `}></div>
+                      <div
+                        class={`${colorPickerClass.value}__slider`}
+                        ref={alphaSliderRect}
+                        onTouchstart={(e) => onTouchStart(e, 'alpha-slider')}
+                        onTouchmove={(e) => onTouchMove(e, 'alpha-slider')}
+                        onTouchend={(e) => onTouchEnd(e, 'alpha-slider')}
+                      >
+                        <div
+                          class={`${colorPickerClass.value}__rail`}
+                          style={{
+                            background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${alphaSliderStyle.value?.color})`,
+                          }}
+                        ></div>
+                        <div class={`${colorPickerClass.value}__thumb`} style={alphaSliderStyle.value}></div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* {showPreview && (
+                  <div class={`${colorPickerClass.value}__sliders-preview ${colorPickerClass.value}--bg-alpha`}>
+                    <div class={`${colorPickerClass.value}__sliders-preview-inner`}></div>
+                  </div>
+                )} */}
+              </div>
+            )}
+
+            {isMultiple.value && (
+              <div class={`${colorPickerClass.value}__format`}>
+                <div class={`${colorPickerClass.value}__format-item ${colorPickerClass.value}__format-item--first`}>
+                  {format}
+                </div>
+                <div class={`${colorPickerClass.value}__format-item ${colorPickerClass.value}__format-item--second`}>
+                  <div class={`${colorPickerClass.value}__format-inputs`}>
+                    {formatList.value.map((formatItem, formatIndex) => (
+                      <div
+                        class={`${colorPickerClass.value}__format-input ${colorPickerClass.value}__format-input--${formatIndex === formatList.value.length - 1 && formatList.value.length === 2 ? 'fixed' : 'base'}`}
+                        key={formatIndex}
+                      >
+                        {formatItem}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {innerSwatchList.value.length && (
+              <div class={`${colorPickerClass.value}__swatches-wrap`}>
+                <div class={`${colorPickerClass.value}__swatches`}>
+                  {isMultiple.value && <div class={`${colorPickerClass.value}__swatches-title`}>系统预设色彩</div>}
+                  <div class={`${colorPickerClass.value}__swatches-items`}>
+                    {innerSwatchList.value.map((swatch) => (
+                      <div
+                        class={`${colorPickerClass.value}__swatches-item`}
+                        key={swatch}
+                        onClick={() => clickSwatch(swatch)}
+                      >
+                        <div
+                          class={`${colorPickerClass.value}__swatches-inner`}
+                          style={{ backgroundColor: swatch }}
+                        ></div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      );
+      if (usePopup) {
+        return (
+          <t-popup {...popupProps} visible={innerVisible.value} placement="bottom" onVisibleChange={onVisibleChange}>
+            {header}
+            {inner}
+            {footer}
+          </t-popup>
+        );
+      }
+      return inner;
+    };
+  },
+});
diff --git a/src/color-picker/constants.js b/src/color-picker/constants.js
new file mode 100644
index 000000000..6d55a2b22
--- /dev/null
+++ b/src/color-picker/constants.js
@@ -0,0 +1,2 @@
+export const HUE_MAX = 360;
+export const ALPHA_MAX = 100;
diff --git a/src/color-picker/demos/base.vue b/src/color-picker/demos/base.vue
new file mode 100644
index 000000000..13cce58e9
--- /dev/null
+++ b/src/color-picker/demos/base.vue
@@ -0,0 +1,8 @@
+<template>
+  <t-color-picker @change="onChange" />
+</template>
+<script setup lang="ts">
+const onChange = (val: string, context: { color: any; trigger: string }) => {
+  console.log('change: ', val, context);
+};
+</script>
diff --git a/src/color-picker/demos/format.vue b/src/color-picker/demos/format.vue
new file mode 100644
index 000000000..c2c61cbb6
--- /dev/null
+++ b/src/color-picker/demos/format.vue
@@ -0,0 +1,83 @@
+<template>
+  <div v-for="(line, lineIndex) of lineList" :key="lineIndex" class="format-line">
+    <div
+      v-for="item of line"
+      :key="item"
+      class="format-item"
+      :class="curFormat === item ? 'active' : ''"
+      @click.stop="clickFormat(item)"
+    >
+      <t-icon
+        v-if="curFormat === item"
+        name="check"
+        size="14"
+        style="position: absolute; left: 2.5px; top: 2.1px; z-index: 1; color: #fff"
+      />
+      {{ item }}
+    </div>
+  </div>
+  <t-color-picker type="multiple" :format="curFormat" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const curFormat = ref('RGB');
+const lineList = [
+  ['CSS', 'HEX', 'RGB'],
+  ['HSL', 'HSV', 'CMYK'],
+];
+const clickFormat = (val: string) => {
+  curFormat.value = val;
+};
+</script>
+<style scoped>
+:root {
+  --press-color-picker-panel-width: 100%;
+}
+
+.format-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  margin: 0 16px 20px;
+}
+
+.format-item {
+  border-radius: 6px;
+  height: 100%;
+  background-color: #fff;
+  padding: 16px;
+  line-height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.format-item.active {
+  border: 1px solid #0052d9;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 0;
+    top: 0;
+    border-top-left-radius: 6px;
+    border-top: 28px solid #0052d9;
+    border-right: 28px solid transparent;
+    border-radius: 0;
+  }
+}
+
+.format-item:not(:last-child) {
+  margin-right: 12px;
+}
+</style>
diff --git a/src/color-picker/demos/mobile.vue b/src/color-picker/demos/mobile.vue
new file mode 100644
index 000000000..81fb5c7c5
--- /dev/null
+++ b/src/color-picker/demos/mobile.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="tdesign-mobile-demo">
+    <h1 class="title">ColorPicker 选择器</h1>
+    <p class="summary">用于颜色选择，支持多种格式。</p>
+    <tdesign-demo-block title="01 组件类型" summary="基础颜色选择器">
+      <baseVue />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="带色板的颜色选择器">
+      <multipleVue />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="弹窗形式的颜色选择器">
+      <usePopup />
+    </tdesign-demo-block>
+    <tdesign-demo-block title="02 组件状态" summary="组件模式选择">
+      <formatVue />
+    </tdesign-demo-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import baseVue from './base.vue';
+import multipleVue from './multiple.vue';
+import usePopup from './use-popup.vue';
+import formatVue from './format.vue';
+</script>
diff --git a/src/color-picker/demos/multiple.vue b/src/color-picker/demos/multiple.vue
new file mode 100644
index 000000000..f5b2daccb
--- /dev/null
+++ b/src/color-picker/demos/multiple.vue
@@ -0,0 +1,12 @@
+<template>
+  <t-color-picker enable-alpha type="multiple" @change="onChange" @palette-bar-change="onPaletteBarChange" />
+</template>
+
+<script setup lang="ts">
+const onChange = (val: string, context: { color: any; trigger: string }) => {
+  console.log('change: ', val, context);
+};
+const onPaletteBarChange = (context: { color: any }) => {
+  console.log('palette bar change: ', context);
+};
+</script>
diff --git a/src/color-picker/demos/use-popup.vue b/src/color-picker/demos/use-popup.vue
new file mode 100644
index 000000000..2884c5cca
--- /dev/null
+++ b/src/color-picker/demos/use-popup.vue
@@ -0,0 +1,14 @@
+<template>
+  <div style="margin: 0 20px">
+    <t-button block theme="primary" size="large" variant="outline" t-class="wrapper" @click="onShow">展示</t-button>
+  </div>
+  <t-color-picker use-popup :visible="visible" type="multiple" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const visible = ref(false);
+const onShow = () => {
+  visible.value = true;
+};
+</script>
diff --git a/src/color-picker/helper.ts b/src/color-picker/helper.ts
new file mode 100644
index 000000000..fc6fa1fb8
--- /dev/null
+++ b/src/color-picker/helper.ts
@@ -0,0 +1,47 @@
+import { Color } from '../_common/js/color-picker';
+import { DEFAULT_SYSTEM_SWATCH_COLORS } from '../_common/js/color-picker/constants';
+import type { TdColorPickerProps as ColorPickerProps } from './type';
+
+export const getCoordinate = (e: TouchEvent, rect: DOMRect, isFixed?: boolean) => {
+  const { pageX, pageY, clientY } = e?.changedTouches?.[0] || {};
+  const offsetY = isFixed ? rect.top : (e.target as HTMLElement).offsetTop;
+  const offsetX = isFixed ? rect.left : (e.target as HTMLElement).offsetLeft;
+  return {
+    x: Math.min(Math.max(0, pageX - rect.left), rect.width),
+    y: Math.min(Math.max(0, (isFixed ? clientY : pageY) - rect.top), rect.height),
+  };
+};
+
+export const getFormatList = (format: ColorPickerProps['format'], color: Color) => {
+  const FORMAT_MAP = {
+    HSV: Object.values(color.getHsva()),
+    HSVA: Object.values(color.getHsva()),
+
+    HSL: Object.values(color.getHsla()),
+    HSLA: Object.values(color.getHsla()),
+    HSB: Object.values(color.getHsla()),
+
+    RGB: Object.values(color.getRgba()),
+    RGBA: Object.values(color.getRgba()),
+    CMYK: [...Object.values(color.getCmyk()), 0],
+
+    CSS: [color.css, 0],
+    HEX: [color.hex, 0],
+  };
+
+  const cur = FORMAT_MAP[format];
+  if (cur) {
+    return [...cur.slice(0, cur.length - 1), `${Math.round(color.alpha * 100)}%`];
+  }
+  return FORMAT_MAP.RGB;
+};
+
+export const genSwatchList = (prop: ColorPickerProps['swatchColors']) => {
+  if (prop === undefined) {
+    return DEFAULT_SYSTEM_SWATCH_COLORS.slice(0, 10);
+  }
+  if (!prop || !prop.length) {
+    return [];
+  }
+  return prop;
+};
diff --git a/src/color-picker/index.ts b/src/color-picker/index.ts
new file mode 100644
index 000000000..91b6fb332
--- /dev/null
+++ b/src/color-picker/index.ts
@@ -0,0 +1,12 @@
+import _ColorPicker from './color-picker';
+import { withInstall, WithInstallType } from '../shared';
+
+import './style';
+
+import { TdColorPickerProps } from './type';
+
+export * from './type';
+export type ColorPickerProps = TdColorPickerProps;
+
+export const ColorPicker: WithInstallType<typeof _ColorPicker> = withInstall(_ColorPicker);
+export default ColorPicker;
diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts
new file mode 100644
index 000000000..96e068238
--- /dev/null
+++ b/src/color-picker/props.ts
@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdColorPickerProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible */
+  autoClose: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否可清空 */
+  clearable: Boolean,
+  /** 是否开启透明通道 */
+  enableAlpha: Boolean,
+  /** 底部插槽，仅在 `usePopup` 为 `true` 时有效 */
+  footer: {
+    type: Function as PropType<TdColorPickerProps['footer']>,
+  },
+  /** 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 */
+  format: {
+    type: String as PropType<TdColorPickerProps['format']>,
+    default: 'RGB' as TdColorPickerProps['format'],
+    validator(val: TdColorPickerProps['format']): boolean {
+      if (!val) return true;
+      return ['RGB', 'RGBA', 'HSL', 'HSLA', 'HSB', 'HSV', 'HSVA', 'HEX', 'CMYK', 'CSS'].includes(val);
+    },
+  },
+  /** 顶部插槽，仅在 `usePopup` 为 `true` 时有效 */
+  header: {
+    type: Function as PropType<TdColorPickerProps['header']>,
+  },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object as PropType<TdColorPickerProps['popupProps']>,
+    default: () => ({}),
+  },
+  /** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */
+  swatchColors: {
+    type: Array as PropType<TdColorPickerProps['swatchColors']>,
+  },
+  /** 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容 */
+  type: {
+    type: String as PropType<TdColorPickerProps['type']>,
+    default: 'base' as TdColorPickerProps['type'],
+    validator(val: TdColorPickerProps['type']): boolean {
+      if (!val) return true;
+      return ['base', 'multiple'].includes(val);
+    },
+  },
+  /** 是否使用弹出层包裹颜色选择器 */
+  usePopup: Boolean,
+  /** 色值 */
+  value: {
+    type: String,
+    default: undefined,
+  },
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  /** 色值，非受控属性 */
+  defaultValue: {
+    type: String,
+    default: '',
+  },
+  /** 是否显示颜色选择器。`usePopup` 为 true 时有效 */
+  visible: Boolean,
+  /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */
+  onChange: Function as PropType<TdColorPickerProps['onChange']>,
+  /** 关闭按钮时触发 */
+  onClose: Function as PropType<TdColorPickerProps['onClose']>,
+  /** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */
+  onPaletteBarChange: Function as PropType<TdColorPickerProps['onPaletteBarChange']>,
+};
diff --git a/src/color-picker/style/css.js b/src/color-picker/style/css.js
new file mode 100644
index 000000000..6a9a4b132
--- /dev/null
+++ b/src/color-picker/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/color-picker/style/index.js b/src/color-picker/style/index.js
new file mode 100644
index 000000000..3f0bdefc7
--- /dev/null
+++ b/src/color-picker/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/color-picker/_index.less';
diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts
new file mode 100644
index 000000000..917f04cfc
--- /dev/null
+++ b/src/color-picker/type.ts
@@ -0,0 +1,118 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { PopupProps } from '../popup';
+import { TNode } from '../common';
+
+export interface TdColorPickerProps {
+  /**
+   * 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible
+   * @default true
+   */
+  autoClose?: boolean;
+  /**
+   * 是否可清空
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * 是否开启透明通道
+   * @default false
+   */
+  enableAlpha?: boolean;
+  /**
+   * 底部插槽，仅在 `usePopup` 为 `true` 时有效
+   */
+  footer?: TNode;
+  /**
+   * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效
+   * @default RGB
+   */
+  format?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS';
+  /**
+   * 顶部插槽，仅在 `usePopup` 为 `true` 时有效
+   */
+  header?: TNode;
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
+  /**
+   * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
+   */
+  swatchColors?: Array<string> | null;
+  /**
+   * 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容
+   * @default base
+   */
+  type?: TypeEnum;
+  /**
+   * 是否使用弹出层包裹颜色选择器
+   * @default false
+   */
+  usePopup?: boolean;
+  /**
+   * 色值
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 色值，非受控属性
+   * @default ''
+   */
+  defaultValue?: string;
+  /**
+   * 色值
+   * @default ''
+   */
+  modelValue?: string;
+  /**
+   * 是否显示颜色选择器。`usePopup` 为 true 时有效
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
+   */
+  onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void;
+  /**
+   * 关闭按钮时触发
+   */
+  onClose?: (trigger: ColorPickerTrigger) => void;
+  /**
+   * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值
+   */
+  onPaletteBarChange?: (context: { color: ColorObject }) => void;
+}
+
+export type TypeEnum = 'base' | 'multiple';
+
+export type ColorPickerChangeTrigger =
+  | 'palette-saturation-brightness'
+  | 'palette-saturation'
+  | 'palette-brightness'
+  | 'palette-hue-bar'
+  | 'palette-alpha-bar'
+  | 'input'
+  | 'preset'
+  | 'recent';
+
+export type ColorPickerTrigger = 'overlay';
+
+export interface ColorObject {
+  alpha: number;
+  css: string;
+  hex: string;
+  hex8: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+  rgb: string;
+  rgba: string;
+  value: number;
+}
diff --git a/src/components.ts b/src/components.ts
index 663cde5b2..2ad300765 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -20,6 +20,7 @@ export * from './tabs';
 export * from './calendar';
 export * from './cascader';
 export * from './checkbox';
+export * from './color-picker';
 export * from './date-time-picker';
 export * from './form';
 export * from './input';

From c7ebfcd5be38f8b55f11f5209b5742e79a0f9208 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Mon, 17 Feb 2025 19:14:16 +0800
Subject: [PATCH 2/3] chore(color-picker): lint

---
 src/color-picker/color-picker.tsx             | 28 ++++---------------
 .../{constants.js => constants.ts}            |  0
 src/color-picker/helper.ts                    |  2 --
 3 files changed, 6 insertions(+), 24 deletions(-)
 rename src/color-picker/{constants.js => constants.ts} (100%)

diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx
index df1fa0e74..fc0766f1e 100644
--- a/src/color-picker/color-picker.tsx
+++ b/src/color-picker/color-picker.tsx
@@ -1,18 +1,13 @@
-import { defineComponent, ref, watch, computed, onMounted } from 'vue';
+import { defineComponent, ref, watch, computed, onMounted, nextTick } from 'vue';
 import props from './props';
 import config from '../config';
 import { Popup as TPopup } from '../popup';
-import { useTNodeJSX, useContent } from '../hooks/tnode';
+import { useTNodeJSX } from '../hooks/tnode';
 import type { ColorPickerTrigger, ColorPickerChangeTrigger } from './type';
 import { usePrefixClass } from '../hooks/useClass';
 import { getFormatList, genSwatchList, getCoordinate } from './helper';
 import { Color, getColorObject } from '../_common/js/color-picker';
-import {
-  SATURATION_PANEL_DEFAULT_HEIGHT,
-  SATURATION_PANEL_DEFAULT_WIDTH,
-  SLIDER_DEFAULT_WIDTH,
-  DEFAULT_COLOR,
-} from '../_common/js/color-picker/constants';
+import { DEFAULT_COLOR } from '../_common/js/color-picker/constants';
 import { ALPHA_MAX, HUE_MAX } from './constants';
 
 const { prefix } = config;
@@ -46,10 +41,6 @@ export default defineComponent({
     const sliderInfo = ref({
       value: 0,
     });
-    const saturationInfo = ref({
-      saturation: 0,
-      value: 0,
-    });
     const color = new Color(props.defaultValue || props.value || DEFAULT_COLOR);
     const formatList = ref(getFormatList(props.format, color));
     const innerSwatchList = computed(() => genSwatchList(props.swatchColors));
@@ -58,6 +49,9 @@ export default defineComponent({
       () => props.visible,
       (value) => {
         innerVisible.value = value;
+        nextTick(() => {
+          init();
+        });
       },
     );
 
@@ -124,10 +118,6 @@ export default defineComponent({
           alphaSliderStyle.value = alpha;
         }
 
-        saturationInfo.value = {
-          saturation: color.saturation,
-          value: color.value,
-        };
         saturationThumbStyle.value = getSaturationThumbStyle({
           saturation: color.saturation,
           value: color.value,
@@ -336,12 +326,6 @@ export default defineComponent({
                     </div>
                   )}
                 </div>
-
-                {/* {showPreview && (
-                  <div class={`${colorPickerClass.value}__sliders-preview ${colorPickerClass.value}--bg-alpha`}>
-                    <div class={`${colorPickerClass.value}__sliders-preview-inner`}></div>
-                  </div>
-                )} */}
               </div>
             )}
 
diff --git a/src/color-picker/constants.js b/src/color-picker/constants.ts
similarity index 100%
rename from src/color-picker/constants.js
rename to src/color-picker/constants.ts
diff --git a/src/color-picker/helper.ts b/src/color-picker/helper.ts
index fc6fa1fb8..53ce8d4ac 100644
--- a/src/color-picker/helper.ts
+++ b/src/color-picker/helper.ts
@@ -4,8 +4,6 @@ import type { TdColorPickerProps as ColorPickerProps } from './type';
 
 export const getCoordinate = (e: TouchEvent, rect: DOMRect, isFixed?: boolean) => {
   const { pageX, pageY, clientY } = e?.changedTouches?.[0] || {};
-  const offsetY = isFixed ? rect.top : (e.target as HTMLElement).offsetTop;
-  const offsetX = isFixed ? rect.left : (e.target as HTMLElement).offsetLeft;
   return {
     x: Math.min(Math.max(0, pageX - rect.left), rect.width),
     y: Math.min(Math.max(0, (isFixed ? clientY : pageY) - rect.top), rect.height),

From 2a842788745adb365faa646695d0fb94834926d0 Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Mon, 17 Feb 2025 19:24:00 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(color-picker):=20=E4=BC=98=E5=8C=96col?=
 =?UTF-8?q?or-picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/color-picker/color-picker.tsx    | 16 ++++++++++++----
 src/color-picker/demos/format.vue    |  2 +-
 src/color-picker/demos/use-popup.vue |  3 ++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx
index fc0766f1e..0782e7889 100644
--- a/src/color-picker/color-picker.tsx
+++ b/src/color-picker/color-picker.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, computed, onMounted, nextTick } from 'vue';
+import { defineComponent, ref, watch, computed, onMounted, nextTick, toRefs } from 'vue';
 import props from './props';
 import config from '../config';
 import { Popup as TPopup } from '../popup';
@@ -9,6 +9,7 @@ import { getFormatList, genSwatchList, getCoordinate } from './helper';
 import { Color, getColorObject } from '../_common/js/color-picker';
 import { DEFAULT_COLOR } from '../_common/js/color-picker/constants';
 import { ALPHA_MAX, HUE_MAX } from './constants';
+import { useVModel } from '../shared';
 
 const { prefix } = config;
 
@@ -24,7 +25,14 @@ export default defineComponent({
     const panelRect = ref<HTMLElement>();
     const hueSliderRect = ref<HTMLElement>();
     const alphaSliderRect = ref<HTMLElement>();
-    const innerValue = ref(props.value);
+    const { value, modelValue } = toRefs(props);
+
+    const [innerValue = ref(DEFAULT_COLOR), setPickerValue] = useVModel(
+      value,
+      modelValue,
+      props.defaultValue,
+      props.onChange,
+    );
 
     const saturationThumbStyle = ref({
       left: '0',
@@ -61,7 +69,7 @@ export default defineComponent({
         innerVisible.value = false;
       }
 
-      props.onClose(trigger);
+      props.onClose?.(trigger);
     };
 
     const onVisibleChange = (visible: boolean, trigger: ColorPickerTrigger) => {
@@ -129,7 +137,7 @@ export default defineComponent({
     };
 
     const emitColorChange = (trigger: ColorPickerChangeTrigger) => {
-      props.onChange?.(formatValue(), {
+      setPickerValue?.(formatValue(), {
         trigger,
         color: getColorObject(color),
       });
diff --git a/src/color-picker/demos/format.vue b/src/color-picker/demos/format.vue
index c2c61cbb6..03672cab1 100644
--- a/src/color-picker/demos/format.vue
+++ b/src/color-picker/demos/format.vue
@@ -16,7 +16,7 @@
       {{ item }}
     </div>
   </div>
-  <t-color-picker type="multiple" :format="curFormat" />
+  <t-color-picker type="multiple" enable-alpha :format="curFormat" />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/color-picker/demos/use-popup.vue b/src/color-picker/demos/use-popup.vue
index 2884c5cca..e6313eded 100644
--- a/src/color-picker/demos/use-popup.vue
+++ b/src/color-picker/demos/use-popup.vue
@@ -2,12 +2,13 @@
   <div style="margin: 0 20px">
     <t-button block theme="primary" size="large" variant="outline" t-class="wrapper" @click="onShow">展示</t-button>
   </div>
-  <t-color-picker use-popup :visible="visible" type="multiple" />
+  <t-color-picker v-model="value" enable-alpha use-popup :visible="visible" type="multiple" />
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 
 const visible = ref(false);
+const value = ref('#07c160');
 const onShow = () => {
   visible.value = true;
 };