# Welcome aboard!

<figure><img src="https://2065680069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYLQyc5h0TyZorQS76Trn%2Fuploads%2Fgit-blob-ef9226c7ad75b21c7f0f3e2fbd0ed85b7b4133d6%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>