diff --git a/examples/sites/demos/pc/app/color-picker/history.spec.ts b/examples/sites/demos/pc/app/color-picker/history.spec.ts
index b0596fbd86..700ed00dcc 100644
--- a/examples/sites/demos/pc/app/color-picker/history.spec.ts
+++ b/examples/sites/demos/pc/app/color-picker/history.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('测试历史记录', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#history')
-  await page.locator('.tiny-color-picker__trigger').click()
+  await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
   const arrow = page.locator('.tiny-collapse-item__arrow')
   await arrow.click()
@@ -11,10 +11,12 @@ test('测试历史记录', async ({ page }) => {
   await page.locator('.mr20.fw-bold').click()
   //用户行为更改历史记录测试
   await page.getByRole('button', { name: 'Append history color' }).click()
-  await page.locator('.tiny-color-picker__trigger').click()
+  await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
   await page.locator('.tiny-collapse-item__arrow').click()
-  await expect(page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')).toBeVisible()
+  await expect(
+    page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')
+  ).toBeVisible()
   //点击色块中心，并点击选择，历史记录增加1的测试
   const black = page.locator('.black')
   const center = await black.boundingBox()
@@ -22,8 +24,10 @@ test('测试历史记录', async ({ page }) => {
   const y = center?.y ?? 0 + (center?.height ?? 0) / 2
   await black.click(x, y)
   await page.getByRole('button', { name: '选择' }).click()
-  await page.locator('.tiny-color-picker__trigger').click()
+  await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
   await page.locator('.tiny-collapse-item__arrow').click()
-  await expect(page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(3)')).toBeVisible()
+  await expect(
+    page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(3)')
+  ).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/color-picker/predefine.spec.ts b/examples/sites/demos/pc/app/color-picker/predefine.spec.ts
index c0b756d4f3..16094e3eb3 100644
--- a/examples/sites/demos/pc/app/color-picker/predefine.spec.ts
+++ b/examples/sites/demos/pc/app/color-picker/predefine.spec.ts
@@ -3,16 +3,20 @@ import { test, expect } from '@playwright/test'
 test('测试预定义颜色', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#predefine')
-  await page.locator('.tiny-color-picker__trigger').click()
+  await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
   const arrow = page.locator('.tiny-collapse-item__arrow')
   await arrow.click()
-  await expect(page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')).toBeVisible()
+  await expect(
+    page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')
+  ).toBeVisible()
   await page.locator('.mr20.fw-bold').click()
   //用户行为预定义颜色测试
   await page.getByRole('button', { name: 'Append predefine color' }).click()
-  await page.locator('.tiny-color-picker__trigger').click()
+  await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
   await page.locator('.tiny-collapse-item__arrow').click()
-  await expect(page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(9)')).toBeVisible()
-})
\ No newline at end of file
+  await expect(
+    page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(9)')
+  ).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/color-picker/size.spec.ts b/examples/sites/demos/pc/app/color-picker/size.spec.ts
index 1d0de4900f..4257f873ba 100644
--- a/examples/sites/demos/pc/app/color-picker/size.spec.ts
+++ b/examples/sites/demos/pc/app/color-picker/size.spec.ts
@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('测试尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#size')
-  await expect(page.locator('.tiny-color-picker__trigger.tiny-color-picker--large')).toHaveCSS('width', '64px')
-  await expect(page.locator('.tiny-color-picker__trigger.tiny-color-picker--medium')).toHaveCSS('width', '48px')
-  await expect(page.locator('.tiny-color-picker__trigger.tiny-color-picker--small')).toHaveCSS('width', '36px')
-  await expect(page.locator('.tiny-color-picker__trigger.tiny-color-picker--mini')).toHaveCSS('width', '24px')
+  await expect(page.locator('.tiny-color-picker.tiny-color-picker--large')).toHaveCSS('width', '64px')
+  await expect(page.locator('.tiny-color-picker.tiny-color-picker--medium')).toHaveCSS('width', '48px')
+  await expect(page.locator('.tiny-color-picker.tiny-color-picker--small')).toHaveCSS('width', '36px')
+  await expect(page.locator('.tiny-color-picker.tiny-color-picker--mini')).toHaveCSS('width', '24px')
 })
diff --git a/packages/theme/src/color-picker/index.less b/packages/theme/src/color-picker/index.less
index 2e3dbb22d3..a8d164e071 100644
--- a/packages/theme/src/color-picker/index.less
+++ b/packages/theme/src/color-picker/index.less
@@ -1,130 +1,128 @@
 @import '../custom.less';
 @import './vars.less';
 
-@colorPickerPrefix: ~'@{css-prefix}color-picker';
-
-.@{colorPickerPrefix} {
-  .component-css-vars-colorpicker();
-
-  &__trigger {
-    position: relative;
-    width: 32px;
-    height: 32px;
+@color-picker-prefix-cls: ~'@{css-prefix}color-picker';
+
+.@{color-picker-prefix-cls} {
+  .component-css-vars-color-picker();
+
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ti-color-picker-border-radius-sm);
+  border: var(--ti-color-picker-border-weight) solid var(--ti-color-picker-border-color);
+  box-sizing: content-box;
+  padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal);
+  cursor: pointer;
+  .component-css-vars-color-picker();
+
+  &__inner {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
     border-radius: var(--ti-color-picker-border-radius-sm);
-    border: var(--ti-color-picker-border-weight) solid var(--ti-color-picker-border-color);
-    box-sizing: content-box;
-    padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal);
-    cursor: pointer;
-    .component-css-vars-colorpicker();
+    background: var(--ti-color-picker-bg-color);
+  }
 
-    .@{colorPickerPrefix}__inner {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    max-width: 300px;
+    z-index: var(--ti-color-picker__select__wrapper-zindex);
+    margin-top: var(--ti-color-picker-spacing);
+    background: var(--ti-color-picker__wrapper-bg);
+    gap: var(--ti-color-picker-spacing);
+    padding: var(--ti-color-picker-spacing-2x);
+    box-shadow: var(--ti-color-picker-shadow);
+
+    &__tools {
       display: flex;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--ti-color-picker-border-radius-sm);
-      background: var(--ti-color-picker-bg-color);
+
+      .tiny-input {
+        flex: 1 0 0;
+      }
+
+      .tiny-button-group {
+        flex: 0 0 auto;
+      }
     }
 
-    .@{colorPickerPrefix}__wrapper {
+    &__inner {
       display: flex;
-      flex-direction: column;
-      position: absolute;
-      max-width: 300px;
-      z-index: var(--ti-color-picker__select__wrapper-zindex);
-      margin-top: var(--ti-color-picker-spacing);
-      background: var(--ti-color-picker__wrapper-bg);
-      gap: var(--ti-color-picker-spacing);
-      padding: var(--ti-color-picker-spacing-2x);
-      box-shadow: var(--ti-color-picker-shadow);
-
-      &__tools {
-        display: flex;
-
-        .tiny-input {
-          flex: 1 0 0;
+      gap: 12px;
+      &__color-select {
+        width: 280px;
+        height: 180px;
+        position: relative;
+
+        .white {
+          background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
         }
 
-        .tiny-button-group {
-          flex: 0 0 auto;
+        .black {
+          background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
         }
-      }
 
-      &__inner {
-        display: flex;
-        gap: 12px;
-        &__color-select {
-          width: 280px;
-          height: 180px;
-          position: relative;
-
-          .white {
-            background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-          }
-
-          .black {
-            background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
-          }
-
-          .white,
-          .black {
-            position: absolute;
-            inset: 0;
-          }
-
-          .cursor {
-            position: absolute;
-            width: 12px;
-            height: 12px;
-            border-radius: 100%;
-            border: 1px solid white;
-            background: rgba(0, 0, 0, .15);
-            box-shadow: inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
-          }
+        .white,
+        .black {
+          position: absolute;
+          inset: 0;
         }
 
-        &__hue-select {
-          position: relative;
-          width: 18px;
-          border-radius: var(--ti-color-picker-border-radius-xs);
-          background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-
-          div {
-            position: absolute;
-            top: 0;
-            width: 100%;
-            height: 4px;
-            background: #fff;
-            box-shadow: 0 0 2px rgba(0, 0, 0, .6);
-            border-radius: 1px;
-          }
+        .cursor {
+          position: absolute;
+          width: 12px;
+          height: 12px;
+          border-radius: 100%;
+          border: 1px solid white;
+          background: rgba(0, 0, 0, .15);
+          box-shadow: inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
         }
       }
 
-      &__alpha {
+      &__hue-select {
         position: relative;
-        width: 100%;
-        height: 20px;
+        width: 18px;
         border-radius: var(--ti-color-picker-border-radius-xs);
-        margin-top: var(--ti-color-picker-spacing-2x);
-        &__slider {
-          width: 100%;
-          height: 100%;
-        }
+        background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
 
-        &__thumb {
-          width: 4px;
-          height: 100%;
+        div {
           position: absolute;
           top: 0;
-          left: 0;
+          width: 100%;
+          height: 4px;
           background: #fff;
           box-shadow: 0 0 2px rgba(0, 0, 0, .6);
           border-radius: 1px;
         }
       }
     }
+
+    &__alpha {
+      position: relative;
+      width: 100%;
+      height: 20px;
+      border-radius: var(--ti-color-picker-border-radius-xs);
+      margin-top: var(--ti-color-picker-spacing-2x);
+      &__slider {
+        width: 100%;
+        height: 100%;
+      }
+
+      &__thumb {
+        width: 4px;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #fff;
+        box-shadow: 0 0 2px rgba(0, 0, 0, .6);
+        border-radius: 1px;
+      }
+    }
   }
   &--large {
     width: var(--ti-color-picker-size-large-width);
diff --git a/packages/theme/src/color-picker/vars.less b/packages/theme/src/color-picker/vars.less
index 0413db578e..90afce4d07 100644
--- a/packages/theme/src/color-picker/vars.less
+++ b/packages/theme/src/color-picker/vars.less
@@ -1,4 +1,4 @@
-.component-css-vars-colorpicker() {
+.component-css-vars-color-picker() {
   // 默认按钮背景色(hide)
   --ti-color-picker-bg-color: var(--ti-common-color-transparent, transparent);
   // 按钮边框色
diff --git a/packages/theme/src/color-select-panel/index.less b/packages/theme/src/color-select-panel/index.less
index e83128ca5a..54ff77a107 100644
--- a/packages/theme/src/color-select-panel/index.less
+++ b/packages/theme/src/color-select-panel/index.less
@@ -1,8 +1,8 @@
 @import '../custom.less';
 @import './vars.less';
 
-@colorSelectPanelPrefix: ~'@{css-prefix}color-select-panel';
-.@{colorSelectPanelPrefix}__wrapper {
+@color-select-panel-prefix-cls: ~'@{css-prefix}color-select-panel';
+.@{color-select-panel-prefix-cls} {
   .component-css-vars-color-select-panel();
     display: flex;
     flex-direction: column;
@@ -110,8 +110,8 @@
     }
     .tiny-collapse-item__content{
       background: transparent;
-      .@{colorSelectPanelPrefix}__history,
-      .@{colorSelectPanelPrefix}__predefine{
+      .@{color-select-panel-prefix-cls}__history,
+      .@{color-select-panel-prefix-cls}__predefine{
         display: flex;
         flex-wrap: wrap;
         height: auto;
diff --git a/packages/vue/src/color-picker/__tests__/color-picker.spec.ts b/packages/vue/src/color-picker/__tests__/color-picker.spec.ts
index 8df3101eb9..e016b25809 100644
--- a/packages/vue/src/color-picker/__tests__/color-picker.spec.ts
+++ b/packages/vue/src/color-picker/__tests__/color-picker.spec.ts
@@ -11,7 +11,7 @@ describe('PC Mode', () => {
           modelValue: '#66ccff'
         }
       })
-      expect(wrapper.classes()).toContain('tiny-color-picker__trigger')
+      expect(wrapper.classes()).toContain('tiny-color-picker')
       expect(wrapper.find('div .tiny-color-picker__inner').attributes().style).toContain('102, 204, 255')
     })
     test('dynmaic', async () => {
diff --git a/packages/vue/src/color-picker/src/pc.vue b/packages/vue/src/color-picker/src/pc.vue
index e144e8eb07..8d61ecee1e 100644
--- a/packages/vue/src/color-picker/src/pc.vue
+++ b/packages/vue/src/color-picker/src/pc.vue
@@ -2,7 +2,7 @@
   <div
     :class="[
       {
-        'tiny-color-picker__trigger': true
+        'tiny-color-picker': true
       },
       state.size ? 'tiny-color-picker--' + state.size : ''
     ]"
diff --git a/packages/vue/src/color-select-panel/src/components/alpha-select.vue b/packages/vue/src/color-select-panel/src/components/alpha-select.vue
index 933834f52a..d894bdc9de 100644
--- a/packages/vue/src/color-select-panel/src/components/alpha-select.vue
+++ b/packages/vue/src/color-select-panel/src/components/alpha-select.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="tiny-color-select-panel__wrapper__alpha" ref="alphaWrapper">
+  <div class="tiny-color-select-panel__alpha" ref="alphaWrapper">
     <div
-      class="tiny-color-select-panel__wrapper__alpha__slider"
+      class="tiny-color-select-panel__alpha__slider"
       :style="{
         background: state.background
       }"
       ref="slider"
     ></div>
     <div
-      class="tiny-color-select-panel__wrapper__alpha__thumb"
+      class="tiny-color-select-panel__alpha__thumb"
       :style="{
         top: 0,
         left: 0
diff --git a/packages/vue/src/color-select-panel/src/components/hue-select.vue b/packages/vue/src/color-select-panel/src/components/hue-select.vue
index abf3d3e436..025e953225 100644
--- a/packages/vue/src/color-select-panel/src/components/hue-select.vue
+++ b/packages/vue/src/color-select-panel/src/components/hue-select.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="tiny-color-select-panel__wrapper__inner">
+  <div class="tiny-color-select-panel__inner">
     <div
-      class="tiny-color-select-panel__wrapper__inner__color-select"
+      class="tiny-color-select-panel__inner__color-select"
       ref="wrapper"
       :style="{
         background: state.background
@@ -11,7 +11,7 @@
       <div class="black"></div>
       <div class="cursor" ref="cursor"></div>
     </div>
-    <div class="tiny-color-select-panel__wrapper__inner__hue-select" ref="bar">
+    <div class="tiny-color-select-panel__inner__hue-select" ref="bar">
       <div ref="thumb"></div>
     </div>
   </div>
diff --git a/packages/vue/src/color-select-panel/src/pc.vue b/packages/vue/src/color-select-panel/src/pc.vue
index 308a644e59..7bdffaaf19 100644
--- a/packages/vue/src/color-select-panel/src/pc.vue
+++ b/packages/vue/src/color-select-panel/src/pc.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="tiny-color-select-panel__wrapper" @click.stop v-if="state.isShow" v-clickoutside="onCancel">
+  <div class="tiny-color-select-panel" @click.stop v-if="state.isShow" v-clickoutside="onCancel">
     <hue-select :color="state.color" @hue-update="onHueUpdate" @sv-update="onSVUpdate" />
     <alpha-select v-if="alpha" :color="state.color" @alpha-update="onAlphaUpdate" />
-    <div class="tiny-color-select-panel__wrapper__tools">
+    <div class="tiny-color-select-panel__tools">
       <tiny-input v-model="state.res" />
       <tiny-button-group>
         <tiny-button type="text" @click="onCancel">