# Welcome aboard!

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

`UI Color Palette` is a `Framer` plugin that creates, manages, deploys, and publishes consistent and accessible color palettes. The plugin uses alternative color spaces, like [`LCH`](/framer/glossary.md#lch), [`OKLCH`](/framer/glossary.md#oklch), [`CIELAB`](/framer/glossary.md#cielab), [`OKLAB`](/framer/glossary.md#oklab), and [`HSLuv`](/framer/glossary.md#hsluv), to create color shades and tints based on the configured lightness scale. These spaces ensure [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) compliance and sufficient contrast between information and background color.

This plugin will allow you to:

* Create a complete palette from any existing color to help you build a color scaling (or [`Primitive colors`](/framer/glossary.md#primitives))
* Manage the color palette in real-time to control the contrast
* Sync the color shades/tints with local styles
* Publish the palette for reuse across multiple documents or add shared palettes from the community

For a quick start, you can refer to this demo:

{% embed url="<https://app.supademo.com/demo/cmfgpta8gc8ei39ozrkk60sbq>" %}

And these pages:

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>How to select source colors</td><td><a href="/files/Je81N8Dch8LZfvBIZ79a">/files/Je81N8Dch8LZfvBIZ79a</a></td><td><a href="/pages/yHiuEIEmGzq4Oba6mp2S#select-and-or-import-the-source-colors">/pages/yHiuEIEmGzq4Oba6mp2S#select-and-or-import-the-source-colors</a></td></tr><tr><td>How to scale colors</td><td><a href="/files/GGlRuzKZgUqMzpCdFfLG">/files/GGlRuzKZgUqMzpCdFfLG</a></td><td><a href="/pages/yHiuEIEmGzq4Oba6mp2S#adjust-the-lightness-scale">/pages/yHiuEIEmGzq4Oba6mp2S#adjust-the-lightness-scale</a></td></tr><tr><td>How to change source colors</td><td><a href="/files/ZZGTscazOfjrxL0HhyzS">/files/ZZGTscazOfjrxL0HhyzS</a></td><td><a href="/pages/ij0RUindKVdIyuoF56mT#change-the-source-colors">/pages/ij0RUindKVdIyuoF56mT#change-the-source-colors</a></td></tr><tr><td>How to create styles</td><td><a href="/files/Iolyh2z7i4yGvRSno6ek">/files/Iolyh2z7i4yGvRSno6ek</a></td><td><a href="/pages/3aWHZdzk1osGxXo5eUMJ#sync-to-the-local-styles">/pages/3aWHZdzk1osGxXo5eUMJ#sync-to-the-local-styles</a></td></tr></tbody></table>


---

# 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/framer/readme.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.