# Color System

Reference for all built-in color families & shades.

## Default Palette

Yumma CSS provides 19 color families, each with 13 shades.

| Family | Base |
|--------|------|
| Red | `#e63946` |
| Orange | `#ff6b35` |
| Yellow | `#ffb81c` |
| Lime | `#84cc16` |
| Mint | `#10b981` |
| Green | `#06d6a0` |
| Cyan | `#06b6d4` |
| Sky | `#38bdf8` |
| Blue | `#2563eb` |
| Indigo | `#6366f1` |
| Violet | `#8b5cf6` |
| Lavender | `#a78bfa` |
| Magenta | `#d946ef` |
| Pink | `#ec4899` |
| Coral | `#ff6f91` |
| Zinc | `#52525b` |
| Gray | `#6b7280` |
| Slate | `#64748b` |
| Silver | `#9ca3af` |

## Use Color Utilities

Apply color system utilities to style your elements.

```tsx
<div className="bg:red …"></div>
<div className="bg:green …"></div>
<div className="bg:blue …"></div>
```

## Use Color Shades

Each color family generates 13 values from a single base hex. The base color has no suffix. Shades `1–6` mix progressively more white, and shades `7–12` mix progressively more black.

| Suffix | Direction |
| - | - |
| `1 to 6` | Lightest |
| (none) | Base |
| `7 to 12` | Darkest |

The step size is controlled by `percentage.light` and `percentage.dark` in your config. Both default to `14`.

```tsx
<div className="bg:red-5 …"></div>
<div className="bg:green-5 …"></div>
<div className="bg:blue-5 …"></div>
```

## Use Opacity Modifiers

Target specific opacity values across color utilities. Opacity variants range from `0` to `95` in increments of `5`.

```tsx
<div className="bg:indigo-3/80 …"></div>
<div className="bg:indigo/60 …"></div>
<div className="bg:indigo-9/40 …"></div>
```

## Custom Colors

Extend or override the default palette using the `theme.colors` configuration option.

**1. Configure Custom Colors**

```mjs title="yumma.config.mjs" mark={4-9}
import { defineConfig } from "yummacss";

export default defineConfig({
  theme: {
    colors: {
      background: "#f5f6f7", // add new color family
      blue: "#1a73e8", // overrides the default blue.
    },
  },
});
```

**2. Use Custom Colors**

The bundler plugins & `yummacss watch` pick up config changes automatically.

```tsx "bg:background" "c:blue"
<div className="bg:background …">
  <h1 className="c:blue …">Good evening</h1>
</div>
```

Dark mode is opt-in per color: every color you already use keeps applying in both schemes. See [Dark Mode](/docs/dark-mode) for the full walkthrough.

## Custom Color Shades

Override the default shade percentages using the `theme.colors.percentage` configuration option. The compiler automatically generates color shades (from 1 to 12) using the defined `percentage.light` and `percentage.dark` values.

**1. Configure Custom Colors**

```mjs title="yumma.config.mjs" mark={8-11}
import { defineConfig } from "yummacss";

export default defineConfig({
  theme: {
    colors: {
      background: "#f5f6f7",
      blue: "#1a73e8",
      percentage: {
        light: 16, // default is 14
        dark: 16, // default is 14
      },
    },
  },
});
```

**2. Use Custom Colors**

The bundler plugins & `yummacss watch` pick up config changes automatically.

```tsx title="page.tsx"
<div className="bg:background-6 …">
  <h1 className="c:blue-5 …">Good evening</h1>
</div>
```