diff --git a/components/style/color/colors.less b/components/style/color/colors.less
index 6bfda6b0e4..9793a86d27 100644
--- a/components/style/color/colors.less
+++ b/components/style/color/colors.less
@@ -45,6 +45,18 @@
 @green-9: color(~`colorPalette("@{green-6}", 9)`);
 @green-10: color(~`colorPalette("@{green-6}", 10)`);
 
+@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
+@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
+@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
+@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
+@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
+@magenta-6: #eb2f96;
+@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
+@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
+@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
+@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
+
+// alias of magenta
 @pink-1: color(~`colorPalette("@{pink-6}", 1)`);
 @pink-2: color(~`colorPalette("@{pink-6}", 2)`);
 @pink-3: color(~`colorPalette("@{pink-6}", 3)`);
@@ -83,19 +95,52 @@
 @yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
 @yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
 @yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
-@yellow-6: #faad14;
+@yellow-6: #fadb14;
 @yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
 @yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
 @yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
 @yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
 
-@lemon-1: color(~`colorPalette("@{lemon-6}", 1)`);
-@lemon-2: color(~`colorPalette("@{lemon-6}", 2)`);
-@lemon-3: color(~`colorPalette("@{lemon-6}", 3)`);
-@lemon-4: color(~`colorPalette("@{lemon-6}", 4)`);
-@lemon-5: color(~`colorPalette("@{lemon-6}", 5)`);
-@lemon-6: #fadb14;
-@lemon-7: color(~`colorPalette("@{lemon-6}", 7)`);
-@lemon-8: color(~`colorPalette("@{lemon-6}", 8)`);
-@lemon-9: color(~`colorPalette("@{lemon-6}", 9)`);
-@lemon-10: color(~`colorPalette("@{lemon-6}", 10)`);
+@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
+@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
+@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
+@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
+@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
+@volcano-6: #fa541c;
+@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
+@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
+@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
+@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
+
+@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
+@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
+@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
+@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
+@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
+@geekblue-6: #2f54eb;
+@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
+@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
+@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
+@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
+
+@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
+@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
+@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
+@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
+@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
+@lime-6: #a0d911;
+@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
+@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
+@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
+@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
+
+@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
+@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
+@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
+@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
+@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
+@gold-6: #faad14;
+@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
+@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
+@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
+@gold-10: color(~`colorPalette("@{gold-6}", 10)`);
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 1af531bedd..f395d95b51 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -10,7 +10,7 @@
 @success-color          : @green-6;
 @error-color            : @red-6;
 @highlight-color        : @red-6;
-@warning-color          : @yellow-6;
+@warning-color          : @gold-6;
 @normal-color           : #d9d9d9;
 
 // Color used by default to control hover and active backgrounds and for
@@ -345,7 +345,7 @@
 
 // Rate
 // ---
-@rate-star-color: @lemon-6;
+@rate-star-color: @yellow-6;
 @rate-star-bg: @border-color-split;
 
 // Card
diff --git a/components/tag/style/index.less b/components/tag/style/index.less
index fb81e411bd..bbd14e5034 100644
--- a/components/tag/style/index.less
+++ b/components/tag/style/index.less
@@ -98,7 +98,7 @@
     animation-fill-mode: both;
   }
 
-  @colors: pink, red, orange, yellow, cyan, green, blue, purple;
+  @colors: pink, magenta, red, orange, yellow, cyan, green, blue, purple;
 
   // mixin to iterate over colors and create CSS class for each one
   .make-color-classes(@i: length(@colors)) when (@i > 0) {
diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less
index eaf649ae32..271ec4fa74 100644
--- a/site/theme/static/colors.less
+++ b/site/theme/static/colors.less
@@ -28,6 +28,7 @@
     text-align: center;
     padding-top: 28px;
     font-family: Consolas;
+    font-size: 13px;
     &:last-child {
       margin-right: 0;
     }
@@ -36,6 +37,11 @@
       height: 90px;
     }
   }
+  &-item &-text {
+    transition: all .3s;
+    font-weight: lighter;
+    opacity: 0.8;
+  }
   &-item &-value {
     position: absolute;
     bottom: -4px;
@@ -58,7 +64,7 @@
 }
 
 .color-description {
-  font-size: 12px;
+  font-size: 14px;
   font-weight: lighter;
   color: #777;
   display: block;
@@ -68,6 +74,9 @@
   .main-color-item {
     padding-top: 4px;
   }
+  .main-color-text {
+    opacity: 1;
+  }
   .main-color-value {
     opacity: 0.7;
     bottom: 3px;
@@ -98,10 +107,13 @@
   .make-palatte(purple);
   .make-palatte(cyan);
   .make-palatte(green);
-  .make-palatte(pink);
+  .make-palatte(magenta);
   .make-palatte(red);
+  .make-palatte(volcano);
   .make-palatte(orange);
-  .make-palatte(lemon);
+  .make-palatte(gold);
   .make-palatte(yellow);
+  .make-palatte(lime);
+  .make-palatte(geekblue);
   .make-palatte(grey);
 }
diff --git a/site/theme/template/Color/ColorPalettes.jsx b/site/theme/template/Color/ColorPalettes.jsx
index 4f84807448..082060597c 100644
--- a/site/theme/template/Color/ColorPalettes.jsx
+++ b/site/theme/template/Color/ColorPalettes.jsx
@@ -23,8 +23,9 @@ class Palette extends Component {
   }
   render() {
     this.colorNodes = this.colorNodes || {};
-    const { name, description } = this.props.color;
+    const { name, description, english, chinese } = this.props.color;
     const colors = [];
+    const colorName = `${english} / ${chinese}`;
     for (let i = 1; i <= 10; i += 1) {
       const colorText = `${name}-${i}`;
       colors.push(
@@ -43,7 +44,7 @@ class Palette extends Component {
             }}
             title="click to copy color"
           >
-            {colorText}
+            <span className="main-color-text">{colorText}</span>
             {this.hexColors
               ? <span className="main-color-value">{this.hexColors[colorText]}</span>
               : null}
@@ -54,7 +55,7 @@ class Palette extends Component {
     return (
       <div className="color-palette">
         <div className="color-title">
-          {name}
+          {colorName}
           <span className="color-description">{description}</span>
         </div>
         <div className="main-color">{colors}</div>
@@ -67,42 +68,80 @@ const ColorPalettes = () => {
   const colors = [
     {
       name: 'red',
-      description: '热情、警示',
+      english: 'Dust Red',
+      chinese: '薄暮',
+      description: '斗志、奔放',
     },
     {
-      name: 'green',
-      description: '成功、通过、安全',
-    },
-    {
-      name: 'blue',
-      description: '专业、科技',
-    },
-    {
-      name: 'pink',
-      description: '典雅、明快、女性',
+      name: 'volcano',
+      english: 'Volcano',
+      chinese: '火山',
+      description: '醒目、澎湃',
     },
     {
       name: 'orange',
-      description: '醒目、温暖',
+      english: 'Sunset Orange',
+      chinese: '日暮',
+      description: '温暖、欢快',
     },
     {
-      name: 'purple',
-      description: '高雅、浪漫',
+      name: 'gold',
+      english: 'Calendula Gold',
+      chinese: '金盏花',
+      description: '活力、积极',
     },
     {
       name: 'yellow',
-      description: '活力、提示',
+      english: 'Sunrise Yellow',
+      chinese: '日出',
+      description: '出生、阳光',
     },
     {
-      name: 'lemon',
-      description: '活力、提示',
+      name: 'lime',
+      english: 'Lime Green',
+      chinese: '青柠',
+      description: '自然、生机',
+    },
+    {
+      name: 'green',
+      english: 'Polar Green',
+      chinese: '极光绿',
+      description: '健康、创新',
     },
     {
       name: 'cyan',
-      description: '清新、冷静、结构化',
+      english: 'Cyan',
+      chinese: '明青',
+      description: '希望、坚强',
+    },
+    {
+      name: 'blue',
+      english: 'Daybreak Blue',
+      chinese: '拂晓蓝',
+      description: '包容、科技、普惠',
+    },
+    {
+      name: 'geekblue',
+      english: 'Geek Blue',
+      chinese: '极客蓝',
+      description: '探索、钻研',
+    },
+    {
+      name: 'purple',
+      english: 'Golden Purple',
+      chinese: '酱紫',
+      description: '优雅、浪漫',
+    },
+    {
+      name: 'magenta',
+      english: 'Magenta',
+      chinese: '法式洋红',
+      description: '明快、感性',
     },
     {
       name: 'grey',
+      english: 'Grey',
+      chinese: '灰',
       description: '平稳、中性',
     },
   ];