diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less
index 81f9e5197..6ce390b70 100644
--- a/src/less/lib/colors.less
+++ b/src/less/lib/colors.less
@@ -126,56 +126,3 @@
 @color-bi-border-warning: @border-color-warning;
 //边框提亮
 @color-bi-border-highlight: @border-color-highlight;
-
-//颜色百分比
-//green
-@color-bi-green-80: fade(@font-color-success, 80);
-@color-bi-green-60: fade(@font-color-success, 60);
-@color-bi-green-40: fade(@font-color-success, 40);
-@color-bi-green-30: fade(@font-color-success, 30);
-@color-bi-green-20: fade(@font-color-success, 20);
-@color-bi-green-10: fade(@font-color-success, 10);
-@color-bi-green-5: fade(@font-color-success, 5);
-
-//blue
-@color-bi-blue-80: fade(@font-color-highlight, 80);
-@color-bi-blue-60: fade(@font-color-highlight, 60);
-@color-bi-blue-40: fade(@font-color-highlight, 40);
-@color-bi-blue-30: fade(@font-color-highlight, 30);
-@color-bi-blue-20: fade(@font-color-highlight, 20);
-@color-bi-blue-10: fade(@font-color-highlight, 10);
-@color-bi-blue-5: fade(@font-color-highlight, 5);
-
-//light-blue
-@color-bi-light-blue-80: fade(@font-color-light-highlight, 80);
-@color-bi-light-blue-60: fade(@font-color-light-highlight, 60);
-@color-bi-light-blue-40: fade(@font-color-light-highlight, 40);
-@color-bi-light-blue-30: fade(@font-color-light-highlight, 30);
-@color-bi-light-blue-20: fade(@font-color-light-highlight, 20);
-@color-bi-light-blue-10: fade(@font-color-light-highlight, 10);
-@color-bi-light-blue-5: fade(@font-color-light-highlight, 5);
-
-// orange
-@color-bi-orange-80: fade(@font-color-warning, 80);
-@color-bi-orange-60: fade(@font-color-warning, 60);
-@color-bi-orange-40: fade(@font-color-warning, 40);
-@color-bi-orange-30: fade(@font-color-warning, 30);
-@color-bi-orange-20: fade(@font-color-warning, 20);
-@color-bi-orange-10: fade(@font-color-warning, 10);
-@color-bi-orange-5: fade(@font-color-warning, 5);
-
-// red
-@color-bi-red-80: fade(@font-color-negative, 80);
-@color-bi-red-60: fade(@font-color-negative, 60);
-@color-bi-red-40: fade(@font-color-negative, 40);
-@color-bi-red-30: fade(@font-color-negative, 30);
-@color-bi-red-20: fade(@font-color-negative, 20);
-@color-bi-red-10: fade(@font-color-negative, 10);
-@color-bi-red-5: fade(@font-color-negative, 5);
-
-// yellow
-@color-bi-yellow-80: fade(@font-color-yellow, 90);
-@color-bi-yellow-60: fade(@font-color-yellow, 60);
-@color-bi-yellow-40: fade(@font-color-yellow, 40);
-@color-bi-yellow-20: fade(@font-color-yellow, 20);
-@color-bi-yellow-5: fade(@font-color-yellow, 5);
diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less
index 4d99501bf..ecea10f85 100644
--- a/src/less/lib/constant.less
+++ b/src/less/lib/constant.less
@@ -20,6 +20,75 @@
 @opacity-15: 0.15;
 @opacity-20: 0.2;
 
+//色板
+//green
+@color-bi-green-100: #13cd66;
+@color-bi-green-80: fade(@color-bi-green-100, 80);
+@color-bi-green-60: fade(@color-bi-green-100, 60);
+@color-bi-green-40: fade(@color-bi-green-100, 40);
+@color-bi-green-30: fade(@color-bi-green-100, 30);
+@color-bi-green-20: fade(@color-bi-green-100, 20);
+@color-bi-green-10: fade(@color-bi-green-100, 10);
+@color-bi-green-5: fade(@color-bi-green-100, 5);
+
+//cyan
+@color-bi-green-100: #13cd66;
+@color-bi-green-80: fade(@color-bi-green-100, 80);
+@color-bi-green-60: fade(@color-bi-green-100, 60);
+@color-bi-green-40: fade(@color-bi-green-100, 40);
+@color-bi-green-30: fade(@color-bi-green-100, 30);
+@color-bi-green-20: fade(@color-bi-green-100, 20);
+@color-bi-green-10: fade(@color-bi-green-100, 10);
+@color-bi-green-5: fade(@color-bi-green-100, 5);
+
+//blue
+@color-bi-blue-100: #3685f2;
+@color-bi-blue-80: fade(@color-bi-blue-100, 80);
+@color-bi-blue-60: fade(@color-bi-blue-100, 60);
+@color-bi-blue-40: fade(@color-bi-blue-100, 40);
+@color-bi-blue-30: fade(@color-bi-blue-100, 30);
+@color-bi-blue-20: fade(@color-bi-blue-100, 20);
+@color-bi-blue-10: fade(@color-bi-blue-100, 10);
+@color-bi-blue-5: fade(@color-bi-blue-100, 5);
+
+//light-blue
+@color-bi-light-blue-100: #eaf2fd;
+@color-bi-light-blue-80: fade(@color-bi-light-blue-100, 80);
+@color-bi-light-blue-60: fade(@color-bi-light-blue-100, 60);
+@color-bi-light-blue-40: fade(@color-bi-light-blue-100, 40);
+@color-bi-light-blue-30: fade(@color-bi-light-blue-100, 30);
+@color-bi-light-blue-20: fade(@color-bi-light-blue-100, 20);
+@color-bi-light-blue-10: fade(@color-bi-light-blue-100, 10);
+@color-bi-light-blue-5: fade(@color-bi-light-blue-100, 5);
+
+// orange
+@color-bi-orange-100: #faaa39;
+@color-bi-orange-80: fade(@color-bi-orange-100, 80);
+@color-bi-orange-60: fade(@color-bi-orange-100, 60);
+@color-bi-orange-40: fade(@color-bi-orange-100, 40);
+@color-bi-orange-30: fade(@color-bi-orange-100, 30);
+@color-bi-orange-20: fade(@color-bi-orange-100, 20);
+@color-bi-orange-10: fade(@color-bi-orange-100, 10);
+@color-bi-orange-5: fade(@color-bi-orange-100, 5);
+
+// red
+@color-bi-red-100: #e65251;
+@color-bi-red-80: fade(@color-bi-red-100, 80);
+@color-bi-red-60: fade(@color-bi-red-100, 60);
+@color-bi-red-40: fade(@color-bi-red-100, 40);
+@color-bi-red-30: fade(@color-bi-red-100, 30);
+@color-bi-red-20: fade(@color-bi-red-100, 20);
+@color-bi-red-10: fade(@color-bi-red-100, 10);
+@color-bi-red-5: fade(@color-bi-red-100, 5);
+
+// yellow
+@font-color-yellow-100: #ffc101;
+@color-bi-yellow-80: fade(@font-color-yellow-100, 90);
+@color-bi-yellow-60: fade(@font-color-yellow-100, 60);
+@color-bi-yellow-40: fade(@font-color-yellow-100, 40);
+@color-bi-yellow-20: fade(@font-color-yellow-100, 20);
+@color-bi-yellow-5: fade(@font-color-yellow-100, 5);
+
 //font color
 @font-color-black: #232e40;
 @font-color-normal: #3d4d66;
@@ -35,15 +104,15 @@
 @font-color-gray: #999999;
 @font-color-white: #ffffff;
 @font-color-white-theme-dark: #20263b;
-@font-color-light-highlight: #eaf2fd;
+@font-color-light-highlight: @color-bi-light-blue-100;
 @font-color-medium-highlight: #d7e7fc;
-@font-color-highlight: #3685f2;
+@font-color-highlight: @color-bi-blue-100;
 @font-color-blue: #23beef;
 @font-color-light-blue: #e9f8fd;
-@font-color-success: #13cd66;
-@font-color-warning: #faaa39;
-@font-color-negative: #e65251;
-@font-color-yellow: #ffc101;
+@font-color-success: @color-bi-green-100;
+@font-color-warning: @color-bi-orange-100;
+@font-color-negative: @color-bi-red-100;
+@font-color-yellow: @font-color-yellow-100;
 
 //background color
 @background-color-black: #232E40;
@@ -54,9 +123,9 @@
 @background-color-default-theme-dark: #20263b;
 @background-color-normal: #f7f8fa;
 @background-color-normal-theme-dark: #191b2b;
-@background-color-light-highlight: #eaf2fd;
+@background-color-light-highlight: @color-bi-light-blue-100;
 @background-color-medium-highlight: #d7e7fc;
-@background-color-highlight: #3685f2;
+@background-color-highlight: @color-bi-blue-100;
 @background-color-blue: #23beef;
 @background-color-light-blue: #e9f8fd;
 @background-color-dark: #d4dadd;
@@ -70,15 +139,15 @@
 @background-color-disabled-theme-dark: #292f45;
 @background-color-light-disabled: #9ea6b2;
 @background-color-light-disabled-theme-dark: #878d9f;
-@background-color-yellow: #ffc101;
+@background-color-yellow: @font-color-yellow-100;
 
-@background-color-negative: #e65251;
+@background-color-negative: @color-bi-red-100;
 @background-color-light-negative: #ffecec;
 @background-color-dark-negative: #3A2940;
 @background-color-light-warning: #feeed7;
-@background-color-warning: #faaa39;
+@background-color-warning: @color-bi-orange-100;
 
-@background-color-dark-success: #13cd66;
+@background-color-dark-success: @color-bi-green-100;
 @background-color-light-success: #e1f4e7;
 @background-color-normal-success: #647185;
 
@@ -93,11 +162,11 @@
 @border-color-dark-gray-line-theme-dark: #606479;
 @border-color-dark-line: #9ea6b2;
 @border-color-dark-line-theme-dark: #878d9f;
-@border-color-highlight: #3685f2;
+@border-color-highlight: @color-bi-blue-100;
 
-@border-color-success: #13cd66;
+@border-color-success: @color-bi-green-100;
 @border-color-warning: #fbb03b;
-@border-color-negative: #e65251;
+@border-color-negative: @color-bi-red-100;
 @border-color-light-negative: #f4cbcb;
 @border-color-normal-success: #647185;