# Manage a color palette

{% stepper %}
{% step %}

### Adjust the color scale

The slider allows you to change the `Lightness`, `Chroma`, and `Hue` in real-time. You can use the same keyboard shortcuts as the [creation](https://docs.ui-color-palette.com/create-a-color-palette#set-the-scale).

The changes will be reflected in the `Preview`.

{% hint style="info" %}
An acknowledgment is appointed if the color shade/tint is close to the source color:

* `Closest to source` if the `Source colors` are not locked
* `Locked source colors` if the `Source colors` are locked
  {% endhint %}

#### Add or remove stops in the Custom preset

Click on the range to add a new stop. Select a stop, then press `Backspace ⌫` to remove it. The stops are renamed to keep a consistent order.

{% hint style="info" %}
Adding or removing only works in the `Custom` preset.
{% endhint %}
{% endstep %}

{% step %}

### Change the source colors

#### Add or remove a color

Click on the <i class="fa-plus">:plus:</i> icon to add a new color to the `Source colors`. There is a <i class="fa-minus">:minus:</i> icon at each color to remove it definitively from the palette.

{% hint style="info" %}
The default name of a new color is `New UI Color`.
{% endhint %}

#### Change a color's parameters

{% hint style="warning" %}
The Alpha mode is only available on the <mark style="color:yellow;">`/pro`</mark> plan.
{% endhint %}

You can change in real-time the name of the color and its hexadecimal code (via the color picker or the text input). The `Chroma` range can also be shifted to adjust the saturation of the shades/tints' scale. If adjusted, the global `Chroma` of the palette cannot override this value. If reset, the global `Chroma` value is restored. The `Hue` range can also be shifted to adjust the hue of the shades/tints' scale and works the same way as the `Chroma`.

There are more advanced options (expand first by clicking the <i class="fa-ellipsis">:ellipsis:</i> icon):

* The [`LCH`](https://docs.ui-color-palette.com/glossary#lch) values, which might be changed directly to update the color
* The `Hue` range can also be shifted to adjust the hue of the shades/tints' scale (handy for the yellow colors)
* The `Alpha mode` makes the source color's scaling transparent instead of creating shades and tints. The contrast is determined by mixing the alpha color with the `Background color` you set (default is white `#FFF`). The lightness stops' values are used to set the alpha
* The description can help you organize the shades/tints and add semantic meaning

#### Reorder the colors

You can reorder the colors list by dragging an item and dropping it above or below another.
{% endstep %}

{% step %}

### <i class="fa-lock">:lock:</i> Create color modes

{% hint style="danger" %}
Managing `Color modes` is only available in the <mark style="color:yellow;">`/pro`</mark> plan.
{% endhint %}

{% hint style="info" %}

* The default color mode is named `None`
* The properties are hidden during the adjustment to provide exemplary performance in editing
  {% endhint %}

#### Add or remove a mode

Click on the <i class="fa-plus">:plus:</i> icon to add a new color in the `Color modes`. Each mode has a <i class="fa-minus">:minus:</i> icon to remove it definitively from the palette (but it can be redone on the canvas).

{% hint style="info" %}
The default name of a new color is `New UI Mode`.
{% endhint %}

{% hint style="warning" %}
You can create as many color modes as you need; nevertheless, the more modes you manage, the more limits you might meet in creating local variables. According to your Figma plan:

* In Figma Starter, you cannot add more than 1 variable mode
* In Figma Professional and Organization, you cannot add more than 10 variable modes

Learn more by consulting [Figma pricing](https://www.figma.com/pricing/).
{% endhint %}

#### Change a mode's parameters

Select a previously created mode via the list at the top-right, and then you can change:

* Its `Lightness scale`
* Its `Vision simulation mode`
* Its `Dark foreground color`
* Its `Light foreground color`

These parameters are connected to the chosen mode. When you select a different mode, these parameters update to match the new mode.

In addition, in the `Colors modes`, you can change the following:

* Color mode name
* Palette background color (can be darker for a dark mode)
* Color mode description (expand first by clicking the <i class="fa-ellipsis">:ellipsis:</i> icon)

#### Reorder the modes

You can reorder the modes list by dragging an item and dropping it above or below another.
{% endstep %}

{% step %}

### Adjust colors and contrast

You can refer to the creation guide to learn how to adjust the [colors](https://docs.ui-color-palette.com/create-a-color-palette#adjust-the-colors-configuration) and the [contrast](https://docs.ui-color-palette.com/create-a-color-palette#adjust-the-contrast-configuration).

The changes will be reflected in the `Preview`.

{% hint style="info" %}
An acknowledgment is appointed if the color shade/tint is close to the source color:

* `Closest to source` if the `Source colors` are not locked
* `Locked source colors` if the `Source colors` are locked
  {% endhint %}
  {% 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/guides/manage-a-color-palette.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.