diff --git a/src/_common b/src/_common
index a71cdcae4..d2d878e8c 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit a71cdcae443325613834fbe9a1259c927bd14154
+Subproject commit d2d878e8cb64cb110f383a6177d3af99f372811b
diff --git a/src/color-picker/panel/alpha.tsx b/src/color-picker/panel/alpha.tsx
index c0048ece1..97e809037 100644
--- a/src/color-picker/panel/alpha.tsx
+++ b/src/color-picker/panel/alpha.tsx
@@ -48,6 +48,7 @@ export default defineComponent({
         rail-style={this.railStyle}
         max-value={100}
         disabled={this.disabled}
+        type="alpha"
       />
     );
   },
diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx
index 3ff0d5f05..3b3c9e198 100644
--- a/src/color-picker/panel/format/index.tsx
+++ b/src/color-picker/panel/format/index.tsx
@@ -72,7 +72,8 @@ export default defineComponent({
       <div class={`${baseClassName}__format`}>
         <div class={`${baseClassName}__format--item`}>
           <t-select
-            autoWidth={true}
+            size="small"
+            class={`${baseClassName}__format-mode-select`}
             {...selectInputProps}
             popupProps={{
               overlayClassName: `${baseClassName}__select-options`,
diff --git a/src/color-picker/panel/format/inputs.tsx b/src/color-picker/panel/format/inputs.tsx
index 563165350..26c841fd0 100644
--- a/src/color-picker/panel/format/inputs.tsx
+++ b/src/color-picker/panel/format/inputs.tsx
@@ -150,6 +150,7 @@ export default defineComponent({
               <t-input
                 {...inputProps}
                 align="center"
+                size="small"
                 disabled={this.disabled}
                 v-model={this.modelValues[config.key]}
                 maxlength={this.format === 'HEX' ? 9 : undefined}
@@ -162,6 +163,7 @@ export default defineComponent({
                 {...inputProps}
                 align="center"
                 theme="normal"
+                size="small"
                 disabled={this.disabled}
                 v-model={this.modelValues[config.key]}
                 title={this.modelValues[config.key]}
diff --git a/src/color-picker/panel/header.tsx b/src/color-picker/panel/header.tsx
index 46fda1812..7c46d25ab 100644
--- a/src/color-picker/panel/header.tsx
+++ b/src/color-picker/panel/header.tsx
@@ -32,9 +32,6 @@ export default defineComponent({
   setup(props) {
     const baseClassName = useBaseClassName();
     const modeValue = ref(props.mode);
-    const handleClosePopup = () => {
-      props.togglePopup?.(false);
-    };
     watch(
       () => props.mode,
       (v) => {
@@ -44,10 +41,12 @@ export default defineComponent({
     return {
       baseClassName,
       modeValue,
-      handleClosePopup,
     };
   },
   render() {
+    if (this.colorModes?.length === 1) {
+      return null;
+    }
     const { baseClassName } = this;
     return (
       <div class={`${baseClassName}__head`}>
@@ -69,15 +68,6 @@ export default defineComponent({
             </t-radio-group>
           )}
         </div>
-        {this.closeBtn ? (
-          <span
-            role="button"
-            class={[`${baseClassName}__icon`, `${baseClassName}__close`]}
-            onClick={this.handleClosePopup}
-          >
-            <close-icon />
-          </span>
-        ) : null}
       </div>
     );
   },
diff --git a/src/color-picker/panel/hue.tsx b/src/color-picker/panel/hue.tsx
index 427ba0815..e043a014b 100644
--- a/src/color-picker/panel/hue.tsx
+++ b/src/color-picker/panel/hue.tsx
@@ -26,6 +26,7 @@ export default defineComponent({
         value={this.color.hue}
         handleChange={this.handleChange}
         disabled={this.disabled}
+        type="hue"
       />
     );
   },
diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
index 7ff93c06e..8d1d65847 100644
--- a/src/color-picker/panel/index.tsx
+++ b/src/color-picker/panel/index.tsx
@@ -323,6 +323,8 @@ export default defineComponent({
       );
     };
 
+    const isGradient = this.mode === 'linear-gradient';
+
     return (
       <div class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}>
         <panel-header
@@ -335,14 +337,27 @@ export default defineComponent({
           handleModeChange={this.handleModeChange}
         />
         <div class={[`${baseClassName}__body`]}>
-          {this.mode === 'linear-gradient' ? (
+          {isGradient ? (
             <linear-gradient color={this.color} disabled={this.disabled} handleChange={this.handleGradientChange} />
           ) : null}
           <saturation-panel color={this.color} disabled={this.disabled} handleChange={this.handleSatAndValueChange} />
-          <hue-slider color={this.color} disabled={this.disabled} handleChange={this.handleHueChange} />
-          {this.enableAlpha ? (
-            <alpha-slider color={this.color} disabled={this.disabled} handleChange={this.handleAlphaChange} />
-          ) : null}
+          <div class={[`${baseClassName}__sliders-wrapper`]}>
+            <div class={[`${baseClassName}__sliders`]}>
+              <hue-slider color={this.color} disabled={this.disabled} handleChange={this.handleHueChange} />
+              {this.enableAlpha ? (
+                <alpha-slider color={this.color} disabled={this.disabled} handleChange={this.handleAlphaChange} />
+              ) : null}
+            </div>
+            <div class={[`${baseClassName}__sliders-preview`, `${baseClassName}--bg-alpha`]}>
+              <span
+                class={`${baseClassName}__sliders-preview-inner`}
+                style={{
+                  background: isGradient ? this.color.linearGradient : this.color.rgba,
+                }}
+              />
+            </div>
+          </div>
+
           <format-panel
             {...{
               props: {
diff --git a/src/color-picker/panel/linear-gradient.tsx b/src/color-picker/panel/linear-gradient.tsx
index cb1bcb7cf..8657e3a8a 100644
--- a/src/color-picker/panel/linear-gradient.tsx
+++ b/src/color-picker/panel/linear-gradient.tsx
@@ -272,6 +272,7 @@ export default defineComponent({
         <div class={`${baseClassName}__gradient-degree`} title={`${degree}deg`}>
           <t-input-number
             theme="normal"
+            size="small"
             min={0}
             max={360}
             step={1}
diff --git a/src/color-picker/panel/slider.tsx b/src/color-picker/panel/slider.tsx
index b14adbace..42fd4a6ad 100644
--- a/src/color-picker/panel/slider.tsx
+++ b/src/color-picker/panel/slider.tsx
@@ -30,6 +30,10 @@ export default defineComponent({
     railStyle: {
       type: Object as PropType<any>,
     },
+    type: {
+      type: String as PropType<'hue' | 'alpha'>,
+      default: 'hue',
+    },
   },
   setup(props, { emit }) {
     const baseClassName = useBaseClassName();
@@ -96,12 +100,18 @@ export default defineComponent({
   },
   render() {
     const {
-      baseClassName, className, railStyle, styles,
+      baseClassName, className, railStyle, styles, type, color,
     } = this;
+    const paddingStyle = {
+      background: `linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ${color.rgb} 93%, ${color.rgb} 100%)`,
+    };
     return (
-      <div class={[`${baseClassName}__slider`, className]} ref="refPanel">
-        <div class={`${baseClassName}__rail`} style={railStyle}></div>
-        <span class={[`${baseClassName}__thumb`]} role="slider" tabindex={0} ref="refThumb" style={styles}></span>
+      <div class={[`${baseClassName}__slider-wrapper`, `${baseClassName}__slider-wrapper--${type}-type`]}>
+        {type === 'alpha' && <div class={`${baseClassName}__slider-padding`} style={paddingStyle} />}
+        <div class={[`${baseClassName}__slider`, className]} ref="refPanel">
+          <div class={`${baseClassName}__rail`} style={railStyle}></div>
+          <span class={[`${baseClassName}__thumb`]} role="slider" tabindex={0} ref="refThumb" style={styles}></span>
+        </div>
       </div>
     );
   },
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 19066d464..6e1fe1745 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -3309,19 +3309,29 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/enable-alpha.vu
       </div>
     </div>
     <div class="t-color-picker__body">
-      <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:248px;top:0px;"></span></div>
-      <div class="t-color-picker__slider t-color-picker__hue">
-        <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
-      </div>
-      <div class="t-color-picker__slider t-color-picker__alpha t-color-picker--bg-alpha">
-        <div class="t-color-picker__rail" style="background:linear-gradient(to right, rgba(0, 0, 0, 0), rgb(255, 0, 0));"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:248px;color:rgb(255, 0, 0);"></span>
+      <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:230px;top:0px;"></span></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 t-color-picker__hue">
+            <div class="t-color-picker__slider">
+              <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
+            </div>
+          </div>
+          <div class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--alpha-type t-color-picker__alpha t-color-picker--bg-alpha">
+            <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(255, 0, 0) 93%, rgb(255, 0, 0) 100%);"></div>
+            <div class="t-color-picker__slider">
+              <div class="t-color-picker__rail" style="background:linear-gradient(to right, rgba(0, 0, 0, 0), rgb(255, 0, 0));"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:186px;color:rgb(255, 0, 0);"></span>
+            </div>
+          </div>
+        </div>
+        <div class="t-color-picker__sliders-preview t-color-picker--bg-alpha"><span class="t-color-picker__sliders-preview-inner" style="background:rgba(255, 0, 0, 1);"></span></div>
       </div>
       <div class="t-color-picker__format">
         <div class="t-color-picker__format--item">
-          <div class="t-select__wrap">
+          <div class="t-select__wrap t-color-picker__format-mode-select">
             <div class="t-input__wrap t-select">
-              <div class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-                <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__input-pre">RGB</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
+              <div class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix">
+                <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
               </div>
             </div>
           </div>
@@ -3329,28 +3339,28 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/enable-alpha.vu
         <div class="t-color-picker__format--item">
           <div class="input-group">
             <div class="input-group__item" style="flex:1;">
-              <div title="255" class="t-input-number t-size-m t-input-number--normal">
+              <div title="255" class="t-input-number t-size-s t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="255" class="t-input__inner"></div>
                 </div>
               </div>
             </div>
             <div class="input-group__item" style="flex:1;">
-              <div title="0" class="t-input-number t-size-m t-input-number--normal">
+              <div title="0" class="t-input-number t-size-s t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                 </div>
               </div>
             </div>
             <div class="input-group__item" style="flex:1;">
-              <div title="0" class="t-input-number t-size-m t-input-number--normal">
+              <div title="0" class="t-input-number t-size-s t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                 </div>
               </div>
             </div>
             <div class="input-group__item" style="flex:1.15;">
-              <div title="100" class="t-input-number t-size-m t-input-number--normal">
+              <div title="100" class="t-input-number t-size-s t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="100%" class="t-input__inner"></div>
                 </div>
@@ -3508,16 +3518,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/panel.vue corre
       </div>
     </div>
     <div class="t-color-picker__body">
-      <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:248px;top:21px;"></span></div>
-      <div class="t-color-picker__slider t-color-picker__hue">
-        <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:150px;color:rgb(0, 82, 217);"></span>
+      <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:230px;top:25px;"></span></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 t-color-picker__hue">
+            <div class="t-color-picker__slider">
+              <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:112px;color:rgb(0, 82, 217);"></span>
+            </div>
+          </div>
+        </div>
+        <div class="t-color-picker__sliders-preview t-color-picker--bg-alpha"><span class="t-color-picker__sliders-preview-inner" style="background:rgba(0, 82, 217, 1);"></span></div>
       </div>
       <div class="t-color-picker__format">
         <div class="t-color-picker__format--item">
-          <div class="t-select__wrap">
+          <div class="t-select__wrap t-color-picker__format-mode-select">
             <div class="t-input__wrap t-select">
-              <div class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-                <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__input-pre">RGB</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
+              <div class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix">
+                <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
               </div>
             </div>
           </div>
@@ -3525,21 +3542,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/panel.vue corre
         <div class="t-color-picker__format--item">
           <div class="input-group">
             <div class="input-group__item" style="flex:1;">
-              <div title="0" class="t-input-number t-size-m t-input-number--normal">
+              <div title="0" class="t-input-number t-size-s t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                 </div>
               </div>
             </div>
             <div class="input-group__item" style="flex:1;">
-              <div title="82" class="t-input-number t-size-m t-input-number--normal">
+              <div title="82" class="t-input-number t-size-s t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="82" class="t-input__inner"></div>
                 </div>
               </div>
             </div>
             <div class="input-group__item" style="flex:1;">
-              <div title="217" class="t-input-number t-size-m t-input-number--normal">
+              <div title="217" class="t-input-number t-size-s t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="217" class="t-input__inner"></div>
                 </div>
@@ -3699,16 +3716,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
         </div>
       </div>
       <div class="t-color-picker__body">
-        <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:248px;top:0px;"></span></div>
-        <div class="t-color-picker__slider t-color-picker__hue">
-          <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
+        <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:230px;top:0px;"></span></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 t-color-picker__hue">
+              <div class="t-color-picker__slider">
+                <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
+              </div>
+            </div>
+          </div>
+          <div class="t-color-picker__sliders-preview t-color-picker--bg-alpha"><span class="t-color-picker__sliders-preview-inner" style="background:rgba(255, 0, 0, 1);"></span></div>
         </div>
         <div class="t-color-picker__format">
           <div class="t-color-picker__format--item">
-            <div class="t-select__wrap">
+            <div class="t-select__wrap t-color-picker__format-mode-select">
               <div class="t-input__wrap t-select">
-                <div class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-                  <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__input-pre">RGB</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
+                <div class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix">
+                  <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
                 </div>
               </div>
             </div>
@@ -3716,21 +3740,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
           <div class="t-color-picker__format--item">
             <div class="input-group">
               <div class="input-group__item" style="flex:1;">
-                <div title="255" class="t-input-number t-size-m t-input-number--normal">
+                <div title="255" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="255" class="t-input__inner"></div>
                   </div>
                 </div>
               </div>
               <div class="input-group__item" style="flex:1;">
-                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div title="0" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                   </div>
                 </div>
               </div>
               <div class="input-group__item" style="flex:1;">
-                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div title="0" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                   </div>
@@ -3911,16 +3935,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
         </div>
       </div>
       <div class="t-color-picker__body">
-        <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:248px;top:0px;"></span></div>
-        <div class="t-color-picker__slider t-color-picker__hue">
-          <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
+        <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:230px;top:0px;"></span></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 t-color-picker__hue">
+              <div class="t-color-picker__slider">
+                <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
+              </div>
+            </div>
+          </div>
+          <div class="t-color-picker__sliders-preview t-color-picker--bg-alpha"><span class="t-color-picker__sliders-preview-inner" style="background:rgba(255, 0, 0, 1);"></span></div>
         </div>
         <div class="t-color-picker__format">
           <div class="t-color-picker__format--item">
-            <div class="t-select__wrap">
+            <div class="t-select__wrap t-color-picker__format-mode-select">
               <div class="t-input__wrap t-select">
-                <div class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-                  <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__input-pre">RGB</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
+                <div class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix">
+                  <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
                 </div>
               </div>
             </div>
@@ -3928,21 +3959,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vu
           <div class="t-color-picker__format--item">
             <div class="input-group">
               <div class="input-group__item" style="flex:1;">
-                <div title="255" class="t-input-number t-size-m t-input-number--normal">
+                <div title="255" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="255" class="t-input__inner"></div>
                   </div>
                 </div>
               </div>
               <div class="input-group__item" style="flex:1;">
-                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div title="0" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                   </div>
                 </div>
               </div>
               <div class="input-group__item" style="flex:1;">
-                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div title="0" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                   </div>
@@ -4111,16 +4142,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/status-readonly
       </div>
     </div>
     <div class="t-color-picker__body">
-      <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:248px;top:21px;"></span></div>
-      <div class="t-color-picker__slider t-color-picker__hue">
-        <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:150px;color:rgb(0, 82, 217);"></span>
+      <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:230px;top:25px;"></span></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 t-color-picker__hue">
+            <div class="t-color-picker__slider">
+              <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:112px;color:rgb(0, 82, 217);"></span>
+            </div>
+          </div>
+        </div>
+        <div class="t-color-picker__sliders-preview t-color-picker--bg-alpha"><span class="t-color-picker__sliders-preview-inner" style="background:rgba(0, 82, 217, 1);"></span></div>
       </div>
       <div class="t-color-picker__format">
         <div class="t-color-picker__format--item">
-          <div class="t-select__wrap">
+          <div class="t-select__wrap t-color-picker__format-mode-select">
             <div class="t-input__wrap t-select">
-              <div class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-                <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__input-pre">RGB</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
+              <div class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix">
+                <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
               </div>
             </div>
           </div>
@@ -4128,21 +4166,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/status-readonly
         <div class="t-color-picker__format--item">
           <div class="input-group">
             <div class="input-group__item" style="flex:1;">
-              <div title="0" class="t-input-number t-size-m t-is-disabled t-input-number--normal">
+              <div title="0" class="t-input-number t-size-s t-is-disabled t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-disabled t-is-default t-align-center"><input disabled="disabled" autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                 </div>
               </div>
             </div>
             <div class="input-group__item" style="flex:1;">
-              <div title="82" class="t-input-number t-size-m t-is-disabled t-input-number--normal">
+              <div title="82" class="t-input-number t-size-s t-is-disabled t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-disabled t-is-default t-align-center"><input disabled="disabled" autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="82" class="t-input__inner"></div>
                 </div>
               </div>
             </div>
             <div class="input-group__item" style="flex:1;">
-              <div title="217" class="t-input-number t-size-m t-is-disabled t-input-number--normal">
+              <div title="217" class="t-input-number t-size-s t-is-disabled t-input-number--normal">
                 <div class="t-input__wrap">
                   <div ref="refInputElem" class="t-input t-size-m t-is-disabled t-is-default t-align-center"><input disabled="disabled" autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="217" class="t-input__inner"></div>
                 </div>
@@ -4302,16 +4340,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vu
         </div>
       </div>
       <div class="t-color-picker__body">
-        <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:248px;top:21px;"></span></div>
-        <div class="t-color-picker__slider t-color-picker__hue">
-          <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:150px;color:rgb(0, 82, 217);"></span>
+        <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:230px;top:25px;"></span></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 t-color-picker__hue">
+              <div class="t-color-picker__slider">
+                <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:112px;color:rgb(0, 82, 217);"></span>
+              </div>
+            </div>
+          </div>
+          <div class="t-color-picker__sliders-preview t-color-picker--bg-alpha"><span class="t-color-picker__sliders-preview-inner" style="background:rgba(0, 82, 217, 1);"></span></div>
         </div>
         <div class="t-color-picker__format">
           <div class="t-color-picker__format--item">
-            <div class="t-select__wrap">
+            <div class="t-select__wrap t-color-picker__format-mode-select">
               <div class="t-input__wrap t-select">
-                <div class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-                  <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__input-pre">RGB</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
+                <div class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix">
+                  <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
                 </div>
               </div>
             </div>
@@ -4319,21 +4364,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vu
           <div class="t-color-picker__format--item">
             <div class="input-group">
               <div class="input-group__item" style="flex:1;">
-                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div title="0" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                   </div>
                 </div>
               </div>
               <div class="input-group__item" style="flex:1;">
-                <div title="82" class="t-input-number t-size-m t-input-number--normal">
+                <div title="82" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="82" class="t-input__inner"></div>
                   </div>
                 </div>
               </div>
               <div class="input-group__item" style="flex:1;">
-                <div title="217" class="t-input-number t-size-m t-input-number--normal">
+                <div title="217" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="217" class="t-input__inner"></div>
                   </div>
@@ -4384,16 +4429,23 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vu
         </div>
       </div>
       <div class="t-color-picker__body">
-        <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:248px;top:21px;"></span></div>
-        <div class="t-color-picker__slider t-color-picker__hue">
-          <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:150px;color:rgb(0, 82, 217);"></span>
+        <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:230px;top:25px;"></span></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 t-color-picker__hue">
+              <div class="t-color-picker__slider">
+                <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:112px;color:rgb(0, 82, 217);"></span>
+              </div>
+            </div>
+          </div>
+          <div class="t-color-picker__sliders-preview t-color-picker--bg-alpha"><span class="t-color-picker__sliders-preview-inner" style="background:rgba(0, 82, 217, 1);"></span></div>
         </div>
         <div class="t-color-picker__format">
           <div class="t-color-picker__format--item">
-            <div class="t-select__wrap">
+            <div class="t-select__wrap t-color-picker__format-mode-select">
               <div class="t-input__wrap t-select">
-                <div class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-                  <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__input-pre">RGB</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
+                <div class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix">
+                  <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="RGB" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
                 </div>
               </div>
             </div>
@@ -4401,21 +4453,21 @@ exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vu
           <div class="t-color-picker__format--item">
             <div class="input-group">
               <div class="input-group__item" style="flex:1;">
-                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div title="0" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
                   </div>
                 </div>
               </div>
               <div class="input-group__item" style="flex:1;">
-                <div title="82" class="t-input-number t-size-m t-input-number--normal">
+                <div title="82" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="82" class="t-input__inner"></div>
                   </div>
                 </div>
               </div>
               <div class="input-group__item" style="flex:1;">
-                <div title="217" class="t-input-number t-size-m t-input-number--normal">
+                <div title="217" class="t-input-number t-size-s t-input-number--normal">
                   <div class="t-input__wrap">
                     <div ref="refInputElem" class="t-input t-size-m t-is-default t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="217" class="t-input__inner"></div>
                   </div>
diff --git a/test/unit/color-picker/__snapshots__/demo.test.js.snap b/test/unit/color-picker/__snapshots__/demo.test.js.snap
index 7804276a6..6b3861590 100644
--- a/test/unit/color-picker/__snapshots__/demo.test.js.snap
+++ b/test/unit/color-picker/__snapshots__/demo.test.js.snap
@@ -225,35 +225,62 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
         <span
           class="t-color-picker__thumb"
           role="slider"
-          style="color: rgb(255, 0, 0); left: 248px; top: 0px;"
+          style="color: rgb(255, 0, 0); left: 230px; top: 0px;"
           tabindex="0"
         />
       </div>
       <div
-        class="t-color-picker__slider t-color-picker__hue"
+        class="t-color-picker__sliders-wrapper"
       >
         <div
-          class="t-color-picker__rail"
-        />
-        <span
-          class="t-color-picker__thumb"
-          role="slider"
-          style="left: 0px; color: rgb(255, 0, 0);"
-          tabindex="0"
-        />
-      </div>
-      <div
-        class="t-color-picker__slider t-color-picker__alpha t-color-picker--bg-alpha"
-      >
+          class="t-color-picker__sliders"
+        >
+          <div
+            class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type t-color-picker__hue"
+          >
+            <div
+              class="t-color-picker__slider"
+            >
+              <div
+                class="t-color-picker__rail"
+              />
+              <span
+                class="t-color-picker__thumb"
+                role="slider"
+                style="left: 0px; color: rgb(255, 0, 0);"
+                tabindex="0"
+              />
+            </div>
+          </div>
+          <div
+            class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--alpha-type t-color-picker__alpha t-color-picker--bg-alpha"
+          >
+            <div
+              class="t-color-picker__slider-padding"
+            />
+            <div
+              class="t-color-picker__slider"
+            >
+              <div
+                class="t-color-picker__rail"
+              />
+              <span
+                class="t-color-picker__thumb"
+                role="slider"
+                style="left: 186px; color: rgb(255, 0, 0);"
+                tabindex="0"
+              />
+            </div>
+          </div>
+        </div>
         <div
-          class="t-color-picker__rail"
-        />
-        <span
-          class="t-color-picker__thumb"
-          role="slider"
-          style="left: 248px; color: rgb(255, 0, 0);"
-          tabindex="0"
-        />
+          class="t-color-picker__sliders-preview t-color-picker--bg-alpha"
+        >
+          <span
+            class="t-color-picker__sliders-preview-inner"
+            style="background: rgb(255, 0, 0);"
+          />
+        </div>
       </div>
       <div
         class="t-color-picker__format"
@@ -262,13 +289,13 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
           class="t-color-picker__format--item"
         >
           <div
-            class="t-select__wrap"
+            class="t-select__wrap t-color-picker__format-mode-select"
           >
             <div
               class="t-input__wrap t-select"
             >
               <div
-                class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+                class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix"
               >
                 <div
                   class="t-input__prefix"
@@ -281,11 +308,6 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
                   type="text"
                   unselectable="on"
                 />
-                <span
-                  class="t-input__input-pre"
-                >
-                  RGB
-                </span>
                 <span
                   class="t-input__suffix t-input__suffix-icon"
                 >
@@ -320,7 +342,7 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-input-number--normal"
+                class="t-input-number t-size-s t-input-number--normal"
                 title="255"
               >
                 <div
@@ -346,7 +368,7 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-input-number--normal"
+                class="t-input-number t-size-s t-input-number--normal"
                 title="0"
               >
                 <div
@@ -372,7 +394,7 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-input-number--normal"
+                class="t-input-number t-size-s t-input-number--normal"
                 title="0"
               >
                 <div
@@ -398,7 +420,7 @@ exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
               style="flex: 1.15;"
             >
               <div
-                class="t-input-number t-size-m t-input-number--normal"
+                class="t-input-number t-size-s t-input-number--normal"
                 title="100"
               >
                 <div
@@ -1031,22 +1053,42 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = `
         <span
           class="t-color-picker__thumb"
           role="slider"
-          style="color: rgb(0, 82, 217); left: 248px; top: 21px;"
+          style="color: rgb(0, 82, 217); left: 230px; top: 25px;"
           tabindex="0"
         />
       </div>
       <div
-        class="t-color-picker__slider t-color-picker__hue"
+        class="t-color-picker__sliders-wrapper"
       >
         <div
-          class="t-color-picker__rail"
-        />
-        <span
-          class="t-color-picker__thumb"
-          role="slider"
-          style="left: 150px; color: rgb(0, 82, 217);"
-          tabindex="0"
-        />
+          class="t-color-picker__sliders"
+        >
+          <div
+            class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type t-color-picker__hue"
+          >
+            <div
+              class="t-color-picker__slider"
+            >
+              <div
+                class="t-color-picker__rail"
+              />
+              <span
+                class="t-color-picker__thumb"
+                role="slider"
+                style="left: 112px; color: rgb(0, 82, 217);"
+                tabindex="0"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__sliders-preview t-color-picker--bg-alpha"
+        >
+          <span
+            class="t-color-picker__sliders-preview-inner"
+            style="background: rgb(0, 82, 217);"
+          />
+        </div>
       </div>
       <div
         class="t-color-picker__format"
@@ -1055,13 +1097,13 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = `
           class="t-color-picker__format--item"
         >
           <div
-            class="t-select__wrap"
+            class="t-select__wrap t-color-picker__format-mode-select"
           >
             <div
               class="t-input__wrap t-select"
             >
               <div
-                class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+                class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix"
               >
                 <div
                   class="t-input__prefix"
@@ -1074,11 +1116,6 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = `
                   type="text"
                   unselectable="on"
                 />
-                <span
-                  class="t-input__input-pre"
-                >
-                  RGB
-                </span>
                 <span
                   class="t-input__suffix t-input__suffix-icon"
                 >
@@ -1113,7 +1150,7 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-input-number--normal"
+                class="t-input-number t-size-s t-input-number--normal"
                 title="0"
               >
                 <div
@@ -1139,7 +1176,7 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-input-number--normal"
+                class="t-input-number t-size-s t-input-number--normal"
                 title="82"
               >
                 <div
@@ -1165,7 +1202,7 @@ exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-input-number--normal"
+                class="t-input-number t-size-s t-input-number--normal"
                 title="217"
               >
                 <div
@@ -1803,22 +1840,42 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
           <span
             class="t-color-picker__thumb"
             role="slider"
-            style="color: rgb(255, 0, 0); left: 248px; top: 0px;"
+            style="color: rgb(255, 0, 0); left: 230px; top: 0px;"
             tabindex="0"
           />
         </div>
         <div
-          class="t-color-picker__slider t-color-picker__hue"
+          class="t-color-picker__sliders-wrapper"
         >
           <div
-            class="t-color-picker__rail"
-          />
-          <span
-            class="t-color-picker__thumb"
-            role="slider"
-            style="left: 0px; color: rgb(255, 0, 0);"
-            tabindex="0"
-          />
+            class="t-color-picker__sliders"
+          >
+            <div
+              class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type t-color-picker__hue"
+            >
+              <div
+                class="t-color-picker__slider"
+              >
+                <div
+                  class="t-color-picker__rail"
+                />
+                <span
+                  class="t-color-picker__thumb"
+                  role="slider"
+                  style="left: 0px; color: rgb(255, 0, 0);"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__sliders-preview t-color-picker--bg-alpha"
+          >
+            <span
+              class="t-color-picker__sliders-preview-inner"
+              style="background: rgb(255, 0, 0);"
+            />
+          </div>
         </div>
         <div
           class="t-color-picker__format"
@@ -1827,13 +1884,13 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
             class="t-color-picker__format--item"
           >
             <div
-              class="t-select__wrap"
+              class="t-select__wrap t-color-picker__format-mode-select"
             >
               <div
                 class="t-input__wrap t-select"
               >
                 <div
-                  class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+                  class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix"
                 >
                   <div
                     class="t-input__prefix"
@@ -1846,11 +1903,6 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
                     type="text"
                     unselectable="on"
                   />
-                  <span
-                    class="t-input__input-pre"
-                  >
-                    RGB
-                  </span>
                   <span
                     class="t-input__suffix t-input__suffix-icon"
                   >
@@ -1885,7 +1937,7 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="255"
                 >
                   <div
@@ -1911,7 +1963,7 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="0"
                 >
                   <div
@@ -1937,7 +1989,7 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="0"
                 >
                   <div
@@ -2687,22 +2739,42 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
           <span
             class="t-color-picker__thumb"
             role="slider"
-            style="color: rgb(255, 0, 0); left: 248px; top: 0px;"
+            style="color: rgb(255, 0, 0); left: 230px; top: 0px;"
             tabindex="0"
           />
         </div>
         <div
-          class="t-color-picker__slider t-color-picker__hue"
+          class="t-color-picker__sliders-wrapper"
         >
           <div
-            class="t-color-picker__rail"
-          />
-          <span
-            class="t-color-picker__thumb"
-            role="slider"
-            style="left: 0px; color: rgb(255, 0, 0);"
-            tabindex="0"
-          />
+            class="t-color-picker__sliders"
+          >
+            <div
+              class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type t-color-picker__hue"
+            >
+              <div
+                class="t-color-picker__slider"
+              >
+                <div
+                  class="t-color-picker__rail"
+                />
+                <span
+                  class="t-color-picker__thumb"
+                  role="slider"
+                  style="left: 0px; color: rgb(255, 0, 0);"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__sliders-preview t-color-picker--bg-alpha"
+          >
+            <span
+              class="t-color-picker__sliders-preview-inner"
+              style="background: rgb(255, 0, 0);"
+            />
+          </div>
         </div>
         <div
           class="t-color-picker__format"
@@ -2711,13 +2783,13 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
             class="t-color-picker__format--item"
           >
             <div
-              class="t-select__wrap"
+              class="t-select__wrap t-color-picker__format-mode-select"
             >
               <div
                 class="t-input__wrap t-select"
               >
                 <div
-                  class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+                  class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix"
                 >
                   <div
                     class="t-input__prefix"
@@ -2730,11 +2802,6 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
                     type="text"
                     unselectable="on"
                   />
-                  <span
-                    class="t-input__input-pre"
-                  >
-                    RGB
-                  </span>
                   <span
                     class="t-input__suffix t-input__suffix-icon"
                   >
@@ -2769,7 +2836,7 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="255"
                 >
                   <div
@@ -2795,7 +2862,7 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="0"
                 >
                   <div
@@ -2821,7 +2888,7 @@ exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="0"
                 >
                   <div
@@ -3467,22 +3534,42 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = `
         <span
           class="t-color-picker__thumb"
           role="slider"
-          style="color: rgb(0, 82, 217); left: 248px; top: 21px;"
+          style="color: rgb(0, 82, 217); left: 230px; top: 25px;"
           tabindex="0"
         />
       </div>
       <div
-        class="t-color-picker__slider t-color-picker__hue"
+        class="t-color-picker__sliders-wrapper"
       >
         <div
-          class="t-color-picker__rail"
-        />
-        <span
-          class="t-color-picker__thumb"
-          role="slider"
-          style="left: 150px; color: rgb(0, 82, 217);"
-          tabindex="0"
-        />
+          class="t-color-picker__sliders"
+        >
+          <div
+            class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type t-color-picker__hue"
+          >
+            <div
+              class="t-color-picker__slider"
+            >
+              <div
+                class="t-color-picker__rail"
+              />
+              <span
+                class="t-color-picker__thumb"
+                role="slider"
+                style="left: 112px; color: rgb(0, 82, 217);"
+                tabindex="0"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__sliders-preview t-color-picker--bg-alpha"
+        >
+          <span
+            class="t-color-picker__sliders-preview-inner"
+            style="background: rgb(0, 82, 217);"
+          />
+        </div>
       </div>
       <div
         class="t-color-picker__format"
@@ -3491,13 +3578,13 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = `
           class="t-color-picker__format--item"
         >
           <div
-            class="t-select__wrap"
+            class="t-select__wrap t-color-picker__format-mode-select"
           >
             <div
               class="t-input__wrap t-select"
             >
               <div
-                class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+                class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix"
               >
                 <div
                   class="t-input__prefix"
@@ -3510,11 +3597,6 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = `
                   type="text"
                   unselectable="on"
                 />
-                <span
-                  class="t-input__input-pre"
-                >
-                  RGB
-                </span>
                 <span
                   class="t-input__suffix t-input__suffix-icon"
                 >
@@ -3549,7 +3631,7 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-is-disabled t-input-number--normal"
+                class="t-input-number t-size-s t-is-disabled t-input-number--normal"
                 title="0"
               >
                 <div
@@ -3576,7 +3658,7 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-is-disabled t-input-number--normal"
+                class="t-input-number t-size-s t-is-disabled t-input-number--normal"
                 title="82"
               >
                 <div
@@ -3603,7 +3685,7 @@ exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = `
               style="flex: 1;"
             >
               <div
-                class="t-input-number t-size-m t-is-disabled t-input-number--normal"
+                class="t-input-number t-size-s t-is-disabled t-input-number--normal"
                 title="217"
               >
                 <div
@@ -4242,22 +4324,42 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
           <span
             class="t-color-picker__thumb"
             role="slider"
-            style="color: rgb(0, 82, 217); left: 248px; top: 21px;"
+            style="color: rgb(0, 82, 217); left: 230px; top: 25px;"
             tabindex="0"
           />
         </div>
         <div
-          class="t-color-picker__slider t-color-picker__hue"
+          class="t-color-picker__sliders-wrapper"
         >
           <div
-            class="t-color-picker__rail"
-          />
-          <span
-            class="t-color-picker__thumb"
-            role="slider"
-            style="left: 150px; color: rgb(0, 82, 217);"
-            tabindex="0"
-          />
+            class="t-color-picker__sliders"
+          >
+            <div
+              class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type t-color-picker__hue"
+            >
+              <div
+                class="t-color-picker__slider"
+              >
+                <div
+                  class="t-color-picker__rail"
+                />
+                <span
+                  class="t-color-picker__thumb"
+                  role="slider"
+                  style="left: 112px; color: rgb(0, 82, 217);"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__sliders-preview t-color-picker--bg-alpha"
+          >
+            <span
+              class="t-color-picker__sliders-preview-inner"
+              style="background: rgb(0, 82, 217);"
+            />
+          </div>
         </div>
         <div
           class="t-color-picker__format"
@@ -4266,13 +4368,13 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
             class="t-color-picker__format--item"
           >
             <div
-              class="t-select__wrap"
+              class="t-select__wrap t-color-picker__format-mode-select"
             >
               <div
                 class="t-input__wrap t-select"
               >
                 <div
-                  class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+                  class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix"
                 >
                   <div
                     class="t-input__prefix"
@@ -4285,11 +4387,6 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
                     type="text"
                     unselectable="on"
                   />
-                  <span
-                    class="t-input__input-pre"
-                  >
-                    RGB
-                  </span>
                   <span
                     class="t-input__suffix t-input__suffix-icon"
                   >
@@ -4324,7 +4421,7 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="0"
                 >
                   <div
@@ -4350,7 +4447,7 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="82"
                 >
                   <div
@@ -4376,7 +4473,7 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="217"
                 >
                   <div
@@ -4589,22 +4686,42 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
           <span
             class="t-color-picker__thumb"
             role="slider"
-            style="color: rgb(0, 82, 217); left: 248px; top: 21px;"
+            style="color: rgb(0, 82, 217); left: 230px; top: 25px;"
             tabindex="0"
           />
         </div>
         <div
-          class="t-color-picker__slider t-color-picker__hue"
+          class="t-color-picker__sliders-wrapper"
         >
           <div
-            class="t-color-picker__rail"
-          />
-          <span
-            class="t-color-picker__thumb"
-            role="slider"
-            style="left: 150px; color: rgb(0, 82, 217);"
-            tabindex="0"
-          />
+            class="t-color-picker__sliders"
+          >
+            <div
+              class="t-color-picker__slider-wrapper t-color-picker__slider-wrapper--hue-type t-color-picker__hue"
+            >
+              <div
+                class="t-color-picker__slider"
+              >
+                <div
+                  class="t-color-picker__rail"
+                />
+                <span
+                  class="t-color-picker__thumb"
+                  role="slider"
+                  style="left: 112px; color: rgb(0, 82, 217);"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__sliders-preview t-color-picker--bg-alpha"
+          >
+            <span
+              class="t-color-picker__sliders-preview-inner"
+              style="background: rgb(0, 82, 217);"
+            />
+          </div>
         </div>
         <div
           class="t-color-picker__format"
@@ -4613,13 +4730,13 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
             class="t-color-picker__format--item"
           >
             <div
-              class="t-select__wrap"
+              class="t-select__wrap t-color-picker__format-mode-select"
             >
               <div
                 class="t-input__wrap t-select"
               >
                 <div
-                  class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+                  class="t-input t-size-s t-is-default t-is-readonly t-input--prefix t-input--suffix"
                 >
                   <div
                     class="t-input__prefix"
@@ -4632,11 +4749,6 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
                     type="text"
                     unselectable="on"
                   />
-                  <span
-                    class="t-input__input-pre"
-                  >
-                    RGB
-                  </span>
                   <span
                     class="t-input__suffix t-input__suffix-icon"
                   >
@@ -4671,7 +4783,7 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="0"
                 >
                   <div
@@ -4697,7 +4809,7 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="82"
                 >
                   <div
@@ -4723,7 +4835,7 @@ exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
                 style="flex: 1;"
               >
                 <div
-                  class="t-input-number t-size-m t-input-number--normal"
+                  class="t-input-number t-size-s t-input-number--normal"
                   title="217"
                 >
                   <div