Ant Design Colors
:art: Color palettes calculator of [Ant Design](https://ant.design/docs/spec/colors).
[](https://travis-ci.org/ant-design/ant-design-colors)
[](https://coveralls.io/r/ant-design/ant-design-colors?branch=master)
[](https://www.npmjs.org/package/@ant-design/colors)
[](http://npmjs.com/@ant-design/colors)
[](https://david-dm.org/ant-design/ant-design-colors)
[](https://david-dm.org/ant-design/ant-design-colors?type=dev) [](https://greenkeeper.io/)
## Install
```bash
$ npm install @ant-design/colors
// or
$ yarn add @ant-design/colors
```
## Usage
```bash
$ npm install @ant-design/colors --save
```
```js
import { red, volcano, gold, yellow, lime, green, cyan, blue, geekblue, purple, magenta, grey } from '@ant-design/colors';
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
console.log(blue.primary); // '#1890FF'
```
```js
import { generate, presetPalettes } from '@ant-design/colors';
// Generate color palettes by a given color
const colors = generate('#1890ff');
console.log(colors); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
console.log(presetPalettes);
/*
{
red: [...],
volcano: [...],
orange: [...],
gold: [...],
yellow: [...],
lime: [...],
green: [...],
cyan: [...],
blue: [...],
geekblue: [...],
purple: [...],
magenta: [...],
}
*/
```
```js
import { generate, presetDarkPalettes } from '@ant-design/colors';
// Generate dark color palettes by a given color
const colors = generate('#1890ff', {
theme: 'dark',
backgroundColor: '#141414'
});
console.log(colors); // ["#111d2c", "#112a45", "#15395b", "#164c7e", "#1765ad", "#177ddc", "#3993dc", "#65b7f3", "#8bcbf3", "#b2dcf3"]
console.log(presetDarkPalettes);
/*
{
red: [...],
volcano: [...],
orange: [...],
gold: [...],
yellow: [...],
lime: [...],
green: [...],
cyan: [...],
blue: [...],
geekblue: [...],
purple: [...],
magenta: [...],
}
*/
```
## Articles
- [Ant Design Colors](https://ant.design/docs/spec/colors)
- [Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)