Skip to Content
Documentation
Saas UI
Get Pro
Getting started
Components
Overview

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

#111111

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.subtle

light: {gray.50}

dark: {gray.950}

bg.muted

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.muted

light: {gray.100}

dark: {gray.900}

border.subtle

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.muted

light: {gray.600}

dark: {gray.400}

Ag

fg.subtle

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: {black}

gray.fg

light: {gray.800}

dark: {gray.200}

gray.subtle

light: {gray.100}

dark: {gray.900}

gray.muted

light: {gray.200}

dark: {gray.800}

gray.emphasized

light: {gray.300}

dark: {gray.700}

gray.solid

light: {gray.900}

dark: {white}

gray.focusRing

light: {gray.400}

dark: {gray.400}

red

red.contrast

light: white

dark: white

red.fg

light: {red.700}

dark: {red.300}

red.subtle

light: {red.100}

dark: {red.900}

red.muted

light: {red.200}

dark: {red.800}

red.emphasized

light: {red.300}

dark: {red.700}

red.solid

light: {red.600}

dark: {red.600}

red.focusRing

light: {red.500}

dark: {red.500}

pink

pink.contrast

light: white

dark: white

pink.fg

light: {pink.700}

dark: {pink.300}

pink.subtle

light: {pink.100}

dark: {pink.900}

pink.muted

light: {pink.200}

dark: {pink.800}

pink.emphasized

light: {pink.300}

dark: {pink.700}

pink.solid

light: {pink.600}

dark: {pink.600}

pink.focusRing

light: {pink.500}

dark: {pink.500}

purple

purple.contrast

light: white

dark: white

purple.fg

light: {purple.700}

dark: {purple.300}

purple.subtle

light: {purple.100}

dark: {purple.900}

purple.muted

light: {purple.200}

dark: {purple.800}

purple.emphasized

light: {purple.300}

dark: {purple.700}

purple.solid

light: {purple.600}

dark: {purple.600}

purple.focusRing

light: {purple.500}

dark: {purple.500}

cyan

cyan.contrast

light: white

dark: white

cyan.fg

light: {cyan.700}

dark: {cyan.300}

cyan.subtle

light: {cyan.100}

dark: {cyan.900}

cyan.muted

light: {cyan.200}

dark: {cyan.800}

cyan.emphasized

light: {cyan.300}

dark: {cyan.700}

cyan.solid

light: {cyan.600}

dark: {cyan.600}

cyan.focusRing

light: {cyan.500}

dark: {cyan.500}

blue

blue.contrast

light: white

dark: white

blue.fg

light: {blue.700}

dark: {blue.300}

blue.subtle

light: {blue.100}

dark: {blue.900}

blue.muted

light: {blue.200}

dark: {blue.800}

blue.emphasized

light: {blue.300}

dark: {blue.700}

blue.solid

light: {blue.600}

dark: {blue.600}

blue.focusRing

light: {blue.500}

dark: {blue.500}

teal

teal.contrast

light: white

dark: white

teal.fg

light: {teal.700}

dark: {teal.300}

teal.subtle

light: {teal.100}

dark: {teal.900}

teal.muted

light: {teal.200}

dark: {teal.800}

teal.emphasized

light: {teal.300}

dark: {teal.700}

teal.solid

light: {teal.600}

dark: {teal.600}

teal.focusRing

light: {teal.500}

dark: {teal.500}

green

green.contrast

light: white

dark: white

green.fg

light: {green.700}

dark: {green.300}

green.subtle

light: {green.100}

dark: {green.900}

green.muted

light: {green.200}

dark: {green.800}

green.emphasized

light: {green.300}

dark: {green.700}

green.solid

light: {green.600}

dark: {green.600}

green.focusRing

light: {green.500}

dark: {green.500}

yellow

yellow.contrast

light: black

dark: black

yellow.fg

light: {yellow.800}

dark: {yellow.300}

yellow.subtle

light: {yellow.100}

dark: {yellow.900}

yellow.muted

light: {yellow.200}

dark: {yellow.800}

yellow.emphasized

light: {yellow.300}

dark: {yellow.700}

yellow.solid

light: {yellow.300}

dark: {yellow.300}

yellow.focusRing

light: {yellow.500}

dark: {yellow.500}

orange

orange.contrast

light: white

dark: black

orange.fg

light: {orange.700}

dark: {orange.300}

orange.subtle

light: {orange.100}

dark: {orange.900}

orange.muted

light: {orange.200}

dark: {orange.800}

orange.emphasized

light: {orange.300}

dark: {orange.700}

orange.solid

light: {orange.600}

dark: {orange.500}

orange.focusRing

light: {orange.500}

dark: {orange.500}

Previous

Breakpoints

Next

Radii