UI Color Palette

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.

Documentation

The full documentation can be consulted on docs.ui-color-palette.com.

Contribution

Community

Ask questions, submit your ideas or requests, discuss your usage, debate the evolution, etc. Submit your ideas on Canny.

Issues

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.

Development

• Clone this repository (or fork it).
• Install dependencies with npm install.
• Run npm run start to watch in development mode.
• Go to Figma, then Plugins > Development > Import plugin from manifest… and choose manifest.json in the repository.
• Create a Branch and open a Pull Request.
• Let's do this.

Beta test

• Go to the Actions sections and access the Build and Download UI Color Palette tab.
• 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 choose manifest.json in the unzipped folder.
• Enjoy!

Attribution

• 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.

Support

• Follow the plugin LinkedIn page.
• Connect to my LinkedIn.