Color Palettes that meet WCAG Guidelines and Operations.

+60K

Installs

Featured at the
Figma Config 2024

UI Color Palette is a small tool that allows Product Team Members to manage and deliver consistent, ready-for-development color palettes.

Transform your brand colors into shades

Colors can be selected from the document canvas to create various shades effortlessly.

Transform your brand colors into shades

Colors can be selected from the document canvas to create various shades effortlessly.

Transform your brand colors into shades

Colors can be selected from the document canvas to create various shades effortlessly.

Create.

Create your accessible palette in seconds.

Create.

Create your accessible palette in seconds.

Create.

Create your accessible palette in seconds.

Customize the lightness stops

There are 7 groups of stops including Material Design, Atlassian, and Custom (with up to 24 stops).

Customize the lightness stops

There are 7 groups of stops including Material Design, Atlassian, and Custom (with up to 24 stops).

Customize the lightness stops

There are 7 groups of stops including Material Design, Atlassian, and Custom (with up to 24 stops).

Append a fully accessible color palette

The plugin adds a palette that meets WCAG 2.1 and APCA standard to your document canvas.

Append a fully accessible color palette

The plugin adds a palette that meets WCAG 2.1 and APCA standard to your document canvas.

Append a fully accessible color palette

The plugin adds a palette that meets WCAG 2.1 and APCA standard to your document canvas.

Slide the stops to change the lightness of every source color

The contrast between the different shades of color in the document canvas is observable.

Slide the stops to change the lightness of every source color

The contrast between the different shades of color in the document canvas is observable.

Slide the stops to change the lightness of every source color

The contrast between the different shades of color in the document canvas is observable.

Manage.

Manage the color scaling that complies with WCAG.

Manage.

Manage the color scaling that complies with WCAG.

Manage.

Manage the color scaling that complies with WCAG.

Keep the source colors as the single source of truth

Individual source colors can be edited without affecting the lightness scale.

Keep the source colors as the single source of truth

Individual source colors can be edited without affecting the lightness scale.

Keep the source colors as the single source of truth

Individual source colors can be edited without affecting the lightness scale.

Create color themes to vary the shading

Include light and dark modes in your color palette, as well as any other modes you require.

Create color themes to vary the shading

Include light and dark modes in your color palette, as well as any other modes you require.

Create color themes to vary the shading

Include light and dark modes in your color palette, as well as any other modes you require.

Check the contrast score

WCAG 2.1 and APCA scores provide guidelines on how to utilize contrast in your use cases.

Check the contrast score

WCAG 2.1 and APCA scores provide guidelines on how to utilize contrast in your use cases.

Check the contrast score

WCAG 2.1 and APCA scores provide guidelines on how to utilize contrast in your use cases.

Change the color space of the palette

Color perception varies depending on its color space (LCH, OKLCH, LAB, OKLAB, HSL, HSLuv).

Change the color space of the palette

Color perception varies depending on its color space (LCH, OKLCH, LAB, OKLAB, HSL, HSLuv).

Change the color space of the palette

Color perception varies depending on its color space (LCH, OKLCH, LAB, OKLAB, HSL, HSLuv).

Customize the text color above the shades

The color of text is seldom purely black or white in either mode.

Customize the text color above the shades

The color of text is seldom purely black or white in either mode.

Customize the text color above the shades

The color of text is seldom purely black or white in either mode.

Synchronize local styles and variables with the palette

The document local styles are created and updated based on your master color palette.

Synchronize local styles and variables with the palette

The document local styles are created and updated based on your master color palette.

Synchronize local styles and variables with the palette

The document local styles are created and updated based on your master color palette.

Sync.

Sync the colors with local libraries and 3rd-party tools.

Sync.

Sync the colors with local libraries and 3rd-party tools.

Sync.

Sync the colors with local libraries and 3rd-party tools.

Load your color palette in Tokens Studio

The color shades creation will be in good hands to turn them into color tokens.

Load your color palette in Tokens Studio

The color shades creation will be in good hands to turn them into color tokens.

Load your color palette in Tokens Studio

The color shades creation will be in good hands to turn them into color tokens.

Create color tokens for Amazon Style Dictionary

The Style Dictionary generates stylesheets (CSS, SwiftUI, Compose, etc.) from platform-agnostic tokens.

Create color tokens for Amazon Style Dictionary

The Style Dictionary generates stylesheets (CSS, SwiftUI, Compose, etc.) from platform-agnostic tokens.

Create color tokens for Amazon Style Dictionary

The Style Dictionary generates stylesheets (CSS, SwiftUI, Compose, etc.) from platform-agnostic tokens.

Transfer.

Transfer the palette to development.

Transfer.

Transfer the palette to development.

Transfer.

Transfer the palette to development.

Configure your Tailwind theme

The configuration file will set a tailored color theme for the Tailwind framework.

Configure your Tailwind theme

The configuration file will set a tailored color theme for the Tailwind framework.

Configure your Tailwind theme

The configuration file will set a tailored color theme for the Tailwind framework.

Obtain color assets that comply with Apple, Android, and Web apps

These documents are a good starting point for kicking off an app project on both platforms.

Obtain color assets that comply with Apple, Android, and Web apps

These documents are a good starting point for kicking off an app project on both platforms.

Obtain color assets that comply with Apple, Android, and Web apps

These documents are a good starting point for kicking off an app project on both platforms.

Export the palette directly on VS Code

Place the generated code of the palette near your code to reduce switch fatigue.

Export the palette directly on VS Code

Place the generated code of the palette near your code to reduce switch fatigue.

Export the palette directly on VS Code

Place the generated code of the palette near your code to reduce switch fatigue.

Use your palette in other Figma documents

Each published palette is linked and depends on a single source of truth to stay updated.

Use your palette in other Figma documents

Each published palette is linked and depends on a single source of truth to stay updated.

Use your palette in other Figma documents

Each published palette is linked and depends on a single source of truth to stay updated.

Publish.

Publish palettes for reuse and sharing.

Publish.

Publish palettes for reuse and sharing.

Publish.

Publish palettes for reuse and sharing.

Promote the exchange of practices and inspiration

Permit members of UI Color Palette to use your palettes for a quick start.

Promote the exchange of practices and inspiration

Permit members of UI Color Palette to use your palettes for a quick start.

Promote the exchange of practices and inspiration

Permit members of UI Color Palette to use your palettes for a quick start.

Plans.

Continue creating palettes for free. Enhance deployment with some extras.

Plans.

Continue creating palettes for free. Enhance deployment with some extras.

Plans.

Continue creating palettes for free. Enhance deployment with some extras.

Free

$0

/month

Unlimited creation and editing of color palettes

Explore palettes from the community

Publish and reuse palettes

Import source colors from external librairies (Coolors, Realtime Colors, etc.)

Manage lightness scale (Tailwind, Material 3, etc.)

Manage color space (LCH, OKLCH, LAB, etc.)

Manage contrast (WCAG 2.1, APCA)

Export to JSON (every color space data)

Export to CSS Custom Properties (in various color spaces)

Pro

$3

/month

50% off

$18

/year

Free plan features

Manage color theme

Generate a color sheet layout

Export to Amazon Style Dictionary, Tailwind and Tokens Studio

Export to Apple SwiftUI and UIKit

Export to Android Compose and Resources

Simulate vision impairment

Unlimited creation and editing of Styles and Variables

Distribution easing

Frequently Asked Questions.

Here are the answers to the questions regarding the subscription for UI Color Palette Pro.

Frequently Asked Questions.

Here are the answers to the questions regarding the subscription for UI Color Palette Pro.

Frequently Asked Questions.

Here are the answers to the questions regarding the subscription for UI Color Palette Pro.

How can I subscribe to the Pro plan?

When the plugin is up and running, you'll be able to easily subscribe to the Pro Plan on Figma. Just click the “Get Pro” button and fill out the purchase form. Your subscription will be linked to your personal account and subject to the Figma Terms of Service.

If you need more information, check out this helpful article on purchasing Community resources on Figma Learn.

How can I manage my subscription?

Managing your subscription on Figma is easy. To get started, just head to your “Settings” and select the “Community” tab. From there, display the actions from the UI Color Palette plugin and click on “Manage subscription”. You'll be taken to a Stripe portal where you can manage your payment method and subscriptions.

We cannot manage your subscription, so if you need more information, check out this helpful article on purchasing Community resources on Figma Learn.

Would I be refunded if the Pro plan is not what I have expected?

UI Color Palette offers subscription only. Refunds are not available for the whole 24 hours after purchase. However, you can cancel the subscription at any time. By doing so, the renewal will end, but you will still have access to the plugin until the next month.

You can find more information about refunds on Figma Learn.

How can I cancel my subscription from the Pro plan?

Cancel your subscription on Figma is easy. To get started, just head to your “Settings” and select the “Community” tab. From there, display the actions from the UI Color Palette plugin and click on “Manage subscription”. You'll be taken to a Stripe portal where you can manage your payment method and subscriptions.

If you need more information, check out this helpful article on purchasing Community resources on Figma Learn.

I am using a credit card that is based in Russia or India

At this time, these credit cards are not accepted to purchase.

What should I do if I'm stuck and need help?

To receive support, please send an email to: hello@ui-color-palette.com. Be sure to explain your issue with clear steps to reproduce, and include any relevant screenshots.

How can I give feedback or suggest a new feature?

We would be delighted to read your feedback, as your input helps us build a useful product for managing color palettes in UI.

Please access this form to give feedback and this platform to submit your request.

Ready to Try it out?

Run UI Color Palette