颜色
可用颜色令牌列表
令牌
Chakra UI 提供以下开箱即用的颜色令牌。
灰色
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
#111111
红色
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.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.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.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.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.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.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.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.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
语义令牌
Chakra UI 提供以下开箱即用的语义令牌。
背景
bg
亮色: {白色}
暗色: {黑色}
bg.subtle
亮色: {gray.50}
暗色: {gray.950}
bg.muted
亮色: {gray.100}
暗色: {gray.900}
bg.emphasized
亮色: {gray.200}
暗色: {gray.800}
bg.inverted
亮色: {黑色}
暗色: {白色}
bg.panel
亮色: {白色}
暗色: {gray.950}
bg.error
亮色: {red.50}
暗色: {red.950}
bg.warning
亮色: {orange.50}
暗色: {orange.950}
bg.success
亮色: {green.50}
暗色: {green.950}
bg.info
亮色: {blue.50}
暗色: {blue.950}
边框
边框
亮色: {gray.200}
暗色: {gray.800}
border.muted
亮色: {gray.100}
暗色: {gray.900}
border.subtle
亮色: {gray.50}
暗色: {gray.950}
border.emphasized
亮色: {gray.300}
暗色: {gray.700}
border.inverted
亮色: {gray.800}
暗色: {gray.200}
border.error
亮色: {red.500}
暗色: {red.400}
border.warning
亮色: {orange.500}
暗色: {orange.400}
border.success
亮色: {green.500}
暗色: {green.400}
border.info
亮色: {blue.500}
暗色: {blue.400}
文本
Ag
fg
亮色: {黑色}
暗色: {gray.50}
Ag
fg.muted
亮色: {gray.600}
暗色: {gray.400}
Ag
fg.subtle
亮色: {gray.400}
暗色: {gray.500}
Ag
fg.inverted
亮色: {gray.50}
暗色: {黑色}
Ag
fg.error
亮色: {red.500}
暗色: {red.400}
Ag
fg.warning
亮色: {orange.600}
暗色: {orange.300}
Ag
fg.success
亮色: {green.600}
暗色: {green.300}
Ag
fg.info
亮色: {blue.600}
暗色: {blue.300}
灰色
gray.contrast
亮色: {白色}
暗色: {黑色}
gray.fg
亮色: {gray.800}
暗色: {gray.200}
gray.subtle
亮色: {gray.100}
暗色: {gray.900}
gray.muted
亮色: {gray.200}
暗色: {gray.800}
gray.emphasized
亮色: {gray.300}
暗色: {gray.700}
gray.solid
亮色: {gray.900}
暗色: {白色}
gray.focusRing
亮色: {gray.400}
暗色: {gray.400}
红色
red.contrast
亮色: 白色
暗色: 白色
red.fg
亮色: {red.700}
暗色: {red.300}
red.subtle
亮色: {red.100}
暗色: {red.900}
red.muted
亮色: {red.200}
暗色: {red.800}
red.emphasized
亮色: {red.300}
暗色: {red.700}
red.solid
亮色: {red.600}
暗色: {red.600}
red.focusRing
亮色: {red.500}
暗色: {red.500}
粉红色
pink.contrast
亮色: 白色
暗色: 白色
pink.fg
亮色: {pink.700}
暗色: {pink.300}
pink.subtle
亮色: {pink.100}
暗色: {pink.900}
pink.muted
亮色: {pink.200}
暗色: {pink.800}
pink.emphasized
亮色: {pink.300}
暗色: {pink.700}
pink.solid
亮色: {pink.600}
暗色: {pink.600}
pink.focusRing
亮色: {pink.500}
暗色: {pink.500}
紫色
purple.contrast
亮色: 白色
暗色: 白色
purple.fg
亮色: {purple.700}
暗色: {purple.300}
purple.subtle
亮色: {purple.100}
暗色: {purple.900}
purple.muted
亮色: {purple.200}
暗色: {purple.800}
purple.emphasized
亮色: {purple.300}
暗色: {purple.700}
purple.solid
亮色: {purple.600}
暗色: {purple.600}
purple.focusRing
亮色: {purple.500}
暗色: {purple.500}
青色
cyan.contrast
亮色: 白色
暗色: 白色
cyan.fg
亮色: {cyan.700}
暗色: {cyan.300}
cyan.subtle
亮色: {cyan.100}
暗色: {cyan.900}
cyan.muted
亮色: {cyan.200}
暗色: {cyan.800}
cyan.emphasized
亮色: {cyan.300}
暗色: {cyan.700}
cyan.solid
亮色: {cyan.600}
暗色: {cyan.600}
cyan.focusRing
亮色: {cyan.500}
暗色: {cyan.500}
蓝色
blue.contrast
亮色: 白色
暗色: 白色
blue.fg
亮色: {blue.700}
暗色: {blue.300}
blue.subtle
亮色: {blue.100}
暗色: {blue.900}
blue.muted
亮色: {blue.200}
暗色: {blue.800}
blue.emphasized
亮色: {blue.300}
暗色: {blue.700}
blue.solid
亮色: {blue.600}
暗色: {blue.600}
blue.focusRing
亮色: {blue.500}
暗色: {blue.500}
青绿色
teal.contrast
亮色: 白色
暗色: 白色
teal.fg
亮色: {teal.700}
暗色: {teal.300}
teal.subtle
亮色: {teal.100}
暗色: {teal.900}
teal.muted
亮色: {teal.200}
暗色: {teal.800}
teal.emphasized
亮色: {teal.300}
暗色: {teal.700}
teal.solid
亮色: {teal.600}
暗色: {teal.600}
teal.focusRing
亮色: {teal.500}
暗色: {teal.500}
绿色
green.contrast
亮色: 白色
暗色: 白色
green.fg
亮色: {green.700}
暗色: {green.300}
green.subtle
亮色: {green.100}
暗色: {green.900}
green.muted
亮色: {green.200}
暗色: {green.800}
green.emphasized
亮色: {green.300}
暗色: {green.700}
green.solid
亮色: {green.600}
暗色: {green.600}
green.focusRing
亮色: {green.500}
暗色: {green.500}
黄色
yellow.contrast
亮色: 黑色
暗色: 黑色
yellow.fg
亮色: {yellow.800}
暗色: {yellow.300}
yellow.subtle
亮色: {yellow.100}
暗色: {yellow.900}
yellow.muted
亮色: {yellow.200}
暗色: {yellow.800}
yellow.emphasized
亮色: {yellow.300}
暗色: {yellow.700}
yellow.solid
亮色: {yellow.300}
暗色: {yellow.300}
yellow.focusRing
亮色: {yellow.500}
暗色: {yellow.500}
橙色
orange.contrast
亮色: 白色
暗色: 黑色
orange.fg
亮色: {orange.700}
暗色: {orange.300}
orange.subtle
亮色: {orange.100}
暗色: {orange.900}
orange.muted
亮色: {orange.200}
暗色: {orange.800}
orange.emphasized
亮色: {orange.300}
暗色: {orange.700}
orange.solid
亮色: {orange.600}
暗色: {orange.500}
orange.focusRing
亮色: {orange.500}
暗色: {orange.500}