Colors
The list of available color tokens
Tokens
Chakra UI supports the following color tokens out of the box.
gray
gray.50
#fafafa
gray.100
#f4f4f5
gray.200
#e4e4e7
gray.300
#d4d4d8
gray.400
#a1a1aa
gray.500
#71717a
gray.600
#52525b
gray.700
#3f3f46
gray.800
#27272a
gray.900
#18181b
gray.950
#0f0f12
red
red.50
#fef2f2
red.100
#fee2e2
red.200
#fecaca
red.300
#fca5a5
red.400
#f87171
red.500
#ef4444
red.600
#dc2626
red.700
#991919
red.800
#511111
red.900
#300c0c
red.950
#1f0808
pink
pink.50
#fdf2f8
pink.100
#fce7f3
pink.200
#fbcfe8
pink.300
#f9a8d4
pink.400
#f472b6
pink.500
#ec4899
pink.600
#db2777
pink.700
#a41752
pink.800
#6d0e34
pink.900
#45061f
pink.950
#2c0514
purple
purple.50
#faf5ff
purple.100
#f3e8ff
purple.200
#e9d5ff
purple.300
#d8b4fe
purple.400
#c084fc
purple.500
#a855f7
purple.600
#9333ea
purple.700
#641ba3
purple.800
#4a1772
purple.900
#2f0553
purple.950
#1a032e
cyan
cyan.50
#ecfeff
cyan.100
#cffafe
cyan.200
#a5f3fc
cyan.300
#67e8f9
cyan.400
#22d3ee
cyan.500
#06b6d4
cyan.600
#0891b2
cyan.700
#0c5c72
cyan.800
#134152
cyan.900
#072a38
cyan.950
#051b24
blue
blue.50
#eff6ff
blue.100
#dbeafe
blue.200
#bfdbfe
blue.300
#a3cfff
blue.400
#60a5fa
blue.500
#3b82f6
blue.600
#2563eb
blue.700
#173da6
blue.800
#1a3478
blue.900
#14204a
blue.950
#0c142e
teal
teal.50
#f0fdfa
teal.100
#ccfbf1
teal.200
#99f6e4
teal.300
#5eead4
teal.400
#2dd4bf
teal.500
#14b8a6
teal.600
#0d9488
teal.700
#0c5d56
teal.800
#114240
teal.900
#032726
teal.950
#021716
green
green.50
#f0fdf4
green.100
#dcfce7
green.200
#bbf7d0
green.300
#86efac
green.400
#4ade80
green.500
#22c55e
green.600
#16a34a
green.700
#116932
green.800
#124a28
green.900
#042713
green.950
#03190c
yellow
yellow.50
#fefce8
yellow.100
#fef9c3
yellow.200
#fef08a
yellow.300
#fde047
yellow.400
#facc15
yellow.500
#eab308
yellow.600
#ca8a04
yellow.700
#845209
yellow.800
#713f12
yellow.900
#422006
yellow.950
#281304
orange
orange.50
#fff7ed
orange.100
#ffedd5
orange.200
#fed7aa
orange.300
#fdba74
orange.400
#fb923c
orange.500
#f97316
orange.600
#ea580c
orange.700
#92310a
orange.800
#6c2710
orange.900
#3b1106
orange.950
#220a04
Semantic Tokens
Chakra UI supports these semantic tokens out of the box.
background
bg
light: {white}
dark: {black}
bg.muted
light: {gray.50}
dark: {gray.950}
bg.subtle
light: {gray.100}
dark: {gray.900}
bg.emphasized
light: {gray.200}
dark: {gray.800}
bg.inverted
light: {black}
dark: {white}
bg.panel
light: {white}
dark: {gray.950}
bg.error
light: {red.50}
dark: {red.950}
bg.warning
light: {orange.50}
dark: {orange.950}
bg.success
light: {green.50}
dark: {green.950}
bg.info
light: {blue.50}
dark: {blue.950}
border
border
light: {gray.200}
dark: {gray.800}
border.subtle
light: {gray.100}
dark: {gray.900}
border.muted
light: {gray.50}
dark: {gray.950}
border.emphasized
light: {gray.300}
dark: {gray.700}
border.inverted
light: {gray.800}
dark: {gray.200}
border.error
light: {red.500}
dark: {red.400}
border.warning
light: {orange.500}
dark: {orange.400}
border.success
light: {green.500}
dark: {green.400}
border.info
light: {blue.500}
dark: {blue.400}
text
Ag
fg
light: {black}
dark: {gray.50}
Ag
fg.subtle
light: {gray.600}
dark: {gray.400}
Ag
fg.muted
light: {gray.400}
dark: {gray.500}
Ag
fg.inverted
light: {gray.50}
dark: {black}
Ag
fg.error
light: {red.500}
dark: {red.400}
Ag
fg.warning
light: {orange.600}
dark: {orange.300}
Ag
fg.success
light: {green.600}
dark: {green.300}
Ag
fg.info
light: {blue.600}
dark: {blue.300}
gray
gray.contrast
light: white
dark: white
gray.fg
light: {gray.900}
dark: {gray.200}
gray.muted
light: {gray.50}
dark: {gray.950}
gray.subtle
light: {gray.100}
dark: {gray.900}
gray.emphasized
light: {gray.200}
dark: {gray.800}
gray.solid
light: {gray.900}
dark: {gray.200}
red
red.contrast
light: white
dark: white
red.fg
light: {red.700}
dark: {red.300}
red.muted
light: {red.50}
dark: {red.950}
red.subtle
light: {red.100}
dark: {red.900}
red.emphasized
light: {red.200}
dark: {red.800}
red.solid
light: {red.600}
dark: {red.600}
pink
pink.contrast
light: white
dark: white
pink.fg
light: {pink.700}
dark: {pink.300}
pink.muted
light: {pink.50}
dark: {pink.950}
pink.subtle
light: {pink.100}
dark: {pink.900}
pink.emphasized
light: {pink.200}
dark: {pink.800}
pink.solid
light: {pink.600}
dark: {pink.600}
purple
purple.contrast
light: white
dark: white
purple.fg
light: {purple.700}
dark: {purple.300}
purple.muted
light: {purple.50}
dark: {purple.950}
purple.subtle
light: {purple.100}
dark: {purple.900}
purple.emphasized
light: {purple.200}
dark: {purple.800}
purple.solid
light: {purple.600}
dark: {purple.600}
cyan
cyan.contrast
light: white
dark: white
cyan.fg
light: {cyan.700}
dark: {cyan.300}
cyan.muted
light: {cyan.50}
dark: {cyan.950}
cyan.subtle
light: {cyan.100}
dark: {cyan.900}
cyan.emphasized
light: {cyan.200}
dark: {cyan.800}
cyan.solid
light: {cyan.600}
dark: {cyan.600}
blue
blue.contrast
light: white
dark: white
blue.fg
light: {blue.700}
dark: {blue.300}
blue.muted
light: {blue.50}
dark: {blue.950}
blue.subtle
light: {blue.100}
dark: {blue.900}
blue.emphasized
light: {blue.200}
dark: {blue.800}
blue.solid
light: {blue.600}
dark: {blue.600}
teal
teal.contrast
light: white
dark: white
teal.fg
light: {teal.700}
dark: {teal.300}
teal.muted
light: {teal.50}
dark: {teal.950}
teal.subtle
light: {teal.100}
dark: {teal.900}
teal.emphasized
light: {teal.200}
dark: {teal.800}
teal.solid
light: {teal.600}
dark: {teal.600}
green
green.contrast
light: white
dark: white
green.fg
light: {green.700}
dark: {green.300}
green.muted
light: {green.50}
dark: {green.950}
green.subtle
light: {green.100}
dark: {green.900}
green.emphasized
light: {green.200}
dark: {green.800}
green.solid
light: {green.600}
dark: {green.600}
yellow
yellow.contrast
light: black
dark: black
yellow.fg
light: {yellow.700}
dark: {yellow.300}
yellow.muted
light: {yellow.50}
dark: {yellow.950}
yellow.subtle
light: {yellow.100}
dark: {yellow.900}
yellow.emphasized
light: {yellow.200}
dark: {yellow.800}
yellow.solid
light: {yellow.300}
dark: {yellow.300}
orange
orange.contrast
light: white
dark: black
orange.fg
light: {orange.700}
dark: {orange.300}
orange.muted
light: {orange.50}
dark: {orange.950}
orange.subtle
light: {orange.100}
dark: {orange.900}
orange.emphasized
light: {orange.200}
dark: {orange.800}
orange.solid
light: {orange.600}
dark: {orange.500}