Color collection
Ant Design Colors
The color system from Ant Design — 12 hues and a gray scale, each with 10 carefully calibrated steps. Step 6 is the primary brand shade; steps 1–5 are tints, 7–10 are shades.
About Ant Design colors
Ant Design (AntD) is a design system created by Ant Group (Alibaba) and is one of the most widely used React component libraries in the world — especially in enterprise and China-based tech companies. Its color system was algorithmically derived using HSB color space to ensure consistent visual weight across all hues.
Each palette has exactly 10 steps. Step 6 is the primary brand color (the one you reference in most APIs, e.g. colorPrimary: blue[5]). Steps 1–5 grow progressively lighter (useful for backgrounds, hover states, selected states), while steps 7–10 grow darker (useful for pressed states, borders, and text).
Using Ant Design colors
import { blue, red } from '@ant-design/colors';
blue[5] // '#1677ff' — step 6 (index 5)
red[0] // '#fff1f0' — step 1 (index 0)