Ant Design Colors

Install

1$ npm install dw-neit-colors
2// or
3$ yarn add dw-neit-colors

Usage

1$ npm install dw-neit-colors --save

1import {
2  red,
3  volcano,
4  gold,
5  yellow,
6  lime,
7  green,
8  cyan,
9  blue,
10  geekblue,
11  purple,
12  magenta,
13  grey,
14} from 'dw-neit-colors';
15
16console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
17console.log(blue.primary); // '#1677FF'

1import { generate, presetPalettes } from 'dw-neit-colors';
2
3// Generate color palettes by a given color
4const colors = generate('#1890ff');
5console.log(colors); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
6console.log(presetPalettes);
7/*
8{
9  red: [...],
10  volcano: [...],
11  orange: [...],
12  gold: [...],
13  yellow: [...],
14  lime: [...],
15  green: [...],
16  cyan: [...],
17  blue: [...],
18  geekblue: [...],
19  purple: [...],
20  magenta: [...],
21}
22*/

1import { generate, presetDarkPalettes } from 'dw-neit-colors';
2
3// Generate dark color palettes by a given color
4const colors = generate('#1890ff', {
5  theme: 'dark',
6  backgroundColor: '#141414',
7});
8console.log(colors); // ['#111d2c', '#112a45', '#15395b', '#164c7e', '#1765ad', '#177ddc', '#3c9ae8', '#65b7f3', '#8dcff8', '#b7e3fa']
9console.log(presetDarkPalettes);
10/*
11{
12  red: [...],
13  volcano: [...],
14  orange: [...],
15  gold: [...],
16  yellow: [...],
17  lime: [...],
18  green: [...],
19  cyan: [...],
20  blue: [...],
21  geekblue: [...],
22  purple: [...],
23  magenta: [...],
24}
25*/

Articles

• Ant Design Colors
• Ant Design 色板生成算法演进之路