Skip to content

Ant Design colors

Ten-step primary ramps (Dust Red, Daybreak Blue, Polar Green, …) as used in Ant Design’s documented colour system. Ideal when your React app imports Ant’s theme tokens and designers need the same HEX in Figma annotations.

What this page is

A static excerpt of Ant’s primary palettes — step numbers align with Ant’s design language so you can say “primary-6” and mean the same tone in code review.

How to use it

  1. Filter by palette name or step, copy HEX into Less/JS theme overrides or design specs.
  2. Map hover/active steps consistently — Ant docs describe which steps suit backgrounds vs actions; mirror that intent, not only the prettiest swatch.
  3. Validate text on primary steps with the contrast checker before shipping data-dense tables.

When Ant’s runtime config wins

If you configure tokens through ConfigProvider or seed tokens in v5+, treat this page as documentation of defaults — not the live computed theme.

Related on ChromaXP

Enterprise UI crossovers.

Material Design Alternative numeric ramps when your org mixes Ant tables with Material apps. Banking brands Fintech palettes that often sit beside Ant Design admin shells. All palettes Browse Tailwind, Bootstrap, and HTML named colors from the hub.

FAQ

Does this include neutral and semantic tokens?

This excerpt focuses on primary ramps. Ant’s full token set includes neutrals, success/warning/error, and layout colors — pull those from Ant’s current docs for production parity.

Ant Design 4 vs 5?

Token architecture evolved. If your app migrated to v5 seed tokens, diff this table against the values your ConfigProvider actually emits at runtime.

Why link banking brands?

Internal dashboards often pair Ant components with institution co-brand colors — use both references and still follow each bank’s PDF rules for logo placement.