SwiftBoard
Palette, Shades & Gradient Generator
Visualize and copy the utility classes for standard Tailwind color shades (50-950).
Gradient Generator
Select two colors below to instantly generate and preview a responsive linear gradient class (`bg-gradient-to-r`).
bg-gradient-to-r from-blue-500 to-emerald-500
NeutralNeutral
A cool gray for backgrounds and text contrast.
50
#f9fafb
bg-gray-50
100
#f3f4f6
bg-gray-100
200
#e5e7eb
bg-gray-200
300
#d1d5db
bg-gray-300
400
#9ca3af
bg-gray-400
500
#6b7280
bg-gray-500
600
#4b5563
bg-gray-600
700
#374151
bg-gray-700
800
#1f2937
bg-gray-800
900
#111827
bg-gray-900
950
#030712
bg-gray-950
Primary BluePrimary Blue
Classic, reliable blue for primary actions and links.
50
#eff6ff
bg-blue-50
100
#dbeafe
bg-blue-100
200
#bfdbfe
bg-blue-200
300
#93c5fd
bg-blue-300
400
#60a5fa
bg-blue-400
500
#3b82f6
bg-blue-500
600
#2563eb
bg-blue-600
700
#1d4ed8
bg-blue-700
800
#1e40af
bg-blue-800
900
#1e3a8a
bg-blue-900
950
#172554
bg-blue-950
Success EmeraldSuccess Emerald
A vibrant green for success messages and key milestones.
50
#ecfdf5
bg-emerald-50
100
#d1fae5
bg-emerald-100
200
#a7f3d0
bg-emerald-200
300
#6ee7b7
bg-emerald-300
400
#34d399
bg-emerald-400
500
#10b981
bg-emerald-500
600
#059669
bg-emerald-600
700
#047857
bg-emerald-700
800
#065f46
bg-emerald-800
900
#064e3b
bg-emerald-900
950
#022c22
bg-emerald-950
Warning AmberWarning Amber
Warm color for caution and secondary alerts.
50
#fffbeb
bg-amber-50
100
#fef3c7
bg-amber-100
200
#fde68a
bg-amber-200
300
#fcd34d
bg-amber-300
400
#fbbf24
bg-amber-400
500
#f59e0b
bg-amber-500
600
#d97706
bg-amber-600
700
#b45309
bg-amber-700
800
#92400e
bg-amber-800
900
#78350f
bg-amber-900
950
#451a03
bg-amber-950
Danger RedDanger Red
A strong red for errors and destructive actions.
50
#fef2f2
bg-red-50
100
#fee2e2
bg-red-100
200
#fecaca
bg-red-200
300
#fca5a5
bg-red-300
400
#f87171
bg-red-400
500
#ef4444
bg-red-500
600
#dc2626
bg-red-600
700
#b91c1c
bg-red-700
800
#991b1b
bg-red-800
900
#7f1d1d
bg-red-900
950
#450a0a
bg-red-950