# Colors

## Semantic Tokens

Chakra UI supports these semantic tokens out of the box.

:::info

We recommend using semantic tokens as they automatically adapt to color modes
and provide consistent styling across your application.

:::

### Background

| Background Token | Example                    |
| ---------------- | -------------------------- |
| `bg`             | <Box bg="bg" />            |
| `bg.subtle`      | <Box bg="bg.subtle" />     |
| `bg.muted`       | <Box bg="bg.muted" />      |
| `bg.emphasized`  | <Box bg="bg.emphasized" /> |
| `bg.inverted`    | <Box bg="bg.inverted" />   |
| `bg.panel`       | <Box bg="bg.panel" />      |
| `bg.error`       | <Box bg="bg.error" />      |
| `bg.warning`     | <Box bg="bg.warning" />    |
| `bg.success`     | <Box bg="bg.success" />    |
| `bg.info`        | <Box bg="bg.info" />       |

### Text

| Text Token    | Example                     |
| ------------- | --------------------------- |
| `fg`          | <Box color="fg" />          |
| `fg.muted`    | <Box color="fg.muted" />    |
| `fg.subtle`   | <Box color="fg.subtle" />   |
| `fg.inverted` | <Box color="fg.inverted" /> |
| `fg.error`    | <Box color="fg.error" />    |
| `fg.warning`  | <Box color="fg.warning" />  |
| `fg.success`  | <Box color="fg.success" />  |
| `fg.info`     | <Box color="fg.info" />     |

### Border

| Border Token        | Example                                 |
| ------------------- | --------------------------------------- |
| `border`            | <Box borderColor="border" />            |
| `border.muted`      | <Box borderColor="border.muted" />      |
| `border.subtle`     | <Box borderColor="border.subtle" />     |
| `border.emphasized` | <Box borderColor="border.emphasized" /> |
| `border.inverted`   | <Box borderColor="border.inverted" />   |
| `border.error`      | <Box borderColor="border.error" />      |
| `border.warning`    | <Box borderColor="border.warning" />    |
| `border.success`    | <Box borderColor="border.success" />    |
| `border.info`       | <Box borderColor="border.info" />       |

## Tokens

Chakra UI supports the following color tokens out of the box.

| Color Token  | Value     | Example                                    |
| ------------ | --------- | ------------------------------------------ |
| `gray.50`    | `#fafafa` | <Box color="gray.50" bg="gray.50" />       |
| `gray.100`   | `#f4f4f5` | <Box color="gray.100" bg="gray.100" />     |
| `gray.200`   | `#e4e4e7` | <Box color="gray.200" bg="gray.200" />     |
| `gray.300`   | `#d4d4d8` | <Box color="gray.300" bg="gray.300" />     |
| `gray.400`   | `#a1a1aa` | <Box color="gray.400" bg="gray.400" />     |
| `gray.500`   | `#71717a` | <Box color="gray.500" bg="gray.500" />     |
| `gray.600`   | `#52525b` | <Box color="gray.600" bg="gray.600" />     |
| `gray.700`   | `#3f3f46` | <Box color="gray.700" bg="gray.700" />     |
| `gray.800`   | `#27272a` | <Box color="gray.800" bg="gray.800" />     |
| `gray.900`   | `#18181b` | <Box color="gray.900" bg="gray.900" />     |
| `gray.950`   | `#111111` | <Box color="gray.950" bg="gray.950" />     |
| `red.50`     | `#fef2f2` | <Box color="red.50" bg="red.50" />         |
| `red.100`    | `#fee2e2` | <Box color="red.100" bg="red.100" />       |
| `red.200`    | `#fecaca` | <Box color="red.200" bg="red.200" />       |
| `red.300`    | `#fca5a5` | <Box color="red.300" bg="red.300" />       |
| `red.400`    | `#f87171` | <Box color="red.400" bg="red.400" />       |
| `red.500`    | `#ef4444` | <Box color="red.500" bg="red.500" />       |
| `red.600`    | `#dc2626` | <Box color="red.600" bg="red.600" />       |
| `red.700`    | `#991919` | <Box color="red.700" bg="red.700" />       |
| `red.800`    | `#511111` | <Box color="red.800" bg="red.800" />       |
| `red.900`    | `#300c0c` | <Box color="red.900" bg="red.900" />       |
| `red.950`    | `#1f0808` | <Box color="red.950" bg="red.950" />       |
| `orange.50`  | `#fff7ed` | <Box color="orange.50" bg="orange.50" />   |
| `orange.100` | `#ffedd5` | <Box color="orange.100" bg="orange.100" /> |
| `orange.200` | `#fed7aa` | <Box color="orange.200" bg="orange.200" /> |
| `orange.300` | `#fdba74` | <Box color="orange.300" bg="orange.300" /> |
| `orange.400` | `#fb923c` | <Box color="orange.400" bg="orange.400" /> |
| `orange.500` | `#f97316` | <Box color="orange.500" bg="orange.500" /> |
| `orange.600` | `#ea580c` | <Box color="orange.600" bg="orange.600" /> |
| `orange.700` | `#92310a` | <Box color="orange.700" bg="orange.700" /> |
| `orange.800` | `#6c2710` | <Box color="orange.800" bg="orange.800" /> |
| `orange.900` | `#3b1106` | <Box color="orange.900" bg="orange.900" /> |
| `orange.950` | `#220a04` | <Box color="orange.950" bg="orange.950" /> |
| `yellow.50`  | `#fefce8` | <Box color="yellow.50" bg="yellow.50" />   |
| `yellow.100` | `#fef9c3` | <Box color="yellow.100" bg="yellow.100" /> |
| `yellow.200` | `#fef08a` | <Box color="yellow.200" bg="yellow.200" /> |
| `yellow.300` | `#fde047` | <Box color="yellow.300" bg="yellow.300" /> |
| `yellow.400` | `#facc15` | <Box color="yellow.400" bg="yellow.400" /> |
| `yellow.500` | `#eab308` | <Box color="yellow.500" bg="yellow.500" /> |
| `yellow.600` | `#ca8a04` | <Box color="yellow.600" bg="yellow.600" /> |
| `yellow.700` | `#845209` | <Box color="yellow.700" bg="yellow.700" /> |
| `yellow.800` | `#713f12` | <Box color="yellow.800" bg="yellow.800" /> |
| `yellow.900` | `#422006` | <Box color="yellow.900" bg="yellow.900" /> |
| `yellow.950` | `#281304` | <Box color="yellow.950" bg="yellow.950" /> |
| `green.50`   | `#f0fdf4` | <Box color="green.50" bg="green.50" />     |
| `green.100`  | `#dcfce7` | <Box color="green.100" bg="green.100" />   |
| `green.200`  | `#bbf7d0` | <Box color="green.200" bg="green.200" />   |
| `green.300`  | `#86efac` | <Box color="green.300" bg="green.300" />   |
| `green.400`  | `#4ade80` | <Box color="green.400" bg="green.400" />   |
| `green.500`  | `#22c55e` | <Box color="green.500" bg="green.500" />   |
| `green.600`  | `#16a34a` | <Box color="green.600" bg="green.600" />   |
| `green.700`  | `#116932` | <Box color="green.700" bg="green.700" />   |
| `green.800`  | `#124a28` | <Box color="green.800" bg="green.800" />   |
| `green.900`  | `#042713` | <Box color="green.900" bg="green.900" />   |
| `green.950`  | `#03190c` | <Box color="green.950" bg="green.950" />   |
| `teal.50`    | `#f0fdfa` | <Box color="teal.50" bg="teal.50" />       |
| `teal.100`   | `#ccfbf1` | <Box color="teal.100" bg="teal.100" />     |
| `teal.200`   | `#99f6e4` | <Box color="teal.200" bg="teal.200" />     |
| `teal.300`   | `#5eead4` | <Box color="teal.300" bg="teal.300" />     |
| `teal.400`   | `#2dd4bf` | <Box color="teal.400" bg="teal.400" />     |
| `teal.500`   | `#14b8a6` | <Box color="teal.500" bg="teal.500" />     |
| `teal.600`   | `#0d9488` | <Box color="teal.600" bg="teal.600" />     |
| `teal.700`   | `#0c5d56` | <Box color="teal.700" bg="teal.700" />     |
| `teal.800`   | `#114240` | <Box color="teal.800" bg="teal.800" />     |
| `teal.900`   | `#032726` | <Box color="teal.900" bg="teal.900" />     |
| `teal.950`   | `#021716` | <Box color="teal.950" bg="teal.950" />     |
| `blue.50`    | `#eff6ff` | <Box color="blue.50" bg="blue.50" />       |
| `blue.100`   | `#dbeafe` | <Box color="blue.100" bg="blue.100" />     |
| `blue.200`   | `#bfdbfe` | <Box color="blue.200" bg="blue.200" />     |
| `blue.300`   | `#a3cfff` | <Box color="blue.300" bg="blue.300" />     |
| `blue.400`   | `#60a5fa` | <Box color="blue.400" bg="blue.400" />     |
| `blue.500`   | `#3b82f6` | <Box color="blue.500" bg="blue.500" />     |
| `blue.600`   | `#2563eb` | <Box color="blue.600" bg="blue.600" />     |
| `blue.700`   | `#173da6` | <Box color="blue.700" bg="blue.700" />     |
| `blue.800`   | `#1a3478` | <Box color="blue.800" bg="blue.800" />     |
| `blue.900`   | `#14204a` | <Box color="blue.900" bg="blue.900" />     |
| `blue.950`   | `#0c142e` | <Box color="blue.950" bg="blue.950" />     |
| `cyan.50`    | `#ecfeff` | <Box color="cyan.50" bg="cyan.50" />       |
| `cyan.100`   | `#cffafe` | <Box color="cyan.100" bg="cyan.100" />     |
| `cyan.200`   | `#a5f3fc` | <Box color="cyan.200" bg="cyan.200" />     |
| `cyan.300`   | `#67e8f9` | <Box color="cyan.300" bg="cyan.300" />     |
| `cyan.400`   | `#22d3ee` | <Box color="cyan.400" bg="cyan.400" />     |
| `cyan.500`   | `#06b6d4` | <Box color="cyan.500" bg="cyan.500" />     |
| `cyan.600`   | `#0891b2` | <Box color="cyan.600" bg="cyan.600" />     |
| `cyan.700`   | `#0c5c72` | <Box color="cyan.700" bg="cyan.700" />     |
| `cyan.800`   | `#134152` | <Box color="cyan.800" bg="cyan.800" />     |
| `cyan.900`   | `#072a38` | <Box color="cyan.900" bg="cyan.900" />     |
| `cyan.950`   | `#051b24` | <Box color="cyan.950" bg="cyan.950" />     |
| `purple.50`  | `#faf5ff` | <Box color="purple.50" bg="purple.50" />   |
| `purple.100` | `#f3e8ff` | <Box color="purple.100" bg="purple.100" /> |
| `purple.200` | `#e9d5ff` | <Box color="purple.200" bg="purple.200" /> |
| `purple.300` | `#d8b4fe` | <Box color="purple.300" bg="purple.300" /> |
| `purple.400` | `#c084fc` | <Box color="purple.400" bg="purple.400" /> |
| `purple.500` | `#a855f7` | <Box color="purple.500" bg="purple.500" /> |
| `purple.600` | `#9333ea` | <Box color="purple.600" bg="purple.600" /> |
| `purple.700` | `#641ba3` | <Box color="purple.700" bg="purple.700" /> |
| `purple.800` | `#4a1772` | <Box color="purple.800" bg="purple.800" /> |
| `purple.900` | `#2f0553` | <Box color="purple.900" bg="purple.900" /> |
| `purple.950` | `#1a032e` | <Box color="purple.950" bg="purple.950" /> |
| `pink.50`    | `#fdf2f8` | <Box color="pink.50" bg="pink.50" />       |
| `pink.100`   | `#fce7f3` | <Box color="pink.100" bg="pink.100" />     |
| `pink.200`   | `#fbcfe8` | <Box color="pink.200" bg="pink.200" />     |
| `pink.300`   | `#f9a8d4` | <Box color="pink.300" bg="pink.300" />     |
| `pink.400`   | `#f472b6` | <Box color="pink.400" bg="pink.400" />     |
| `pink.500`   | `#ec4899` | <Box color="pink.500" bg="pink.500" />     |
| `pink.600`   | `#db2777` | <Box color="pink.600" bg="pink.600" />     |
| `pink.700`   | `#a41752` | <Box color="pink.700" bg="pink.700" />     |
| `pink.800`   | `#6d0e34` | <Box color="pink.800" bg="pink.800" />     |
| `pink.900`   | `#45061f` | <Box color="pink.900" bg="pink.900" />     |
| `pink.950`   | `#2c0514` | <Box color="pink.950" bg="pink.950" />     |