Ant Design Colors
An enterprise-class design language and React components with a refined color palette. Ant Design is a comprehensive design system for React, delivering a refined palette for enterprise-grade UIs. With colors like #1890FF (blue) and #52C41A (green), it enables developers to craft consistent, professional interfaces with ease.
Color Palette
Blue 1
#F0F5FF
blue-1
Blue 2
#D6E4FF
blue-2
Blue 3
#ADC6FF
blue-3
Blue 4
#85A5FF
blue-4
Blue 5
#597EF7
blue-5
Blue 6
#2F54EB
blue-6
Blue 7
#1890FF
blue-7
Blue 8
#096DD9
blue-8
Blue 9
#0050B3
blue-9
Blue 10
#003A8C
blue-10
Green 1
#F6FFED
green-1
Green 2
#D9F7BE
green-2
Green 3
#B7EB8F
green-3
Green 4
#95DE64
green-4
Green 5
#73D13D
green-5
Green 6
#52C41A
green-6
Green 7
#389E0D
green-7
Green 8
#237804
green-8
Green 9
#135200
green-9
Green 10
#092B00
green-10
Red 1
#FFF2E8
red-1
Red 2
#FFD8BF
red-2
Red 3
#FFBB96
red-3
Red 4
#FF9C6E
red-4
Red 5
#FF7A45
red-5
Red 6
#FF4D4F
red-6
Red 7
#F5222D
red-7
Red 8
#CF1322
red-8
Red 9
#A8071A
red-9
Red 10
#820014
red-10
Ant Design Color Generator
Generate and test colors from the Ant Design palette
Color Generator
Generate color variations and test them in real components
Real-world UI Examples
See how Ant Design colors look in practical applications
Track your expenses
Total Expenses
$12,543
Analytics
Revenue$15,989
Expenses$12,543
Gain control
Advanced settings
Categories
Groceries
9 transactions
$2,345
Household
12 transactions
$1,876
Financial Summary
Income
$15,989
$18,871 last period
Expenses
$12,543
$10,221 last period
All Set!
Your Ant Design configuration is complete.
Traditional Components
Buttons
Alerts
Information
This is an informational alert using default colors.
Success
This is a success alert with Ant Design styling.
Form Elements
Badges
Primary
Secondary
Accent
Outline