diff --git a/.vscode/settings.json b/.vscode/settings.json
index f996fc6..3343cef 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,6 @@
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "references.preferredLocation": "peek"
 }
diff --git a/components.d.ts b/components.d.ts
index ec314e0..328b97d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     'Card.story': typeof import('./src/components/Data/card.story.vue')['default']
     'Cascader.story': typeof import('./src/components/Form/cascader.story.vue')['default']
     'Checkbox.story': typeof import('./src/components/Form/checkbox.story.vue')['default']
+    'Color.story': typeof import('./src/components/Basic/Color/color.story.vue')['default']
     'ColorPicker.story': typeof import('./src/components/Form/colorPicker.story.vue')['default']
     'Container.story': typeof import('./src/components/Basic/Container/container.story.vue')['default']
     'DatePicker.story': typeof import('./src/components/Form/datePicker.story.vue')['default']
@@ -74,15 +75,17 @@ declare module '@vue/runtime-core' {
     'Empty.story': typeof import('./src/components/Data/empty.story.vue')['default']
     HstColor: typeof import('./src/controls-components/HstColor.vue')['default']
     'Icon.story': typeof import('./src/components/Basic/Icon/icon.story.vue')['default']
-    'Iconsads.story': typeof import('./src/components/Basic/Icon/iconsads.story.vue')['default']
     'Input.story': typeof import('./src/components/Form/input.story.vue')['default']
     'InputNumber.story': typeof import('./src/components/Form/inputNumber.story.vue')['default']
     'Link.story': typeof import('./src/components/Basic/Link/link.story.vue')['default']
+    MainColor: typeof import('./src/components/Basic/Color/main-color.vue')['default']
+    NeutralColor: typeof import('./src/components/Basic/Color/neutral-color.vue')['default']
     'Pagination.story': typeof import('./src/components/Data/pagination.story.vue')['default']
     'Progress.story': typeof import('./src/components/Data/progress.story.vue')['default']
     'Radio.story': typeof import('./src/components/Form/radio.story.vue')['default']
     'Rate.story': typeof import('./src/components/Form/rate.story.vue')['default']
     'Result.story': typeof import('./src/components/Data/result.story.vue')['default']
+    SecondaryColors: typeof import('./src/components/Basic/Color/secondary-colors.vue')['default']
     'Select.story': typeof import('./src/components/Form/Select/select.story.vue')['default']
     'Skeleton.story': typeof import('./src/components/Data/skeleton.story.vue')['default']
     'Space.story': typeof import('./src/components/Basic/space.story.vue')['default']
diff --git a/histoire.config.ts b/histoire.config.ts
index 7b8a96e..3054171 100644
--- a/histoire.config.ts
+++ b/histoire.config.ts
@@ -40,4 +40,5 @@ export default defineConfig({
     responsiveDisabled: true,
     autoPropsDisabled: true,
   },
+  sandboxDarkClass: 'dark',
 })
diff --git a/package.json b/package.json
index 05ab70c..033eb0f 100644
--- a/package.json
+++ b/package.json
@@ -25,10 +25,11 @@
     "commander": "^9.4.1",
     "consola": "^2.15.3",
     "eslint": "^8.25.0",
-    "histoire": "npm:histoire@latest",
+    "histoire": "0.11.5",
     "inquirer": "^9.1.3",
     "lint-staged": "^13.0.3",
     "pathe": "^0.3.9",
+    "sass": "^1.55.0",
     "simple-git-hooks": "^2.8.1",
     "tsx": "^3.10.4",
     "typescript": "^4.6.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef09cec..222a58d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,10 +10,11 @@ specifiers:
   consola: ^2.15.3
   element-plus: npm:element-plus@latest
   eslint: ^8.25.0
-  histoire: npm:histoire@latest
+  histoire: 0.11.5
   inquirer: ^9.1.3
   lint-staged: ^13.0.3
   pathe: ^0.3.9
+  sass: ^1.55.0
   simple-git-hooks: ^2.8.1
   tsx: ^3.10.4
   typescript: ^4.6.4
@@ -36,16 +37,17 @@ devDependencies:
   commander: 9.4.1
   consola: 2.15.3
   eslint: 8.25.0
-  histoire: 0.11.5_vite@3.1.8
+  histoire: 0.11.5_sass@1.55.0+vite@3.1.8
   inquirer: 9.1.4
   lint-staged: 13.0.3
   pathe: 0.3.9
+  sass: 1.55.0
   simple-git-hooks: 2.8.1
   tsx: 3.10.4
   typescript: 4.8.4
   unplugin-auto-import: 0.11.3_@vueuse+core@9.3.1
   unplugin-vue-components: 0.22.9_vue@3.2.41
-  vite: 3.1.8
+  vite: 3.1.8_sass@1.55.0
   vue-tsc: 1.0.8_typescript@4.8.4
 
 packages:
@@ -348,7 +350,7 @@ packages:
       '@histoire/controls': 0.11.5
       '@histoire/shared': 0.11.5_vite@3.1.8
       '@histoire/vendors': 0.11.5
-      histoire: 0.11.5_vite@3.1.8
+      histoire: 0.11.5_sass@1.55.0+vite@3.1.8
       vue: 3.2.41
     transitivePeerDependencies:
       - vite
@@ -364,7 +366,7 @@ packages:
       chokidar: 3.5.3
       pathe: 0.2.0
       picocolors: 1.0.0
-      vite: 3.1.8
+      vite: 3.1.8_sass@1.55.0
     dev: true
 
   /@histoire/vendors/0.11.5:
@@ -709,7 +711,7 @@ packages:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.1.8
+      vite: 3.1.8_sass@1.55.0
       vue: 3.2.41
     dev: true
 
@@ -2483,7 +2485,7 @@ packages:
       tslib: 2.4.0
     dev: true
 
-  /histoire/0.11.5_vite@3.1.8:
+  /histoire/0.11.5_sass@1.55.0+vite@3.1.8:
     resolution: {integrity: sha512-+27sEYAd45g8LUbnsJZHbnNrXsIV9CMoT7S+Mb6OiCTOKFCOUVO96XwRRPtSLDbmcouIsc4VVcqsLCJX7ol/9w==}
     hasBin: true
     peerDependencies:
@@ -2519,8 +2521,8 @@ packages:
       shiki: 0.10.1
       sirv: 2.0.2
       tinypool: 0.1.3
-      vite: 3.1.8
-      vite-node: 0.23.4
+      vite: 3.1.8_sass@1.55.0
+      vite-node: 0.23.4_sass@1.55.0
       vite-plugin-inspect: 0.7.5_vite@3.1.8
     transitivePeerDependencies:
       - encoding
@@ -2588,6 +2590,10 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable/4.1.0:
+    resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
+    dev: true
+
   /import-fresh/3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -3737,6 +3743,16 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
+  /sass/1.55.0:
+    resolution: {integrity: sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.1.0
+      source-map-js: 1.0.2
+    dev: true
+
   /scule/0.3.2:
     resolution: {integrity: sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==}
     dev: true
@@ -4328,7 +4344,7 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-node/0.23.4:
+  /vite-node/0.23.4_sass@1.55.0:
     resolution: {integrity: sha512-8VuDGwTWIvwPYcbw8ZycMlwAwqCmqZfLdFrDK75+o+6bWYpede58k6AAXN9ioU+icW82V4u1MzkxLVhhIoQ9xA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -4336,7 +4352,7 @@ packages:
       debug: 4.3.4
       mlly: 0.5.16
       pathe: 0.2.0
-      vite: 3.1.8
+      vite: 3.1.8_sass@1.55.0
     transitivePeerDependencies:
       - less
       - sass
@@ -4357,12 +4373,12 @@ packages:
       kolorist: 1.6.0
       sirv: 2.0.2
       ufo: 0.8.6
-      vite: 3.1.8
+      vite: 3.1.8_sass@1.55.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite/3.1.8:
+  /vite/3.1.8_sass@1.55.0:
     resolution: {integrity: sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -4385,6 +4401,7 @@ packages:
       postcss: 8.4.18
       resolve: 1.22.1
       rollup: 2.78.1
+      sass: 1.55.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
diff --git a/src/components/Basic/Color/color.story.vue b/src/components/Basic/Color/color.story.vue
new file mode 100644
index 0000000..910f7e2
--- /dev/null
+++ b/src/components/Basic/Color/color.story.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <Story
+    title="Basic/Color"
+    :layout="{
+      type: 'single',
+      iframe: true,
+    }"
+    icon="carbon:container-software"
+  >
+    <Variant title="Basic Usage" source=" ">
+      <h1>
+        Color
+      </h1>
+      <p>
+        Element Plus uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
+      </p>
+      <h2>Main Color</h2>
+      <p>
+        The main color of Element Plus is bright and friendly blue.
+      </p>
+      <MainColor />
+      <h2>Secondary Color</h2>
+      <p>
+        Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
+      </p>
+      <SecondaryColors />
+      <h2>
+        Neutral Color
+      </h2>
+      <p>
+        Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.
+      </p>
+      <NeutralColor />
+    </Variant>
+  </Story>
+</template>
+
+<style lang="scss">
+.demo-color-box {
+  position: relative;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 8px 0;
+  height: 112px;
+  box-sizing: border-box;
+  color: var(--el-color-white);
+  font-size: 14px;
+
+  .bg-color-sub {
+    width: 100%;
+    height: 40px;
+    left: 0;
+    bottom: 0;
+    position: absolute;
+
+    .bg-blue-sub-item {
+      height: 100%;
+      display: inline-block;
+
+      &:first-child {
+        border-radius: 0 0 0 var(--el-border-radius-base);
+      }
+    }
+
+    .bg-secondary-sub-item {
+      height: 100%;
+      display: inline-block;
+      &:first-child {
+        border-radius: 0 0 0 var(--el-border-radius-base);
+      }
+    }
+  }
+
+  .value {
+    margin-top: 2px;
+  }
+}
+
+.demo-color-box-lite {
+  color: var(--el-text-color-primary);
+}
+</style>
diff --git a/src/components/Basic/Color/main-color.vue b/src/components/Basic/Color/main-color.vue
new file mode 100644
index 0000000..9e85999
--- /dev/null
+++ b/src/components/Basic/Color/main-color.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { useCopyColor } from '@utils'
+
+const primary = useCssVar('--el-color-primary')
+const colorLevel = [3, 5, 7, 8, 9].map(i => `light-${i}`)
+colorLevel.unshift('dark-2')
+
+const { copyColor } = useCopyColor()
+</script>
+
+<template>
+  <el-row :gutter="12">
+    <el-col :span="10" :xs="{ span: 12 }">
+      <div class="demo-color-box" :style="{ background: primary }">
+        Brand Color
+        <div class="value" text="xs">
+          {{ primary.toUpperCase() }}
+        </div>
+        <div class="bg-color-sub" :style="{ background: primary }">
+          <div
+            v-for="level in colorLevel"
+            :key="level"
+            class="bg-blue-sub-item cursor-pointer hover:shadow"
+            :style="{
+              width: `${100 / 6}%`,
+              background: `var(--el-color-primary-${level})`,
+            }"
+            @click="copyColor(`primary-${level}`)"
+          />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
diff --git a/src/components/Basic/Color/neutral-color.vue b/src/components/Basic/Color/neutral-color.vue
new file mode 100644
index 0000000..4db5ab7
--- /dev/null
+++ b/src/components/Basic/Color/neutral-color.vue
@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import { getCssVarName, getCssVarValue } from '@utils'
+import { isDark } from '@/dark-mode'
+
+const backgroundTypes = ['page', '', 'overlay']
+const backgroundColors = backgroundTypes.map((type) => {
+  return {
+    name: type
+      ? `${type[0].toUpperCase() + type.slice(1)} Background`
+      : 'Base Background',
+    var: getCssVarValue(getCssVarName('bg-color', type)),
+  }
+})
+
+const borderTypes = ['darker', 'dark', '', 'light', 'lighter', 'extra-light']
+const borderColors = borderTypes.map((type) => {
+  return {
+    name: type
+      ? `${type[0].toUpperCase() + type.slice(1)} Border`
+      : 'Base Border',
+    var: getCssVarValue(getCssVarName('border-color', type)),
+  }
+})
+
+const fillTypes = [
+  'darker',
+  'dark',
+  '',
+  'light',
+  'lighter',
+  'extra-light',
+  'blank',
+]
+const fillColors = fillTypes.map((type) => {
+  return {
+    name: type ? `${type[0].toUpperCase() + type.slice(1)} Fill` : 'Base Fill',
+    var: getCssVarValue(getCssVarName('fill-color', type)),
+  }
+})
+
+const textTypes = ['primary', 'regular', 'secondary', 'placeholder', 'disabled']
+const textColors = textTypes.map((type) => {
+  return {
+    name: `${type[0].toUpperCase() + type.slice(1)} Text`,
+    var: getCssVarValue(getCssVarName('text-color', type)),
+  }
+})
+
+const black = '#000000'
+const white = '#FFFFFF'
+</script>
+
+<template>
+  <el-row :gutter="12">
+    <el-col :span="6" :xs="{ span: 12 }">
+      <div class="demo-color-box-group">
+        <div
+          v-for="(text, i) in textColors"
+          :key="i"
+          class="demo-color-box demo-color-box-other"
+          :style="{
+            color: 'var(--el-bg-color)',
+            background: text.var.value,
+          }"
+        >
+          {{ text.name }}
+          <div class="value" text="xs">
+            {{ text.var.value.toUpperCase() }}
+          </div>
+        </div>
+      </div>
+    </el-col>
+
+    <el-col :span="6" :xs="{ span: 12 }">
+      <div class="demo-color-box-group">
+        <div
+          v-for="(border, i) in borderColors"
+          :key="i"
+          class="demo-color-box demo-color-box-other demo-color-box-lite"
+          :style="{ background: border.var.value }"
+        >
+          {{ border.name }}
+          <div class="value" text="xs">
+            {{ border.var.value.toUpperCase() }}
+          </div>
+        </div>
+      </div>
+    </el-col>
+
+    <el-col :span="6" :xs="{ span: 12 }">
+      <div class="demo-color-box-group">
+        <div
+          v-for="(fill, i) in fillColors"
+          :key="i"
+          class="demo-color-box demo-color-box-other demo-color-box-lite"
+          :style="{
+            background: fill.var.value,
+            border: `1px solid ${
+              fill.name === 'Blank Fill'
+                ? 'var(--el-border-color-light)'
+                : 'transparent'
+            }`,
+          }"
+        >
+          {{ fill.name }}
+          <div class="value" text="xs">
+            {{ fill.var.value.toUpperCase() }}
+          </div>
+        </div>
+      </div>
+    </el-col>
+
+    <el-col :span="6" :xs="{ span: 12 }">
+      <div class="demo-color-box-group">
+        <div
+          class="demo-color-box demo-color-box-other"
+          :style="{ background: black }"
+        >
+          Basic Black
+          <div class="value" text="xs">
+            {{ black }}
+          </div>
+        </div>
+        <div
+          class="demo-color-box demo-color-box-other"
+          :style="{
+            background: white,
+            color: '#303133',
+            border: '1px solid #eee',
+          }"
+        >
+          Basic White
+          <div class="value" text="xs">
+            {{ white }}
+          </div>
+        </div>
+        <div
+          class="demo-color-box demo-color-box-other demo-color-box-lite bg-transparent"
+        >
+          Transparent
+          <div class="value" text="xs">
+            Transparent
+          </div>
+        </div>
+
+        <div
+          v-for="(bg, i) in backgroundColors"
+          :key="i"
+          class="demo-color-box demo-color-box-other demo-color-box-lite"
+          :style="{
+            background: bg.var.value,
+            border:
+              `1px solid ${
+                !isDark || bg.name === 'Base Background'
+                  ? 'var(--el-border-color-light)'
+                  : 'transparent'}`,
+          }"
+        >
+          {{ bg.name }}
+          <div class="value" text="xs">
+            {{ bg.var.value.toUpperCase() }}
+          </div>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
diff --git a/src/components/Basic/Color/secondary-colors.vue b/src/components/Basic/Color/secondary-colors.vue
new file mode 100644
index 0000000..85faec5
--- /dev/null
+++ b/src/components/Basic/Color/secondary-colors.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { getColorValue, useCopyColor } from '@utils'
+
+const colorsType = ['success', 'warning', 'danger', 'info']
+
+const colorLevel = [3, 5, 7, 8, 9].map(item => `light-${item}`)
+colorLevel.unshift('dark-2')
+
+const { copyColor } = useCopyColor()
+</script>
+
+<template>
+  <el-row :gutter="12">
+    <el-col
+      v-for="(type, i) in colorsType"
+      :key="i"
+      :span="6"
+      :xs="{ span: 12 }"
+    >
+      <div class="demo-color-box" :style="{ background: getColorValue(type) }">
+        {{ type.charAt(0).toUpperCase() + type.slice(1) }}
+        <div class="value" text="xs">
+          {{ getColorValue(type).toUpperCase() }}
+        </div>
+        <div class="bg-color-sub">
+          <div
+            v-for="(level, key) in colorLevel"
+            :key="key"
+            class="bg-secondary-sub-item transition cursor-pointer hover:shadow"
+            :style="{
+              width: `${100 / 6}%`,
+              background: `var(--el-color-${type}-${level})`,
+            }"
+            @click="copyColor(`${type}-${level}`)"
+          />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
diff --git a/src/dark-mode.ts b/src/dark-mode.ts
index 110ee1a..634ac29 100644
--- a/src/dark-mode.ts
+++ b/src/dark-mode.ts
@@ -1,6 +1,6 @@
+export const isDark = useDark({ valueDark: '' })
 const setDarkMode = () => {
   setTimeout(() => {
-    const isDark = useDark({ valueDark: '' })
     const vueuseColorScheme = useLocalStorage('vueuse-color-scheme', 'auto')
     const classList = Array.from(document.documentElement.classList)
     let colorMode
diff --git a/src/theme/style.css b/src/theme/style.css
index 93a8f86..3547241 100644
--- a/src/theme/style.css
+++ b/src/theme/style.css
@@ -1,6 +1,6 @@
 body{
   font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\5fae\8f6f\96c5\9ed1,Arial,sans-serif;
-  color: #606266;
+  /* color: #606266; */
 }
 
 #app code{
diff --git a/src/utils/attribute.ts b/src/utils/attribute.ts
new file mode 100644
index 0000000..d9e1c68
--- /dev/null
+++ b/src/utils/attribute.ts
@@ -0,0 +1,3 @@
+export function isAttribute(flag: boolean, name: string): string {
+  return flag ? `\n  ${name}` : ''
+}
diff --git a/src/utils/color.ts b/src/utils/color.ts
new file mode 100644
index 0000000..053d112
--- /dev/null
+++ b/src/utils/color.ts
@@ -0,0 +1,62 @@
+import { ElMessage } from 'element-plus'
+import { isDark } from '@/dark-mode'
+import 'element-plus/theme-chalk/el-message.css'
+
+export const getCssVarName = (namespace: string, type: string) => {
+  return type ? `--el-${namespace}-${type}` : `--el-${namespace}`
+}
+
+/**
+ * get css var value by css var name
+ * @param name
+ * @returns
+ */
+export const getCssVarValue = (name: string) => {
+  const val = ref(
+    getComputedStyle(document.documentElement).getPropertyValue(name),
+  )
+  watch(
+    () => isDark.value,
+    () => {
+      setTimeout(() => {
+        val.value = getComputedStyle(document.documentElement).getPropertyValue(
+          name,
+        )
+      }, 100)
+    },
+  )
+  return val
+}
+
+export const getColorValue = (type: string) => {
+  const color = getComputedStyle(document.documentElement).getPropertyValue(
+    `--el-color-${type}`,
+  )
+  return color
+}
+
+// copy color
+
+export const useCopyColor = () => {
+  const source = ref('')
+  const { copy, isSupported } = useClipboard({ source })
+
+  const copyColor = async (colorType: string) => {
+    const colorValue = getColorValue(colorType)
+    source.value = colorValue
+    if (!isSupported)
+      ElMessage.error('Copy failed')
+
+    try {
+      await copy()
+      ElMessage.success(`--el-color-${colorType}: ${source.value}`)
+    }
+    catch (e: any) {
+      ElMessage.error(e.message)
+    }
+  }
+
+  return {
+    copyColor,
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index d9e1c68..e733542 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,2 @@
-export function isAttribute(flag: boolean, name: string): string {
-  return flag ? `\n  ${name}` : ''
-}
+export * from './attribute'
+export * from './color'