About Chakra UI
Chakra UI v3 exposes semantic color tokens grouped into families such as blue, each with shades 50 to 950. Tokens drive both light and dark mode automatically.
How to use
Use token syntax like var(--chakra-colors-blue-500) or the color prop. Extend the theme to add brand palettes that inherit dark-mode switching.
Official documentation ↗
Gray
#718096
Shades
50 #F7F 100 #EDF 200 #E2E 300 #CBD 400 #A0A 500 #718 600 #4A5 700 #2D3 800 #1A2 900 #171
Red
#E53E3E
Shades
50 #FFF 100 #FED 200 #FEB 300 #FC8 400 #F56 500 #E53 600 #C53 700 #9B2 800 #822 900 #631
Orange
#DD6B20
Shades
50 #FFF 100 #FEE 200 #FBD 300 #F6A 400 #ED8 500 #DD6 600 #C05 700 #9C4 800 #7B3 900 #652
Yellow
#D69E2E
Shades
50 #FFF 100 #FEF 200 #FAF 300 #F6E 400 #ECC 500 #D69 600 #B77 700 #975 800 #744 900 #5F3
Green
#38A169
Shades
50 #F0F 100 #C6F 200 #9AE 300 #68D 400 #48B 500 #38A 600 #2F8 700 #276 800 #225 900 #1C4
Teal
#319795
Shades
50 #E6F 100 #B2F 200 #81E 300 #4FD 400 #38B 500 #319 600 #2C7 700 #285 800 #234 900 #1D4
Blue
#3182CE
Shades
50 #EBF 100 #BEE 200 #90C 300 #63B 400 #429 500 #318 600 #2B6 700 #2C5 800 #2A4 900 #1A3
Cyan
#00B5D8
Shades
50 #EDF 100 #C4F 200 #9DE 300 #76E 400 #0BC 500 #00B 600 #00A 700 #098 800 #086 900 #065
Purple
#805AD5
Shades
50 #FAF 100 #E9D 200 #D6B 300 #B79 400 #9F7 500 #805 600 #6B4 700 #553 800 #443 900 #322
Pink
#D53F8C
Shades
50 #FFF 100 #FED 200 #FBB 300 #F68 400 #ED6 500 #D53 600 #B83 700 #972 800 #702 900 #521
No matching colors
Source: Chakra UI · @chakra-ui/theme 3.4.1
