> For the complete documentation index, see [llms.txt](https://viridian-games.gitbook.io/pixel-palette/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://viridian-games.gitbook.io/pixel-palette/core-components/color-system.md).

# Color System

<figure><img src="/files/aNY8Ynk2bhxZFohCVEjh" alt=""><figcaption></figcaption></figure>

Color flows through three layers: **where it's stored**, **how you pick it**, and **where it's used**.

#### Storage

**`DrawableCanvas.PenColor`** — a single `Color` value (default black). It's the active drawing color. When you change it, `OnPenColorChanged` fires so the UI can update (e.g., the topbar color swatch and the color picker preview).

```
canvas.PenColor = Color.red;   // sets the pen to red
// → fires OnPenColorChanged  // UI picks this up
```

**`canvasClearColor`** — the background color behind all layers (default: white with 0 alpha = fully transparent). Used as the starting pixel value when compositing.

#### How you pick a color

Three ways:

1. **Color picker (uGUI panel)** — a full color picker with:
   * **Color wheel** — click anywhere on the wheel to pick a hue/saturation
   * **RGB sliders** — R, G, and B sliders (0–255) to fine-tune
   * **Grayscale strip** — a gradient from black to white; click/drag to pick a gray
   * **Hex input** — type a hex color like `#FF8800`
   * **Preview** — shows the new color vs. the previous color side by side
   * Every change calls `drawingSettings.SetColor(color)` which sets `canvas.PenColor` in real-time
2. **Color picker tool (eyedropper)** — select the Color Picker brush, click any pixel on the canvas, and that pixel's color becomes the new pen color. It reads directly from the active layer's `RawPixels` array at the clicked coordinate.
3. **Palette swatches** — the bottom toolbar has preset color swatches. Click one to set the pen color instantly. You can also **drag a swatch onto the canvas** to flood-fill with that color (`SwatchDragFill`). Only in UIToolkit for now.

#### Where it's used

| Tool             | How it uses PenColor                                           |
| ---------------- | -------------------------------------------------------------- |
| **Pen**          | Paints `PenColor` as a square of pixels at the brush size      |
| **Eraser**       | Ignores PenColor — always paints transparent black `(0,0,0,0)` |
| **Fill**         | Flood-fills with `PenColor`                                    |
| **Color Picker** | Reads the pixel under the cursor and sets `PenColor` to match  |

#### Color format

All pixel data is stored as **`Color32`** (R, G, B, A as bytes 0–255). The pen color is stored as Unity `Color` (float 0–1) and converted to `Color32` when painting. The `ColorPickerBrush` samples from `Color32` and sets `PenColor` as a `Color` (the implicit conversion preserves the values).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://viridian-games.gitbook.io/pixel-palette/core-components/color-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.