diff --git a/packages/components/color-picker/src/index.vue b/packages/components/color-picker/src/index.vue
index 8312660e45..c726df068f 100644
--- a/packages/components/color-picker/src/index.vue
+++ b/packages/components/color-picker/src/index.vue
@@ -6,7 +6,7 @@
     :fallback-placements="['bottom', 'top', 'right', 'left']"
     :offset="0"
     :gpu-acceleration="false"
-    :popper-class="`el-color-picker__panel el-color-dropdown ${popperClass}`"
+    :popper-class="[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]"
     :stop-popper-mouse-event="false"
     effect="light"
     trigger="click"
@@ -15,7 +15,7 @@
   >
     <template #content>
       <div v-click-outside="hide">
-        <div class="el-color-dropdown__main-wrapper">
+        <div :class="ns.be('dropdown', 'main-wrapper')">
           <hue-slider ref="hue" class="hue-slider" :color="color" vertical />
           <sv-panel ref="svPanel" :color="color" />
         </div>
@@ -26,8 +26,8 @@
           :color="color"
           :colors="predefine"
         />
-        <div class="el-color-dropdown__btns">
-          <span class="el-color-dropdown__value">
+        <div :class="ns.be('dropdown', 'btns')">
+          <span :class="ns.be('dropdown', 'value')">
             <el-input
               v-model="customInput"
               :validate-event="false"
@@ -39,7 +39,7 @@
           <el-button
             size="small"
             type="text"
-            class="el-color-dropdown__link-btn"
+            :class="ns.be('dropdown', 'link-btn')"
             @click="clear"
           >
             {{ t('el.colorpicker.clear') }}
@@ -47,7 +47,7 @@
           <el-button
             plain
             size="small"
-            class="el-color-dropdown__btn"
+            :class="ns.be('dropdown', 'btn')"
             @click="confirmValue"
           >
             {{ t('el.colorpicker.confirm') }}
@@ -58,32 +58,29 @@
     <template #default>
       <div
         :class="[
-          'el-color-picker',
-          colorDisabled ? 'is-disabled' : '',
-          colorSize ? `el-color-picker--${colorSize}` : '',
+          ns.b('picker'),
+          ns.is('disabled', colorDisabled),
+          ns.bm('picker', colorSize),
         ]"
       >
-        <div v-if="colorDisabled" class="el-color-picker__mask"></div>
-        <div class="el-color-picker__trigger" @click="handleTrigger">
-          <span
-            class="el-color-picker__color"
-            :class="{ 'is-alpha': showAlpha }"
-          >
+        <div v-if="colorDisabled" :class="ns.be('picker', 'mask')"></div>
+        <div :class="ns.be('picker', 'trigger')" @click="handleTrigger">
+          <span :class="[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]">
             <span
-              class="el-color-picker__color-inner"
+              :class="ns.be('picker', 'color-inner')"
               :style="{
                 backgroundColor: displayedColor,
               }"
             >
               <el-icon
                 v-show="modelValue || showPanelColor"
-                class="el-color-picker__icon is-icon-arrow-down"
+                :class="[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]"
               >
                 <arrow-down />
               </el-icon>
               <el-icon
                 v-if="!modelValue && !showPanelColor"
-                class="el-color-picker__empty is-icon-close"
+                :class="[ns.be('picker', 'empty'), ns.is('icon-close')]"
               >
                 <close />
               </el-icon>
@@ -112,7 +109,7 @@ import ElButton from '@element-plus/components/button'
 import ElIcon from '@element-plus/components/icon'
 import { ClickOutside } from '@element-plus/directives'
 import { elFormItemKey, elFormKey } from '@element-plus/tokens'
-import { useLocale, useSize } from '@element-plus/hooks'
+import { useLocale, useSize, useNamespace } from '@element-plus/hooks'
 import ElTooltip from '@element-plus/components/tooltip'
 import ElInput from '@element-plus/components/input'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
@@ -162,6 +159,7 @@ export default defineComponent({
   emits: ['change', 'active-change', UPDATE_MODEL_EVENT],
   setup(props, { emit }) {
     const { t } = useLocale()
+    const ns = useNamespace('color')
     const elForm = inject(elFormKey, {} as ElFormContext)
     const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
 
@@ -189,7 +187,7 @@ export default defineComponent({
     })
     const colorSize = useSize()
     const colorDisabled = computed(() => {
-      return props.disabled || elForm.disabled
+      return !!(props.disabled || elForm.disabled)
     })
 
     const currentColor = computed(() => {
@@ -328,6 +326,7 @@ export default defineComponent({
       clear,
       confirmValue,
       t,
+      ns,
       hue,
       svPanel,
       alpha,