> For the complete documentation index, see [llms.txt](https://docs.ui-color-palette.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ui-color-palette.com/readme.md).

# Welcome aboard!

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

`UI Color Palette` is a `Figma` and `FigJam` plugin that creates, manages, deploys, and publishes consistent and accessible color palettes. The plugin uses alternative color spaces, like [`LCH`](/glossary.md#lch), [`OKLCH`](/glossary.md#oklch), [`CIELAB`](/glossary.md#cielab), [`OKLAB`](/glossary.md#oklab), and [`HSLuv`](/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`](/glossary.md#primitives))
* Manage the color palette in real-time to control the contrast
* Sync the color shades/tints with local styles and variables
* Generate code in various languages
* Publish the palette for reuse across multiple documents or add shared palettes from the community

{% hint style="info" %}
If you use the plugin in the Dev mode or the VS Code plugin, you must ask a designer to create the palettes on the current page. [Learn more about the plugin capabilities](/introduction/plugin-capabilities-on-figma-products.md).
{% endhint %}

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

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

And these pages:

<table 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><tr><td>How to create variables</td><td><a href="/files/6OyA48BZg5z0VFkPLnDi">/files/6OyA48BZg5z0VFkPLnDi</a></td><td><a href="/pages/3aWHZdzk1osGxXo5eUMJ#sync-to-the-local-variables">/pages/3aWHZdzk1osGxXo5eUMJ#sync-to-the-local-variables</a></td></tr><tr><td>How to generate code</td><td><a href="/files/Y1iyyP13T0UxMx9UErBk">/files/Y1iyyP13T0UxMx9UErBk</a></td><td><a href="/pages/vQ7QWkCyRxbwhmzSjajB">/pages/vQ7QWkCyRxbwhmzSjajB</a></td></tr></tbody></table>