# @ant-design/colors

> Color palettes calculator of Ant Design

Latest version **8.0.1** (published 2026-01-05) · MIT license · 4.4M weekly downloads

## Install

```sh
npm install @ant-design/colors
pnpm add @ant-design/colors
yarn add @ant-design/colors
bun add @ant-design/colors
```

## Health

**Score 80/100 (A)** — status: stable.

Positive: high downloads; has types; esm support; no vulnerabilities; high quality score.

## Facts

| | |
|---|---|
| Version | 8.0.1 |
| Published | 2026-01-05 |
| First published | 2018-12-23 |
| Weekly downloads | 4.4M |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 31.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 690 |
| Author | afc163 |
| Maintainers | afc163, zombiej, chenshuai2144, arvinxx, madccc, ranranup123 |

## Links

- npm: https://www.npmjs.com/package/@ant-design/colors
- Repository: https://github.com/ant-design/ant-design-colors
- Homepage: https://github.com/ant-design/ant-design-colors#readme
- Issues: https://github.com/ant-design/ant-design-colors/issues
- npm.io page: https://npm.io/package/@ant-design/colors

## Dependencies (1)

- [@ant-design/fast-color](https://npm.io/package/@ant-design/fast-color.md) ^3.0.0

## Recent versions

- 8.0.1 (latest) — 2026-01-05
- 7.1.1-0 (next) — 2024-12-31
- 7.2.1 — 2025-05-20
- 8.0.0 — 2025-03-21
- 7.2.0 — 2024-12-31
- 7.1.0 — 2024-07-02
- 7.0.2 — 2024-01-02
- 7.0.1 — 2023-12-29
- 7.0.1-0 — 2023-12-29
- 7.0.0 — 2023-01-09
- 6.0.0 — 2021-02-10
- 5.1.1 — 2021-02-10
- 5.1.0 — 2021-02-09
- 5.0.1 — 2020-12-14
- 5.0.0 — 2020-11-12
- … 20 more at https://npm.io/package/@ant-design/colors/versions

## README

<h1 align="center">Ant Design Colors</h1>

<div align="center">

:art: Color palettes calculator of [Ant Design](https://ant.design/docs/spec/colors).

[![CI status][github-action-image]][github-action-url]
[![codecov][codecov-image]][codecov-url]
[![NPM version][npm-image]][npm-url]
[![NPM downloads][download-image]][download-url]
[![][bundlephobia-image]][bundlephobia-url]

![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)

[npm-image]: http://img.shields.io/npm/v/@ant-design/colors.svg?style=flat-square
[npm-url]: http://npmjs.org/package/@ant-design/colors
[github-action-image]: https://github.com/ant-design/ant-design-colors/actions/workflows/ci.yml/badge.svg
[github-action-url]: https://github.com/ant-design/ant-design-colors/actions/workflows/ci.yml
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design-colors/main.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/ant-design/ant-design-colors/tree/main
[download-image]: https://img.shields.io/npm/dm/@ant-design/colors.svg?style=flat-square
[download-url]: https://npmjs.org/package/@ant-design/colors
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@ant-design/colors?style=flat-square
[bundlephobia-url]: https://bundlephobia.com/package/@ant-design/colors
</div>

![](https://user-images.githubusercontent.com/507615/55726820-43e68400-5a43-11e9-8541-b0fc28b78f37.png)

## 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); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
console.log(blue.primary); // '#1677FF'
```

```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', '#3c9ae8', '#65b7f3', '#8dcff8', '#b7e3fa']
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)

---
_Source: https://npm.io/package/@ant-design/colors · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._