UNPKG

3.02 kBMarkdownView Raw
1<h1 align="center">Ant Design Colors</h1>
2
3<div align="center">
4
5:art: Color palettes calculator of [Ant Design](https://ant.design/docs/spec/colors).
6
7[![Travis](https://img.shields.io/travis/ant-design/ant-design-colors/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-colors)
8[![Test coverage](https://img.shields.io/coveralls/ant-design/ant-design-colors.svg?style=flat-square)](https://coveralls.io/r/ant-design/ant-design-colors?branch=master)
9[![npm package](https://img.shields.io/npm/v/@ant-design/colors.svg?style=flat-square)](https://www.npmjs.org/package/@ant-design/colors)
10[![NPM downloads](http://img.shields.io/npm/dm/@ant-design/colors.svg?style=flat-square)](http://npmjs.com/@ant-design/colors)
11
12[![Dependencies](https://img.shields.io/david/ant-design/ant-design-colors.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-colors)
13[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design-colors.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-colors?type=dev) [![Greenkeeper badge](https://badges.greenkeeper.io/ant-design/ant-design-colors.svg)](https://greenkeeper.io/)
14</div>
15
16![](https://user-images.githubusercontent.com/507615/55726820-43e68400-5a43-11e9-8541-b0fc28b78f37.png)
17
18## Install
19
20```bash
21$ npm install @ant-design/colors
22// or
23$ yarn add @ant-design/colors
24```
25
26## Usage
27
28```bash
29$ npm install @ant-design/colors --save
30```
31
32```js
33import { red, volcano, gold, yellow, lime, green, cyan, blue, geekblue, purple, magenta, grey } from '@ant-design/colors';
34
35console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
36console.log(blue.primary); // '#1890FF'
37```
38
39```js
40import { generate, presetPalettes } from '@ant-design/colors';
41
42// Generate color palettes by a given color
43const colors = generate('#1890ff');
44console.log(colors); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
45console.log(presetPalettes);
46/*
47{
48 red: [...],
49 volcano: [...],
50 orange: [...],
51 gold: [...],
52 yellow: [...],
53 lime: [...],
54 green: [...],
55 cyan: [...],
56 blue: [...],
57 geekblue: [...],
58 purple: [...],
59 magenta: [...],
60}
61*/
62```
63
64```js
65import { generate, presetDarkPalettes } from '@ant-design/colors';
66
67// Generate dark color palettes by a given color
68const colors = generate('#1890ff', {
69 theme: 'dark',
70 backgroundColor: '#141414'
71});
72console.log(colors); // ["#111d2c", "#112a45", "#15395b", "#164c7e", "#1765ad", "#177ddc", "#3993dc", "#65b7f3", "#8bcbf3", "#b2dcf3"]
73console.log(presetDarkPalettes);
74/*
75{
76 red: [...],
77 volcano: [...],
78 orange: [...],
79 gold: [...],
80 yellow: [...],
81 lime: [...],
82 green: [...],
83 cyan: [...],
84 blue: [...],
85 geekblue: [...],
86 purple: [...],
87 magenta: [...],
88}
89*/
90```
91
92## Articles
93
94- [Ant Design Colors](https://ant.design/docs/spec/colors)
95- [Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)