diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6308f0944..4e76b01782 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING CHANGES
 - `type` prop is replaced with `color` in `Divider` component @layershifter ([#558](https://github.com/stardust-ui/react/pull/558))
+- Remove `createColorVariants` and `setColorLightness` utils @layershifter ([#583](https://github.com/stardust-ui/react/pull/583))
 
 ### Fixes
 - Fix `Provider` is not executing staticStyles with the merged siteVariables @mnajdova ([#559](https://github.com/stardust-ui/react/pull/559))
diff --git a/package.json b/package.json
index 7bca49abe9..c0023458f8 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
   "homepage": "https://github.com/stardust-ui/react#readme",
   "dependencies": {
     "classnames": "^2.2.5",
-    "color": "^3.1.0",
     "downshift": "^3.0.0",
     "fela": "^6.1.7",
     "fela-plugin-fallback-value": "^5.0.17",
@@ -91,6 +90,7 @@
     "@types/react-is": "^16.5.0",
     "@types/react-router": "^4.0.27",
     "awesome-typescript-loader": "^5.2.1",
+    "color": "^3.1.0",
     "connect-history-api-fallback": "^1.3.0",
     "copy-to-clipboard": "^3.0.8",
     "copy-webpack-plugin": "^4.5.2",
diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts
deleted file mode 100644
index f6de1a60f2..0000000000
--- a/src/lib/colorUtils.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as Color from 'color'
-import { ColorVariants } from '../themes/types'
-
-export const setColorLightness = (base: string, value: number) =>
-  Color(base)
-    .hsl()
-    .lightness(100 - value)
-    .hex()
-
-export const createColorVariants = (base: string): ColorVariants => ({
-  50: setColorLightness(base, 5),
-  100: setColorLightness(base, 10),
-  200: setColorLightness(base, 20),
-  300: setColorLightness(base, 30),
-  400: setColorLightness(base, 40),
-  500: base,
-  600: setColorLightness(base, 60),
-  700: setColorLightness(base, 70),
-  800: setColorLightness(base, 80),
-  900: setColorLightness(base, 90),
-})
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 02b21dd9f1..8616a696db 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -3,7 +3,6 @@ import * as commonPropTypes from './commonPropTypes'
 
 export { default as AutoControlledComponent } from './AutoControlledComponent'
 export { default as childrenExist } from './childrenExist'
-export * from './colorUtils'
 export { default as UIComponent } from './UIComponent'
 export { EventStack } from './eventStack'
 export { felaRenderer, felaRtlRenderer } from './felaRenderer'
diff --git a/src/themes/default/colors.ts b/src/themes/default/colors.ts
index 2b7851dcc6..640888e214 100644
--- a/src/themes/default/colors.ts
+++ b/src/themes/default/colors.ts
@@ -1,20 +1,129 @@
-import { createColorVariants } from '../../lib'
 import { ColorPalette, ContextualColors, EmphasisColors, NaturalColors } from '../types'
 
 export const naturalColors: NaturalColors = {
-  blue: createColorVariants('#0a84ff'),
-  green: createColorVariants('#30e60b'),
-  grey: createColorVariants('#737373'),
-  orange: createColorVariants('#ff9400'),
-  pink: createColorVariants('#ff1ad9'),
-  purple: createColorVariants('#9400ff'),
-  teal: createColorVariants('#00feff'),
-  red: createColorVariants('#ff0039'),
-  yellow: createColorVariants('#ffe900'),
+  blue: {
+    50: '#E5F2FF',
+    100: '#CCE5FF',
+    200: '#99CCFF',
+    300: '#66B2FF',
+    400: '#3399FF',
+    500: '#0a84ff',
+    600: '#0066CC',
+    700: '#004C99',
+    800: '#003366',
+    900: '#001933',
+  },
+  green: {
+    50: '#EBFEE7',
+    100: '#D6FDCE',
+    200: '#ADFA9E',
+    300: '#84F86D',
+    400: '#5CF63C',
+    500: '#30e60b',
+    600: '#29C309',
+    700: '#1E9207',
+    800: '#146105',
+    900: '#0A3102',
+  },
+  grey: {
+    50: '#F2F2F2',
+    100: '#E6E6E6',
+    200: '#CCCCCC',
+    300: '#B3B3B3',
+    400: '#999999',
+    500: '#737373',
+    600: '#666666',
+    700: '#4D4D4D',
+    800: '#333333',
+    900: '#1A1A1A',
+  },
+  orange: {
+    50: '#FFF4E5',
+    100: '#FFEACC',
+    200: '#FFD499',
+    300: '#FFBF66',
+    400: '#FFA933',
+    500: '#ff9400',
+    600: '#CC7600',
+    700: '#995900',
+    800: '#663B00',
+    900: '#331E00',
+  },
+  pink: {
+    50: '#FFE5FB',
+    100: '#FFCCF7',
+    200: '#FF99EE',
+    300: '#FF66E6',
+    400: '#FF33DD',
+    500: '#ff1ad9',
+    600: '#CC00AA',
+    700: '#990080',
+    800: '#660055',
+    900: '#33002B',
+  },
+  purple: {
+    50: '#F4E5FF',
+    100: '#EACCFF',
+    200: '#D499FF',
+    300: '#BF66FF',
+    400: '#A933FF',
+    500: '#9400ff',
+    600: '#7600CC',
+    700: '#590099',
+    800: '#3B0066',
+    900: '#1E0033',
+  },
+  teal: {
+    50: '#E5FFFF',
+    100: '#CCFFFF',
+    200: '#99FFFF',
+    300: '#66FEFF',
+    400: '#33FEFF',
+    500: '#00feff',
+    600: '#00CBCC',
+    700: '#009899',
+    800: '#006666',
+    900: '#003333',
+  },
+  red: {
+    50: '#FFE5EB',
+    100: '#FFCCD7',
+    200: '#FF99B0',
+    300: '#FF6688',
+    400: '#FF3361',
+    500: '#ff0039',
+    600: '#CC002E',
+    700: '#990022',
+    800: '#660017',
+    900: '#33000B',
+  },
+  yellow: {
+    50: '#FFFDE5',
+    100: '#FFFBCC',
+    200: '#FFF699',
+    300: '#FFF266',
+    400: '#FFED33',
+    500: '#ffe900',
+    600: '#CCBA00',
+    700: '#998C00',
+    800: '#665D00',
+    900: '#332F00',
+  },
 }
 
 export const emphasisColors: EmphasisColors = {
-  primary: createColorVariants('#0a84ff'),
+  primary: {
+    50: '#E5F2FF',
+    100: '#CCE5FF',
+    200: '#99CCFF',
+    300: '#66B2FF',
+    400: '#3399FF',
+    500: '#0a84ff',
+    600: '#0066CC',
+    700: '#004C99',
+    800: '#003366',
+    900: '#001933',
+  },
   secondary: naturalColors.grey,
 }