TailGrids Colors
Tailwind CSS components and blocks with a modern color system designed for professional web applications. Copy colors like #3B82F6 (blue) and #10B981 (green) to create responsive, visually cohesive designs with ease.
Color Palette
Brand 50
#F0F4FF
bg-brand-50
Brand 100
#E0EDFF
bg-brand-100
Brand 200
#C7DAFE
bg-brand-200
Brand 300
#A5B4FC
bg-brand-300
Brand 400
#818CF8
bg-brand-400
Brand 500
#6366F1
bg-brand-500
Brand 600
#4F46E5
bg-brand-600
Brand 700
#4338CA
bg-brand-700
Brand 800
#3730A3
bg-brand-800
Brand 900
#312E81
bg-brand-900
Accent 50
#F0FDFA
bg-accent-50
Accent 100
#CCFBF1
bg-accent-100
Accent 200
#99F6E4
bg-accent-200
Accent 300
#5EEAD4
bg-accent-300
Accent 400
#2DD4BF
bg-accent-400
Accent 500
#14B8A6
bg-accent-500
Accent 600
#0D9488
bg-accent-600
Accent 700
#0F766E
bg-accent-700
Accent 800
#115E59
bg-accent-800
Accent 900
#134E4A
bg-accent-900
Gray 50
#F8FAFC
bg-gray-50
Gray 100
#F1F5F9
bg-gray-100
Gray 200
#E2E8F0
bg-gray-200
Gray 300
#CBD5E1
bg-gray-300
Gray 400
#94A3B8
bg-gray-400
Gray 500
#64748B
bg-gray-500
Gray 600
#475569
bg-gray-600
Gray 700
#334155
bg-gray-700
Gray 800
#1E293B
bg-gray-800
Gray 900
#0F172A
bg-gray-900
TailGrids Color Generator
Generate and test colors from the TailGrids palette
Color Generator
Generate color variations and test them in real components
Real-world UI Examples
See how TailGrids 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 TailGrids configuration is complete.
Traditional Components
Buttons
Alerts
Information
This is an informational alert using default colors.
Success
This is a success alert with TailGrids styling.
Form Elements
Badges
Primary
Secondary
Accent
Outline