diff --git a/components/style/color/color-palette.js b/components/style/color/color-palette.js
index 4183edd9b7..c51950c278 100644
--- a/components/style/color/color-palette.js
+++ b/components/style/color/color-palette.js
@@ -1,5 +1,9 @@
 const tinyColor = require('./tiny-color');
 
+// We create a very complex algorithm which take the place of original tint/shade color system
+// to make sure no one can understand it 👻
+// and create an entire color palette magicly by inputing just a single primary color.
+// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
 module.exports = {
   install: function(less, pluginManager, functions) {
     functions.add('color-palette', function(arg1, arg2) {
diff --git a/components/style/color/colorPalette.less b/components/style/color/colorPalette.less
index 069991137c..7a0c6c9dda 100644
--- a/components/style/color/colorPalette.less
+++ b/components/style/color/colorPalette.less
@@ -1,75 +1,3 @@
 /* stylelint-disable no-duplicate-selectors */
-@import "bezierEasing";
-@import "tinyColor";
-
-// We create a very complex algorithm which take the place of original tint/shade color system
-// to make sure no one can understand it 👻
-// and create an entire color palette magicly by inputing just a single primary color.
-// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
-.colorPaletteMixin() {
-@functions: ~`(function() {
-  var hueStep = 2;
-  var saturationStep = 16;
-  var saturationStep2 = 5;
-  var brightnessStep1 = 5;
-  var brightnessStep2 = 15;
-  var lightColorCount = 5;
-  var darkColorCount = 4;
-
-  var getHue = function(hsv, i, isLight) {
-    var hue;
-    if (hsv.h >= 60 && hsv.h <= 240) {
-      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
-    } else {
-      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
-    }
-    if (hue < 0) {
-      hue += 360;
-    } else if (hue >= 360) {
-      hue -= 360;
-    }
-    return Math.round(hue);
-  };
-  var getSaturation = function(hsv, i, isLight) {
-    var saturation;
-    if (isLight) {
-      saturation = Math.round(hsv.s * 100) - saturationStep * i;
-    } else if (i == darkColorCount) {
-      saturation = Math.round(hsv.s * 100) + saturationStep;
-    } else {
-      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
-    }
-    if (saturation > 100) {
-      saturation = 100;
-    }
-    if (isLight && i === lightColorCount && saturation > 10) {
-      saturation = 10;
-    }
-    if (saturation < 6) {
-      saturation = 6;
-    }
-    return Math.round(saturation);
-  };
-  var getValue = function(hsv, i, isLight) {
-    if (isLight) {
-      return Math.round(hsv.v * 100) + brightnessStep1 * i;
-    }
-    return Math.round(hsv.v * 100) - brightnessStep2 * i;
-  };
-
-  this.colorPalette = function(color, index) {
-    var isLight = index <= 6;
-    var hsv = tinycolor(color).toHsv();
-    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
-    return tinycolor({
-      h: getHue(hsv, i, isLight),
-      s: getSaturation(hsv, i, isLight),
-      v: getValue(hsv, i, isLight),
-    }).toHexString();
-  };
-})()`;
-}
-// It is hacky way to make this function will be compiled preferentially by less
-// resolve error: `ReferenceError: colorPalette is not defined`
-// https://github.com/ant-design/ant-motion/issues/44
-.colorPaletteMixin();
+@import 'bezierEasing';
+@import 'tinyColor';