UNPKG

3.05 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) [![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) [![npm package](https://img.shields.io/npm/v/@ant-design/colors.svg?style=flat-square)](https://www.npmjs.org/package/@ant-design/colors) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/colors.svg?style=flat-square)](http://npmjs.com/@ant-design/colors)
8
9[![Dependencies](https://img.shields.io/david/ant-design/ant-design-colors.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-colors) [![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/)
10
11</div>
12
13![](https://user-images.githubusercontent.com/507615/55726820-43e68400-5a43-11e9-8541-b0fc28b78f37.png)
14
15## Install
16
17```bash
18$ npm install @ant-design/colors
19// or
20$ yarn add @ant-design/colors
21```
22
23## Usage
24
25```bash
26$ npm install @ant-design/colors --save
27```
28
29```js
30import {
31 red,
32 volcano,
33 gold,
34 yellow,
35 lime,
36 green,
37 cyan,
38 blue,
39 geekblue,
40 purple,
41 magenta,
42 grey,
43} from '@ant-design/colors';
44
45console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
46console.log(blue.primary); // '#1677FF'
47```
48
49```js
50import { generate, presetPalettes } from '@ant-design/colors';
51
52// Generate color palettes by a given color
53const colors = generate('#1890ff');
54console.log(colors); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
55console.log(presetPalettes);
56/*
57{
58 red: [...],
59 volcano: [...],
60 orange: [...],
61 gold: [...],
62 yellow: [...],
63 lime: [...],
64 green: [...],
65 cyan: [...],
66 blue: [...],
67 geekblue: [...],
68 purple: [...],
69 magenta: [...],
70}
71*/
72```
73
74```js
75import { generate, presetDarkPalettes } from '@ant-design/colors';
76
77// Generate dark color palettes by a given color
78const colors = generate('#1890ff', {
79 theme: 'dark',
80 backgroundColor: '#141414',
81});
82console.log(colors); // ['#111d2c', '#112a45', '#15395b', '#164c7e', '#1765ad', '#177ddc', '#3c9ae8', '#65b7f3', '#8dcff8', '#b7e3fa']
83console.log(presetDarkPalettes);
84/*
85{
86 red: [...],
87 volcano: [...],
88 orange: [...],
89 gold: [...],
90 yellow: [...],
91 lime: [...],
92 green: [...],
93 cyan: [...],
94 blue: [...],
95 geekblue: [...],
96 purple: [...],
97 magenta: [...],
98}
99*/
100```
101
102## Articles
103
104- [Ant Design Colors](https://ant.design/docs/spec/colors)
105- [Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)