# Welcome aboard!

<figure><img src="https://1220964313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDKw8Lf1OZa7VbJBkxy49%2Fuploads%2Fgit-blob-d78b4ec5ca8a2d0456dcc40436526741255036ff%2Fpenpot_cover.png?alt=media" alt=""><figcaption></figcaption></figure>

`UI Color Palette` is a `Penpot` 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/penpot/glossary#lch), [`OKLCH`](https://docs.ui-color-palette.com/penpot/glossary#oklch), [`CIELAB`](https://docs.ui-color-palette.com/penpot/glossary#cielab), [`OKLAB`](https://docs.ui-color-palette.com/penpot/glossary#oklab), and [`HSLuv`](https://docs.ui-color-palette.com/penpot/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/penpot/glossary#primitives))
* Manage the color palette in real-time to control the contrast
* Sync the color shades/tints with local styles
* Generate code in various languages
* 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-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://content.gitbook.com/content/DKw8Lf1OZa7VbJBkxy49/blobs/wo61ImkhIivdPzq1HMlJ/quick_start-source_colors.png">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://content.gitbook.com/content/DKw8Lf1OZa7VbJBkxy49/blobs/voDfZ3ykUIrs7t6AfEDr/quick_start-color_scaling.png">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://content.gitbook.com/content/DKw8Lf1OZa7VbJBkxy49/blobs/bR9Ado3710mpUVj52mdJ/quick_start-change_source_colors.png">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://content.gitbook.com/content/DKw8Lf1OZa7VbJBkxy49/blobs/qEfZuMTKjyXtkltSBJiG/quick_start-change_styles.png">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 tokens</td><td><a href="https://content.gitbook.com/content/DKw8Lf1OZa7VbJBkxy49/blobs/peHbEKib3O6nbWCQlrTW/quick_start-variables.png">quick_start-variables.png</a></td><td><a href="../guides/sync-a-color-palette-to-the-local-library#export-tokens-and-import-them-as-tokens">#export-tokens-and-import-them-as-tokens</a></td></tr><tr><td>How to generate code</td><td><a href="https://content.gitbook.com/content/DKw8Lf1OZa7VbJBkxy49/blobs/zqt2SOli3g4Xrvup4JVO/quick_start-code_gen.png">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>