Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

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.

info
In most cases, we recommend using semantic tokens.

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}

Previous

Breakpoints

Next

Cursors