UI Color Palette is a Figma and FigJam plugin that creates consistent and accessible color palettes specifically for UI. The plugin uses alternative color spaces, like LCH, OKLCH, CIELAB, OKLAB, and HSLuv, to create color shades based on the configured lightness scale. These spaces ensure WCAG standards compliance and sufficient contrast between information and background color.
The idea to make this Figma plugin comes from the article: Accessible Palette: stop using HSL for color systems.
This plugin will allow you to:
- Create a complete palette from any existing color to help you build a color system.
- Adjust the color palette in real-time to control the contrast.
- Deploy the color palette by publishing it as local styles and variables or exporting it as code for several platforms.
The full documentation can be consulted on docs.ui-color-palette.com.
Ask questions, submit your ideas or requests, discuss your usage, debate the evolution, etc. Submit your ideas on Canny.
Have you encountered a bug? Could a feature be improved? Go to the Issues section and browse the existing tickets or create a new one.
- Clone this repository (or fork it).
- Install dependencies with
npm install. - Run
npm run startto watch in development mode. - Go to Figma, then
Plugins>Development>Import plugin from manifest…and choosemanifest.jsonin the repository. - Create a
Branchand open aPull Request. - Let's do this.
- Go to the Actions sections and access the
Build and Download UI Color Palettetab. - Click
Run workflow, then select a branch and confirm. - Wait a minute, and once finished, download the artifact (which is a ZIP file containing the plugin).
- Go to Figma, then
Plugins>Development>Import plugin from manifest…and choosemanifest.jsonin the unzipped folder. - Enjoy!
- The colors are managed thanks to the chroma.js library by Gregor Aisch.
- The APCA algorithm is provided thanks to the apca-w3 module by Andrew Somers.
- The Figma components are emulated thanks to the Figma Plugin DS stylesheet by Tom Lowry.