# Colors

sitemd includes a named color palette you can reference by name instead of hex codes. Use `+color:name` on buttons, inline icons, and card icons — or anywhere a color value is accepted.

## Palette

The default palette ships with 21 colors. Each one is shown below as a button:

button: Red: silent +color:red
button: Orange: silent +color:orange
button: Amber: silent +color:amber
button: Yellow: silent +color:yellow
button: Lime: silent +color:lime
button: Green: silent +color:green
button: Emerald: silent +color:emerald
button: Teal: silent +color:teal
button: Cyan: silent +color:cyan
button: Sky: silent +color:sky
button: Blue: silent +color:blue
button: Indigo: silent +color:indigo
button: Violet: silent +color:violet
button: Purple: silent +color:purple
button: Fuchsia: silent +color:fuchsia
button: Pink: silent +color:pink
button: Rose: silent +color:rose
button: Slate: silent +color:slate
button: Gray: silent +color:gray
button: Zinc: silent +color:zinc
button: Stone: silent +color:stone

## Accent color

The special keyword `accent` refers to the theme's accent color. Unlike palette colors which resolve to static hex values at build time, `accent` outputs a CSS variable that adapts dynamically when the user switches between light, dark, and paper modes.

```markdown
icon:zap +color:accent

button: Get Started: /start +color:accent

card: Feature
card-icon: star +color:accent
card-text: Highlighted with accent color.
```

Use `accent` when you want a color that stays consistent with the rest of the theme's interactive elements — links, focus rings, and active states all use the same accent color.

## Using named colors

Reference any palette color by name with `+color:`:

```markdown
button: Subscribe: /signup +color:green
button: Delete: /confirm +color:red +outline
button: Info: none +color:sky
```

Works everywhere buttons work — header, footer, sidebar, and markdown content. You can always use a raw hex code instead: `+color:#7c3aed`.

Named colors also work on [inline icons](/docs/icons#inline-icon-modifiers) and [card icons](/docs/icons#card-icons):

```markdown
icon:heart +color:rose
card-icon: shield-check +color:emerald
```

## Customizing the palette

The palette is defined in `settings/theme.md` under the `palette:` key:

```yaml
# settings/theme.md
palette:
  red: #ef4444
  orange: #f97316
  green: #22c55e
  blue: #3b82f6
  purple: #a855f7
  # ... more colors
```

You can:

- **Change a color** — edit the hex value next to any name
- **Add a color** — add a new `name: #hex` line
- **Remove a color** — delete the line

Custom names work immediately with `+color:yourname` on any button or icon.

## Default palette reference

| Name | Hex | | Name | Hex |
|---|---|---|---|---|
| red | #ef4444 | | cyan | #06b6d4 |
| orange | #f97316 | | sky | #0ea5e9 |
| amber | #f59e0b | | blue | #3b82f6 |
| yellow | #eab308 | | indigo | #6366f1 |
| lime | #84cc16 | | violet | #8b5cf6 |
| green | #22c55e | | purple | #a855f7 |
| emerald | #10b981 | | fuchsia | #d946ef |
| teal | #14b8a6 | | pink | #ec4899 |
| | | | rose | #f43f5e |

**Neutrals:** slate `#64748b`, gray `#6b7280`, zinc `#71717a`, stone `#78716c`

**Dynamic:** `accent` — the theme's accent color (adapts to light/dark/paper mode)