@ant-design/colors

What is @ant-design/colors?

The @ant-design/colors npm package is designed to provide color palettes that are primarily used in web development and UI design, particularly with Ant Design, a popular design system for enterprise-level products. It offers a range of color utilities, including generating color palettes based on a primary color, providing predefined color sets for different themes, and more.

What are @ant-design/colors's main functionalities?

Generating color palettes

This feature allows developers to generate a color palette based on a primary color. It's particularly useful for creating consistent color themes in UI designs.

import { generate } from '@ant-design/colors';

const palette = generate('#1890ff');
// palette will be an array of colors derived from the primary color '#1890ff'

Accessing preset palettes

The package provides a set of predefined color palettes for quick access. These palettes include multiple shades of basic colors, allowing for flexible design choices.

import { red, blue } from '@ant-design/colors';

console.log(red[5]); // Accessing the fifth shade of red
console.log(blue[3]); // Accessing the third shade of blue

Other packages similar to @ant-design/colors

color

The 'color' package offers functionality for color manipulation and conversion. It supports operations like changing the color's format, lightening, darkening, and more. While it provides more general color manipulation capabilities, it doesn't offer the specific palette generation and predefined color sets that @ant-design/colors does.

chroma-js

Chroma.js is a powerful library for all sorts of color conversions and color scales. It's more comprehensive in terms of color manipulation and analysis compared to @ant-design/colors, which focuses more on providing specific color palettes for UI design.

polished

Polished is a lightweight toolset for writing styles in JavaScript, which includes color manipulation functions similar to what 'color' offers. It's more focused on providing a wide range of CSS-in-JS utilities, including but not limited to color manipulation, whereas @ant-design/colors is specifically tailored for color palette generation and usage within the Ant Design system.

README

Ant Design Colors

:art: Color palettes calculator of Ant Design.

Install

$ npm install @ant-design/colors
// or
$ yarn add @ant-design/colors

Usage

$ npm install @ant-design/colors --save

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'

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: [...],
}
*/

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
• Ant Design 色板生成算法演进之路