Button Color Generator
Derived from Primary
Primary
#1A5B5B
Primary buttons (default)
Aa
Ratio: 7.5:1
AAA
Suggested:
#FFFFFF
→ 4.5:1
Primary Hover
#174E4E
Primary buttons (hover) · -8% lightness
Aa
Ratio: 8.5:1
AAA
Suggested:
#FFFFFF
→ 4.5:1
Secondary
#D5E8E8
Secondary buttons (default) · 20% opacity
Aa
Ratio: 5.2:1
AA
Suggested:
#0A3D3D
→ 4.5:1
Secondary Hover
#B8D4D4
Secondary buttons (hover) · 30% opacity
Aa
Ratio: 4.8:1
AA
Suggested:
#0A3D3D
→ 4.5:1
Fixed Colors
Destructive Red
#EF4444
Delete, Decline, Cancel [noun]
Destructive Hover
#DC2626
Destructive buttons (hover)
Success Green
#34D399
Approve options in dropdowns
Success Hover
#10B981
Success buttons (hover)
Exit Gray
#E5E7EB
Close, Cancel (exit)
Exit Gray Hover
#D1D5DB
Exit buttons (hover)
Button Preview