# Generate a color palette documentation

{% hint style="info" %}
Currently, document generation may be slow depending on the complexity of the color palette. Feel free to take a break and grab a coffee after clicking the button to generate.
{% endhint %}

{% stepper %}
{% step %}

### Generate a document of the palette

Once the palette is finished, you can generate complete documentation of every shade and tint. Click the <i class="fa-ellipsis">:ellipsis:</i> icon in the bottom bar, then select `Generate a document` to access the available document types.

{% hint style="info" %}
As many documents as color modes will be generated.
{% endhint %}

You have 3 types of documents:

* `Palette with properties` displays a palette composed of shades/tints with a few related metadata:
  * The color shade/tint name (according to the chosen lightness scale preset)
  * The `hexadecimal code`
  * The selected `Color space` values
  * The [`WCAG 2.1`](https://docs.ui-color-palette.com/penpot/guides/pages/bkPdo83CYyNZYP2P74v7#wcag-2.1) contrast score with a recommendation
  * The [`APCA`](/penpot/glossary.md#apca) contrast score with a recommendation
* `Palette` displays every shade/tint without any metadata
* `Color sheet` displays a sheet composed of shade/tint with the full related metadata:
  * The color shade/tint name (according to the chosen lightness scale preset)
  * The color shade/tint description
  * The `hexadecimal code`
  * The selected `Color space` values
  * The [`WCAG 2.1`](https://docs.ui-color-palette.com/penpot/guides/pages/bkPdo83CYyNZYP2P74v7#wcag-2.1) contrast score with a recommendation
  * The [`APCA`](/penpot/glossary.md#apca) contrast score with a recommendation and every minimum font size according to the weight

The palette is instantly created close to your view.

{% hint style="danger" %}
Avoid editing the palette directly on the document canvas. The frame named "\_colors﹒do not edit any layer" is by default locked to avoid any updates by hand.
{% endhint %}

{% hint style="info" %}
The palette will be named as referred:

`paletteName`・`paletteColorMode`・`presetName`・`colorSpace`
{% endhint %}
{% endstep %}

{% step %}

### Update a document if the palette has been too

Once you update your palette, click the <i class="fa-ellipsis">:ellipsis:</i> icon in the bottom bar, then `Push updates to the document`. The document will receive the updated metadata, shades, and tints.

{% hint style="info" %}
Each time you update, each time you store an updated backup.
{% endhint %}
{% endstep %}

{% step %}

### Update the document layout

When a document is selected on the canvas and recognized as a "UI Color Palette", you can choose another layout of the list of 3 types (see [Generate a document of the palette](#generate-a-document-of-the-palette)). Once selected, the document will transform its layout.
{% endstep %}

{% step %}

### Open a palette from a select document

When a document is selected on the canvas and recognized as a "UI Color Palette", the controller allows you to access the related palette by clicking the `Open document` button.

{% hint style="info" %}
Keep in mind, this is a shortcut because a document is an instance of the palette. It works like the Penpot component flow model (master-instance).
{% endhint %}
{% endstep %}

{% step %}

### Restore a palette

When a document is selected on the canvas and recognized as a "UI Color Palette", but the `Local Master` palette has not been found on the current page, you can store the palette from a backup stored in the document by clicking the `Restore palette` button.
{% endstep %}
{% endstepper %}


---

# Agent Instructions: 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://docs.ui-color-palette.com/penpot/guides/generate-a-color-palette-documentation.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.