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