diff --git a/package.json b/package.json
index 89912fd34..1c2661482 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "17.0.2",
     "@types/react-transition-group": "^4.4.4",
+    "@types/tinycolor2": "^1.4.6",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "@vitejs/plugin-react": "^1.1.1",
@@ -170,7 +171,8 @@
     "react-spring": "9.6.1",
     "react-transition-group": "^4.4.2",
     "smoothscroll-polyfill": "^0.4.4",
-    "tdesign-icons-react": "^0.4.3"
+    "tdesign-icons-react": "^0.4.3",
+    "tinycolor2": "^1.6.0"
   },
   "config": {
     "commitizen": {
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 60e1e8f49..607a6fe4f 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -26184,6 +26184,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/format.tsx 1`] =
             >
               <div
                 class="t-color-picker__slider-padding"
+                style="background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, rgb(123, 214, 11) 93%, rgb(123, 214, 11) 100%;"
               />
               <div
                 class="t-color-picker__slider"
@@ -26512,6 +26513,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/index.tsx 1`] =
                 >
                   <div
                     class="t-color-picker__slider-padding"
+                    style="background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, rgb(0, 31, 151) 93%, rgb(0, 31, 151) 100%;"
                   />
                   <div
                     class="t-color-picker__slider"
@@ -26716,6 +26718,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/index.tsx 1`] =
                   >
                     <div
                       class="t-color-picker__slider-padding"
+                      style="background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, rgb(0, 31, 151) 93%, rgb(0, 31, 151) 100%;"
                     />
                     <div
                       class="t-color-picker__slider"
@@ -26994,6 +26997,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/index.tsx 1`] =
                   >
                     <div
                       class="t-color-picker__slider-padding"
+                      style="background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, rgb(123, 214, 11) 93%, rgb(123, 214, 11) 100%;"
                     />
                     <div
                       class="t-color-picker__slider"
@@ -27185,6 +27189,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/multiple.tsx 1`]
           >
             <div
               class="t-color-picker__slider-padding"
+              style="background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, rgb(0, 31, 151) 93%, rgb(0, 31, 151) 100%;"
             />
             <div
               class="t-color-picker__slider"
@@ -27386,6 +27391,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/usePopup.tsx 1`]
             >
               <div
                 class="t-color-picker__slider-padding"
+                style="background: linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, rgb(0, 31, 151) 93%, rgb(0, 31, 151) 100%;"
               />
               <div
                 class="t-color-picker__slider"