High-level goals
- Unify visual language across mobile, web and desktop
- Tie color to elevation, surfaces and motion
- Strong guidelines for theming and accessibility
Material 2 uses classic numeric palettes; Material 3 (Material You) introduces dynamic theming from a seed color and tonal palettes.
- Consistent, data-dense UI framework for enterprise apps
- Prioritises tables, forms, dashboards and operations-heavy workflows
- Coherent, usable look for complex admin apps out of the box
Color is tuned for information-dense layouts, not just marketing polish.
Palette structure
Material Design
Classic Material palettes: base hues like Red, Blue, Teal, Amber, etc. Steps: 50, 100–900 plus accent steps A100, A200, A400, A700.
Material 3 (Material You) uses tonal palettes — each base color generates tones 0–100, with specific values mapped to roles: primary, onPrimary, primaryContainer, etc. Built for dynamic theming from a seed color.
Ant Design
Roughly 10 main hues: blue, purple, cyan, green, red, orange, yellow, volcano, geekblue, gold, etc. Steps 1–10 appended to hue names.
The main accent is usually blue-6 — used as the default primary color. Other steps cover hover, active, light backgrounds, etc. Scales are tuned empirically for web UIs rather than brand expression.
Naming and semantics
Material
Colors named by hue + numeric tone. Material 3 adds semantic roles: primary, primaryContainer, onPrimary, secondary, tertiary, error, surface, surfaceVariant, etc.
Each role maps to a tonal value from one of several palettes (primary, secondary, neutral, error), decoupling design tokens from raw hues.
Ant Design
Simple palette names: blue-1–blue-10. Semantics defined in theme tokens: colorPrimary, colorSuccess, colorWarning, colorError, colorBgBase, etc.
In Ant v5+, a token system is emphasised. Seed tokens (colorPrimary, borderRadius) map to derivative tokens (colorPrimaryHover, colorBgContainer). Most app code interacts with semantics, not raw palette names.
Light / dark theming
Material — formal, spec-driven
Material provides explicit tonal mappings for each theme. In light mode, primary is tone 40; in dark mode it shifts to around tone 80. The approach is documented: follow the tonal mapping tables and you get a coherent theme.
Ant Design — implemented, less prescriptive
Ant v5 has built-in dark theme support via token-driven theming. The focus is on keeping tables, lists and forms readable and preserving the recognisable primary color across themes — less conceptual framework than Material, but strongly implemented in the library.
Accessibility and density
- Strongly emphasises minimum contrast ratios
- Recommended text sizes, tap targets and spacing
- How color interacts with elevation and shadows
- Tends to be airy — components can feel spacious in dense enterprise apps (tunable)
- Designed for data-dense back-office systems
- Neutral backgrounds and borders dominate
- Primaries focus on links, buttons and selection states
- Higher default density (smaller paddings, tighter layouts)
- Accessibility supported — may need explicit contrast auditing
When to use which
Choose Material if…
- You target Android, web and Flutter and want consistent theming across them
- You value a formal, documented color system with clear guidance for elevation and semantic roles
- You want a spec-driven design language that spans multiple Google ecosystems
Choose Ant Design if…
- You're building React-based enterprise apps, admin panels or dashboards
- Your priority is productivity with component-rich, table-heavy layouts
- You want a practical "default enterprise look" tuned for dense data
Mixing and migrating via ColorR
You can inspect hues and steps for both systems side by side — e.g. Material Indigo 500 vs Ant blue-6 — and map existing Material themes to Ant tokens, or vice versa.
Identify your core brand hue in one system
e.g. Material Blue 500
Find the closest step in the other system
e.g. Ant blue-6 via ColorR
Rebuild semantic tokens in the target system
primary, success, warning, error, etc.
Keep a shared color spec in hybrid stacks
e.g. Android (Material) + React admin (Ant)