UI Color Palette on Framer

UI Color Palette is a Framer 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 and tints 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 Framer 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 scaling (or Primitive colors)
• 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

---

Documentation

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

Contribution

Community

Ask questions, submit your ideas or requests 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 dev to watch in development mode
• Run npm run start:ext to run the external services such as the workers ansd the auth lobby
• Go to Framer, then Open Development Plugin…, type this url: http://localhost:5173 and validate
• 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)
• You can use a third-party tool to create a local server from the unzipped artifact, such as MAMP, WAMP, LAMP, etc
• Go to Framer, then Open Development Plugin…, type this url: http://localhost:{customPort} and validate
• 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 color names are provided by color-name by meodai
• Presets inspired by these organizations and projects: Ant Design | Bootstrap | Tailwind CSS | Material (M3) | Untitled UI | Open Color | Radix | Atlassian | Shopify Polaris | Uber Base | Microsoft Fluent | IBM Carbon | Adobe Spectrum

Support

• Follow the plugin LinkedIn page
• Support the author