> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# #color — Named Colors

> Add custom colors to your app's asset catalog

The `#color` command opens a color picker and adds your chosen color as a **named color** in your Xcode asset catalog. This is the only toolkit command that opens a color picker instead of a file picker.

## What It Does

When you use `#color`, the AI:

1. Takes the color you picked and adds it to your **asset catalog** (Assets.xcassets) as a named Color Set
2. Names it based on your description (e.g., "BrandBlue", "BackgroundGray")
3. Applies it wherever you specify in your app

Named colors in the asset catalog can be referenced throughout your SwiftUI code with `Color("BrandBlue")`, keeping your color palette consistent and easy to manage.

## How It's Different

Every other toolkit command opens a **file picker** to let you select a file from your Mac. `#color` is different — it opens the **macOS color picker** so you can choose an exact color visually, enter hex values, or sample colors from your screen.

## How to Use

<Steps>
  <Step title="Type #color in the chat">
    Type `#` and select **color** from the toolkit popover.
  </Step>

  <Step title="Pick your color">
    The macOS color picker opens. Choose your color using the color wheel, sliders, hex input, or the eyedropper to sample from your screen.
  </Step>

  <Step title="Name and describe it">
    The color appears as an orange chip below the input. Tell the AI what to name the color and where to use it.
  </Step>

  <Step title="Send your message">
    Press Enter. The AI adds the named color to your asset catalog and applies it throughout your app.
  </Step>
</Steps>

## Example Prompts

```
Name this 'BrandBlue' and use it for all primary buttons
```

```
This is 'BackgroundGray', use it for the app's main background
```

```
Name this 'AccentOrange' and apply it to the navigation bar
```

```
Call this 'ErrorRed' and use it for form validation messages
```

```
This is 'CardBackground' — apply it to all card views in the app
```

## Why Use Named Colors?

Named colors in the asset catalog give you several advantages over hardcoded hex values:

| Approach                    | Flexibility                      | Dark mode support | Reusability |
| --------------------------- | -------------------------------- | ----------------- | ----------- |
| Hardcoded hex               | Must find and replace everywhere | Manual            | Low         |
| Named color (asset catalog) | Change once, updates everywhere  | Built-in          | High        |

<Tip>
  Adding colors to the asset catalog means they automatically support light and dark mode when you configure both variants. You can ask the AI to set up a dark mode variant for any named color.
</Tip>

## Building a Color Palette

You can use `#color` multiple times to build out your app's full color palette. A typical app might include:

* **Primary** — your main brand color for buttons and key actions
* **Secondary** — a supporting color for less prominent elements
* **Background** — the app's base background color
* **Surface** — card and container backgrounds
* **Text** — primary text color
* **TextSecondary** — secondary/muted text color
* **Accent** — a highlight color for special elements
* **Error** — for error states and validation messages

<Note>
  You can attach multiple colors in a single message. Pick each color, give it a name, and describe where to use it. The AI will add all of them to your asset catalog at once.
</Note>

## Related

<CardGroup cols={2}>
  <Card title="Toolkit Overview" icon="grid-2" href="/toolkit/overview">
    See all available # commands and how the toolkit works.
  </Card>

  <Card title="Appearance" icon="paintbrush" href="/features/appearance">
    Learn about theming, dark mode, and visual customization.
  </Card>
</CardGroup>