Dev Mode is
now supported!

Dev Mode is
now supported!

Dev Mode is
now supported!

Build your Color System on Figma

Easily create, edit, manage, publish, and transfer accessible color palettes for UI with consistent lightness and contrast.

Build your Color System on Figma

Easily create, edit, manage, publish, and transfer accessible color palettes for UI with consistent lightness and contrast.

Build your Color System on Figma

Easily create, edit, manage, publish, and transfer accessible color palettes for UI with consistent lightness and contrast.

+50K

members

CREATE

your accessible palette in seconds

CREATE

your accessible palette in seconds

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

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 and APCA standards to your document canvas

Append a fully accessible color palette

The plugin adds a palette that meets WCAG and APCA standards 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

EDIT

the shading in real-time

EDIT

the shading in real-time

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.

MANAGE

the contrast to ensure accessibility

MANAGE

the contrast to ensure accessibility

Check the contrast score

WCAG 2.0 and APCA scores are utilized to preserve accessibility

Check the contrast score

WCAG 2.0 and APCA scores are utilized to preserve accessibility

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

PUBLISH

the colors through your team and organization

PUBLISH

the colors through your team and organization

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

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

TRANSFER

the palette to development

TRANSFER

the palette to development

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

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

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

Lightness scale management

Source color management

Color space management
(LCH, OKLCH, LAB, etc.)

Contrast management
(WCAG 2.2, APCA)

Export to JSON (every color space data)

Export to CSS Custom Properties (in various color spaces)

Unlimited creation and editing of Styles

Pro

$3

/month

75% off

$9

/year

Free plan features

Color theme management

Color sheet layout

Import from Coolors & Realtime Colors

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 Variables

Frequently Asked Questions

Keep creating palettes for free. Improve their publication and transfer with some extra features.

Frequently Asked Questions

Keep creating palettes for free. Improve their publication and transfer with some extra features.

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.

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.

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

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.

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.

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

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.

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 submit your request.

Ready to Try it out?