# Color Chip

Retype automatically detects hex color codes written in inline code and displays them with a visual color preview chip.

When you write a valid hex color code using backticks, Retype renders the color value alongside a small circular preview of that color.

The primary color is `#5495f1` and the background is `#ffffff`.

Color chips work anywhere inline code is supported, including paragraph text, headings, tables, lists, Callouts, and more.

Color chips support standard hex color formats:

Six-digit: `#ff0000` `#00ff00` `#0000ff`

Three-digit: `#f00` `#0f0` `#00f`

Uppercase: `#FF5733` `#C70039` `#900C3F`

Lowercase: `#daa520` `#2e8b57` `#4682b4`

A valid hex color code must:

• Start with a # character
• Be followed by exactly 3 or 6 hexadecimal digits (0-9, A-F, a-f)
• Be wrapped in backticks for inline code

Color chips work great in tables for documenting color palettes:

| Color Name | Hex Code | Usage |
| --- | --- | --- |
| Primary | `#5495f1` | Main brand color |
| Success | `#28a745` | Success states |
| Warning | `#ffc107` | Warning messages |
| Danger | `#dc3545` | Error states |

Only valid hex color codes trigger the color chip preview. Invalid formats like #gggggg or #12 will render as regular inline code.