# Welcome aboard!

<figure><img src="https://2065680069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYLQyc5h0TyZorQS76Trn%2Fuploads%2Fgit-blob-0601261acf8d9b0ad47c4837fe73cfc2a0718b09%2Ffigma_cover.png?alt=media" 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`](https://docs.ui-color-palette.com/glossary#lch), [`OKLCH`](https://docs.ui-color-palette.com/glossary#oklch), [`CIELAB`](https://docs.ui-color-palette.com/glossary#cielab), [`OKLAB`](https://docs.ui-color-palette.com/glossary#oklab), and [`HSLuv`](https://docs.ui-color-palette.com/glossary#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`](https://docs.ui-color-palette.com/glossary#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](https://docs.ui-color-palette.com/introduction/plugin-capabilities-on-figma-products).
{% 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="https://2065680069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYLQyc5h0TyZorQS76Trn%2Fuploads%2FCGRDMg1fW5ptha8WCzGF%2Fquick_start-source_colors.png?alt=media&#x26;token=f2340d6e-3e54-4ad4-8c48-fec3631b8ea6">quick_start-source_colors.png</a></td><td><a href="../guides/create-a-color-palette#select-and-or-import-the-source-colors">#select-and-or-import-the-source-colors</a></td></tr><tr><td>How to scale colors</td><td><a href="https://2065680069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYLQyc5h0TyZorQS76Trn%2Fuploads%2FERM7N1nw2DLg8MTspdOT%2Fquick_start-color_scaling.png?alt=media&#x26;token=67545a7f-9064-4048-8423-8099465f933e">quick_start-color_scaling.png</a></td><td><a href="../guides/create-a-color-palette#adjust-the-lightness-scale">#adjust-the-lightness-scale</a></td></tr><tr><td>How to change source colors</td><td><a href="https://2065680069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYLQyc5h0TyZorQS76Trn%2Fuploads%2FuSCmmgOB5IdPbupdDQeX%2Fquick_start-change_source_colors.png?alt=media&#x26;token=c9ad1915-e38d-448a-b709-180071a2b479">quick_start-change_source_colors.png</a></td><td><a href="../guides/manage-a-color-palette#change-the-source-colors">#change-the-source-colors</a></td></tr><tr><td>How to create styles</td><td><a href="https://2065680069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYLQyc5h0TyZorQS76Trn%2Fuploads%2FHGUmiL8zel3fhJlom9CI%2Fquick_start-change_styles.png?alt=media&#x26;token=68ebaf63-9fa8-4ac9-8d5e-efcb79df5bd1">quick_start-change_styles.png</a></td><td><a href="../guides/sync-a-color-palette-to-the-local-library#sync-to-the-local-styles">#sync-to-the-local-styles</a></td></tr><tr><td>How to create variables</td><td><a href="https://2065680069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYLQyc5h0TyZorQS76Trn%2Fuploads%2FWNj4xbgh4i80rhqAaF6I%2Fquick_start-variables.png?alt=media&#x26;token=bed676b0-d734-44e6-908f-0231136e22e5">quick_start-variables.png</a></td><td><a href="../guides/sync-a-color-palette-to-the-local-library#sync-to-the-local-variables">#sync-to-the-local-variables</a></td></tr><tr><td>How to generate code</td><td><a href="https://2065680069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYLQyc5h0TyZorQS76Trn%2Fuploads%2FLkyR15P8h71P6jKIbkM2%2Fquick_start-code_gen.png?alt=media&#x26;token=742f18f1-32ad-488a-9b80-ba01d03b4586">quick_start-code_gen.png</a></td><td><a href="guides/export-a-color-palette-to-code">export-a-color-palette-to-code</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/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.