# 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/framer/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/framer/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 %}

#### 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/framer/create-a-color-palette#adjust-the-colors-configuration) and the [contrast](https://docs.ui-color-palette.com/framer/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 %}