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

Readme

Source

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

FAQs

What is @ant-design/colors?

Is @ant-design/colors popular?

Is @ant-design/colors well maintained?

Last updated on 02 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install