Color System
Color System
Source: ant.design/docs/spec/colors
Ant Design structures color at two levels: a system-level foundational palette and a product-level semantic layer. The design philosophy is explicitly restrained — color is a tool for information delivery, not visual decoration.
Color model
Ant Design uses the HSB color model (Hue, Saturation, Brightness) for all color work. This model maps more intuitively to how humans perceive color relationships and facilitates communication between designers and between design and engineering.
System-level: Base color palettes
The palette contains 120 colors across 12 named hues, each with a 10-step derivative scale (steps 1–10, where step 6 is the primary tone).
The 12 named palettes
| Name | Character |
|---|---|
| Dust Red | Fighting Spirit, Unrestrained |
| Volcano | Eye-catching, Surging |
| Sunset Orange | Warm, Cheerful |
| Lime | Natural, Vitality |
| Calendula Gold | Energetic, Positive |
| Sunrise Yellow | Birth, Sunshine |
| Polar Green | Healthy, Innovative |
| Cyan | Hope, Strong |
| Daybreak Blue | Inclusive, Technology, Universal |
| Geek Blue | Exploration, Research |
| Golden Purple | Elegant, Romantic |
| French Magenta | Bright, Emotional |
10-step scale
Each palette runs from step 1 (lightest, nearly white — for tinted backgrounds) to step 10 (darkest — for very high contrast contexts). Step 6 is the primary tone — the recommended anchor for brand and functional colors.
The step semantics map approximately to:
| Steps | Usage |
|---|---|
| 1 | Tinted background |
| 2–3 | Hover/active state backgrounds |
| 4–5 | Light tint fills |
| 6 | Primary solid color (brand anchor) |
| 7–8 | Hover/active states for solid fills |
| 9–10 | High-contrast text/icon on light backgrounds |
Color generation algorithm
Ant Design provides an algorithmic palette generator — given a primary hex value, it generates all 10 steps following Ant Design's color generation rules. Available via the @ant-design/colors npm package:
npm install @ant-design/colors
import { blue, generate } from '@ant-design/colors';
console.log(blue.primary); // '#1677FF'
console.log(blue); // Array of 10 step values
// Generate a custom palette from any hex:
const myPalette = generate('#3052f6');
System-level: Neutral palette
A 10-step gray scale (gray-1 through gray-10) provides neutrals for backgrounds, borders, text, and separators. No tint — pure achromatic gray.
Product-level: Brand color
Default brand color: #1677ff (Daybreak Blue, step 6).
The brand color is applied to primary interactive elements: primary buttons, active links, selected states, progress indicators. All other semantic colors are derived or specified independently of the brand color.
Product-level: Functional colors
Functional colors communicate status and carry fixed semantic meaning. They must remain consistent across a product to preserve user expectations:
| Role | Meaning | Typical color family |
|---|---|---|
| Success | Positive outcome, completion | Polar Green |
| Error / Failure | Problem, invalid state | Dust Red |
| Warning | Caution required | Calendula Gold |
| Info / Link | Neutral information, navigation | Daybreak Blue |
Product-level: Neutral text and surface tokens
Ant Design defines neutral colors as alpha values — this allows them to work correctly on both white and near-white backgrounds, and to auto-adapt in dark mode.
| Element | Light mode | Dark mode |
|---|---|---|
| Heading / Body text | #000000E0 (87.5% opacity) | #FFFFFFD9 |
| Secondary text | #000000A6 (65% opacity) | #FFFFFFA6 |
| Disabled text | #00000040 (25% opacity) | #FFFFFF40 |
| Default border | #D9D9D9 | #424242 |
| Separator | #0505050F (6% opacity) | #FDFDFD1F |
| Layout background | #F5F5F5 | #000000 |
These values meet WCAG 2.0 contrast standards for their stated roles.
Design token access
In the React implementation, color tokens are accessed via theme.useToken():
import { theme } from 'antd';
const { token } = theme.useToken();
// token.colorPrimary → brand color
// token.colorSuccess → success green
// token.colorError → error red
// token.colorWarning → warning gold
// token.colorText → primary text
// token.colorTextSecondary
// token.colorBgContainer → default container background
// token.colorBgElevated → elevated surface (dropdowns, tooltips)
// token.colorBorder → default border
Philosophy
"In the design of background applications of Ant Financial, our attitude towards color is restrained."
Color in Ant Design serves communication, not identity. The priority order: information delivery → operational guidance → interactive feedback. In enterprise contexts with dense UIs, competing accent colors create visual noise. The system deliberately limits expressive color use to preserve the signal value of functional colors (success/error/warning).