Color tokens
Accent colors
Indigo
indigo
100
#E0E7FF
indigo
200
#C7D2FE
indigo
300
#A5B4FC
indigo
400
#818CF8
indigo
500
#6366F1
indigo
600
#4F46E5
indigo
700
#4338CA
indigo
800
#3730A3
indigo
900
#312E81
Emerald
emerald
100
#D1FAE5
emerald
200
#A7F3D0
emerald
300
#6EE7B7
emerald
400
#34D399
emerald
500
#10B981
emerald
600
#059669
emerald
700
#047857
emerald
800
#065F46
emerald
900
#064E3B
Red
red
100
#FEE2E2
red
200
#FECACA
red
300
#FCA5A5
red
400
#F87171
red
500
#EF4444
red
600
#dc2626
red
700
#B91C1C
red
800
#991b1b
red
900
#7F1D1D
Blue
blue
100
#DBEAFE
blue
200
#BFDBFE
blue
300
#93C5FD
blue
400
#60A5FA
blue
500
#3B82F6
blue
600
#2563EB
blue
700
#1D4ED8
blue
800
#1E40AF
blue
900
#1E3A8A
Rose
rose
100
#FFE4E6
rose
200
#FECDD3
rose
300
#FDA4AF
rose
400
#FB7185
rose
500
#F43F5E
rose
600
#E11D48
rose
700
#BE123C
rose
800
#9F1239
rose
900
#881337
Amber
amber
100
#FEF3C7
amber
200
#FDE68A
amber
300
#FCD34D
amber
400
#FBBF24
amber
500
#F59E0B
amber
600
#D97706
amber
700
#B45309
amber
800
#92400E
amber
900
#78350F
Orange
orange
100
#FFEDD5
orange
200
#FED7AA
orange
300
#FDBA74
orange
400
#FB923C
orange
500
#F97316
orange
600
#EA580C
orange
700
#C2410C
orange
800
#9A3412
orange
900
#7C2D12
Yellow
yellow
100
#fef9c3
yellow
200
#fef08a
yellow
300
#fde047
yellow
400
#facc15
yellow
500
#eab308
yellow
600
#ca8a04
yellow
700
#a16207
yellow
800
#854d0e
yellow
900
#713f12
Lime
lime
100
#ecfccb
lime
200
#d9f99d
lime
300
#bef264
lime
400
#a3e635
lime
500
#84cc16
lime
600
#65a30d
lime
700
#4d7c0f
lime
800
#3f6212
lime
900
#365314
Green
green
100
#dcfce7
green
200
#bbf7d0
green
300
#86efac
green
400
#4ade80
green
500
#22c55e
green
600
#16a34a
green
700
#15803d
green
800
#166534
green
900
#14532d
Teal
teal
100
#ccfbf1
teal
200
#99f6e4
teal
300
#5eead4
teal
400
#2dd4bf
teal
500
#14b8a6
teal
600
#0d9488
teal
700
#0f766e
teal
800
#115e59
teal
900
#134e4a
Cyan
cyan
100
#cffafe
cyan
200
#a5f3fc
cyan
300
#67e8f9
cyan
400
#22d3ee
cyan
500
#06b6d4
cyan
600
#0891b2
cyan
700
#0e7490
cyan
800
#155e75
cyan
900
#164e63
Sky
sky
100
#e0f2fe
sky
200
#bae6fd
sky
300
#7dd3fc
sky
400
#38bdf8
sky
500
#0ea5e9
sky
600
#0284c7
sky
700
#0369a1
sky
800
#075985
sky
900
#0c4a6e
Violet
violet
100
#ede9fe
violet
200
#ddd6fe
violet
300
#c4b5fd
violet
400
#a78bfa
violet
500
#8b5cf6
violet
600
#7c3aed
violet
700
#6d28d9
violet
800
#5b21b6
violet
900
#4c1d95
Purple
purple
100
#f3e8ff
purple
200
#e9d5ff
purple
300
#d8b4fe
purple
400
#c084fc
purple
500
#a855f7
purple
600
#9333ea
purple
700
#7e22ce
purple
800
#6b21a8
purple
900
#581c87
Fuchsia
fuchsia
100
#fae8ff
fuchsia
200
#f5d0fe
fuchsia
300
#f0abfc
fuchsia
400
#e879f9
fuchsia
500
#d946ef
fuchsia
600
#c026d3
fuchsia
700
#a21caf
fuchsia
800
#86198f
fuchsia
900
#701a75
Pink
pink
100
#fce7f3
pink
200
#fbcfe8
pink
300
#f9a8d4
pink
400
#f472b6
pink
500
#ec4899
pink
600
#db2777
pink
700
#be185d
pink
800
#9d174d
pink
900
#831843
Gray colors
Besides, there are 3 types of gray scales, with different "temperatures" to mix and match with any accent color mentioned before:
Cool gray
coolGray
100
#F3F4F6
coolGray
200
#E5E7EB
coolGray
300
#D1D5DB
coolGray
400
#9CA3AF
coolGray
500
#6B7280
coolGray
600
#4B5563
coolGray
700
#374151
coolGray
800
#1F2937
coolGray
900
#111827
Neutral gray
neutralGray
100
#F4F4F5
neutralGray
200
#E4E4E7
neutralGray
300
#D4D4D8
neutralGray
400
#A1A1AA
neutralGray
500
#71717A
neutralGray
600
#52525B
neutralGray
700
#3F3F46
neutralGray
800
#27272A
neutralGray
900
#18181B
Warm gray
warmGray
100
#F5F5F4
warmGray
200
#E7E5E4
warmGray
300
#D6D3D1
warmGray
400
#A8A29E
warmGray
500
#78716C
warmGray
600
#57534E
warmGray
700
#44403C
warmGray
800
#292524
warmGray
900
#1C1917