Chakra UI
rose
#fff1f2
rose.50
var(--colors-rose-50)
#ffe4e6
rose.100
var(--colors-rose-100)
#fecdd3
rose.200
var(--colors-rose-200)
#fda4af
rose.300
var(--colors-rose-300)
#fb7185
rose.400
var(--colors-rose-400)
#f43f5e
rose.500
var(--colors-rose-500)
#e11d48
rose.600
var(--colors-rose-600)
#be123c
rose.700
var(--colors-rose-700)
#9f1239
rose.800
var(--colors-rose-800)
#881337
rose.900
var(--colors-rose-900)
pink
#fdf2f8
pink.50
var(--colors-pink-50)
#fce7f3
pink.100
var(--colors-pink-100)
#fbcfe8
pink.200
var(--colors-pink-200)
#f9a8d4
pink.300
var(--colors-pink-300)
#f472b6
pink.400
var(--colors-pink-400)
#ec4899
pink.500
var(--colors-pink-500)
#db2777
pink.600
var(--colors-pink-600)
#be185d
pink.700
var(--colors-pink-700)
#9d174d
pink.800
var(--colors-pink-800)
#831843
pink.900
var(--colors-pink-900)
fuchsia
#fdf4ff
fuchsia.50
var(--colors-fuchsia-50)
#fae8ff
fuchsia.100
var(--colors-fuchsia-100)
#f5d0fe
fuchsia.200
var(--colors-fuchsia-200)
#f0abfc
fuchsia.300
var(--colors-fuchsia-300)
#e879f9
fuchsia.400
var(--colors-fuchsia-400)
#d946ef
fuchsia.500
var(--colors-fuchsia-500)
#c026d3
fuchsia.600
var(--colors-fuchsia-600)
#a21caf
fuchsia.700
var(--colors-fuchsia-700)
#86198f
fuchsia.800
var(--colors-fuchsia-800)
#701a75
fuchsia.900
var(--colors-fuchsia-900)
purple
#f5f3ff
purple.50
var(--colors-purple-50)
#ede9fe
purple.100
var(--colors-purple-100)
#ddd6fe
purple.200
var(--colors-purple-200)
#c4b5fd
purple.300
var(--colors-purple-300)
#a78bfa
purple.400
var(--colors-purple-400)
#8b5cf6
purple.500
var(--colors-purple-500)
#7c3aed
purple.600
var(--colors-purple-600)
#6d28d9
purple.700
var(--colors-purple-700)
#5b21b6
purple.800
var(--colors-purple-800)
#4c1d95
purple.900
var(--colors-purple-900)
indigo
#eef2ff
indigo.50
var(--colors-indigo-50)
#e0e7ff
indigo.100
var(--colors-indigo-100)
#c7d2fe
indigo.200
var(--colors-indigo-200)
#a5b4fc
indigo.300
var(--colors-indigo-300)
#818cf8
indigo.400
var(--colors-indigo-400)
#6366f1
indigo.500
var(--colors-indigo-500)
#4f46e5
indigo.600
var(--colors-indigo-600)
#4338ca
indigo.700
var(--colors-indigo-700)
#3730a3
indigo.800
var(--colors-indigo-800)
#312e81
indigo.900
var(--colors-indigo-900)
blue
#eff6ff
blue.50
var(--colors-blue-50)
#dbeafe
blue.100
var(--colors-blue-100)
#bfdbfe
blue.200
var(--colors-blue-200)
#93c5fd
blue.300
var(--colors-blue-300)
#60a5fa
blue.400
var(--colors-blue-400)
#3b82f6
blue.500
var(--colors-blue-500)
#2563eb
blue.600
var(--colors-blue-600)
#1d4ed8
blue.700
var(--colors-blue-700)
#1e40af
blue.800
var(--colors-blue-800)
#1e3a8a
blue.900
var(--colors-blue-900)
sky
#f0f9ff
sky.50
var(--colors-sky-50)
#e0f2fe
sky.100
var(--colors-sky-100)
#bae6fd
sky.200
var(--colors-sky-200)
#7dd3fc
sky.300
var(--colors-sky-300)
#38bdf8
sky.400
var(--colors-sky-400)
#0ea5e9
sky.500
var(--colors-sky-500)
#0284c7
sky.600
var(--colors-sky-600)
#0369a1
sky.700
var(--colors-sky-700)
#075985
sky.800
var(--colors-sky-800)
#0c4a6e
sky.900
var(--colors-sky-900)
cyan
#ecfeff
cyan.50
var(--colors-cyan-50)
#cffafe
cyan.100
var(--colors-cyan-100)
#a5f3fc
cyan.200
var(--colors-cyan-200)
#67e8f9
cyan.300
var(--colors-cyan-300)
#22d3ee
cyan.400
var(--colors-cyan-400)
#06b6d4
cyan.500
var(--colors-cyan-500)
#0891b2
cyan.600
var(--colors-cyan-600)
#0e7490
cyan.700
var(--colors-cyan-700)
#155e75
cyan.800
var(--colors-cyan-800)
#164e63
cyan.900
var(--colors-cyan-900)
teal
#f0fdfa
teal.50
var(--colors-teal-50)
#ccfbf1
teal.100
var(--colors-teal-100)
#99f6e4
teal.200
var(--colors-teal-200)
#5eead4
teal.300
var(--colors-teal-300)
#2dd4bf
teal.400
var(--colors-teal-400)
#14b8a6
teal.500
var(--colors-teal-500)
#0d9488
teal.600
var(--colors-teal-600)
#0f766e
teal.700
var(--colors-teal-700)
#115e59
teal.800
var(--colors-teal-800)
#134e4a
teal.900
var(--colors-teal-900)
green
#ecfdf5
green.50
var(--colors-green-50)
#d1fae5
green.100
var(--colors-green-100)
#a7f3d0
green.200
var(--colors-green-200)
#6ee7b7
green.300
var(--colors-green-300)
#34d399
green.400
var(--colors-green-400)
#10b981
green.500
var(--colors-green-500)
#059669
green.600
var(--colors-green-600)
#047857
green.700
var(--colors-green-700)
#065f46
green.800
var(--colors-green-800)
#064e3b
green.900
var(--colors-green-900)
lime
#f7fee7
lime.50
var(--colors-lime-50)
#ecfccb
lime.100
var(--colors-lime-100)
#d9f99d
lime.200
var(--colors-lime-200)
#bef264
lime.300
var(--colors-lime-300)
#a3e635
lime.400
var(--colors-lime-400)
#84cc16
lime.500
var(--colors-lime-500)
#65a30d
lime.600
var(--colors-lime-600)
#4d7c0f
lime.700
var(--colors-lime-700)
#3f6212
lime.800
var(--colors-lime-800)
#365314
lime.900
var(--colors-lime-900)
yellow
#fffbeb
yellow.50
var(--colors-yellow-50)
#fef3c7
yellow.100
var(--colors-yellow-100)
#fde68a
yellow.200
var(--colors-yellow-200)
#fcd34d
yellow.300
var(--colors-yellow-300)
#fbbf24
yellow.400
var(--colors-yellow-400)
#f59e0b
yellow.500
var(--colors-yellow-500)
#d97706
yellow.600
var(--colors-yellow-600)
#b45309
yellow.700
var(--colors-yellow-700)
#92400e
yellow.800
var(--colors-yellow-800)
#78350f
yellow.900
var(--colors-yellow-900)
orange
#fff7ed
orange.50
var(--colors-orange-50)
#ffedd5
orange.100
var(--colors-orange-100)
#fed7aa
orange.200
var(--colors-orange-200)
#fdba74
orange.300
var(--colors-orange-300)
#fb923c
orange.400
var(--colors-orange-400)
#f97316
orange.500
var(--colors-orange-500)
#ea580c
orange.600
var(--colors-orange-600)
#c2410c
orange.700
var(--colors-orange-700)
#9a3412
orange.800
var(--colors-orange-800)
#7c2d12
orange.900
var(--colors-orange-900)
red
#fef2f2
red.50
var(--colors-red-50)
#fee2e2
red.100
var(--colors-red-100)
#fecaca
red.200
var(--colors-red-200)
#fca5a5
red.300
var(--colors-red-300)
#f87171
red.400
var(--colors-red-400)
#ef4444
red.500
var(--colors-red-500)
#dc2626
red.600
var(--colors-red-600)
#b91c1c
red.700
var(--colors-red-700)
#991b1b
red.800
var(--colors-red-800)
#7f1d1d
red.900
var(--colors-red-900)
gray
#f9fafb
gray.50
var(--colors-gray-50)
#f3f4f6
gray.100
var(--colors-gray-100)
#e5e7eb
gray.200
var(--colors-gray-200)
#d1d5db
gray.300
var(--colors-gray-300)
#9ca3af
gray.400
var(--colors-gray-400)
#6b7280
gray.500
var(--colors-gray-500)
#4b5563
gray.600
var(--colors-gray-600)
#374151
gray.700
var(--colors-gray-700)
#1f2937
gray.800
var(--colors-gray-800)
#111827
gray.900
var(--colors-gray-900)
slate
#F8FAFC
slate.50
var(--colors-slate-50)
#F1F5F9
slate.100
var(--colors-slate-100)
#E2E8F0
slate.200
var(--colors-slate-200)
#CBD5E1
slate.300
var(--colors-slate-300)
#94A3B8
slate.400
var(--colors-slate-400)
#64748B
slate.500
var(--colors-slate-500)
#475569
slate.600
var(--colors-slate-600)
#334155
slate.700
var(--colors-slate-700)
#1E293B
slate.800
var(--colors-slate-800)
#0F172A
slate.900
var(--colors-slate-900)
uncategorized
currentColor
current
var(--colors-current)
#000
black
var(--colors-black)
#fff
white
var(--colors-white)
rgb(0 0 0 / 0)
transparent
var(--colors-transparent)
Semantic tokens
_osDark
Base
text
base: colors.gray.600🔗 alias
_osDark: colors.gray.400
🐼 Made with Panda