Create a color palette

Learn how to create a color palette and save it successfully to your current Figma page. Also, discover how to adjust several parameters to enhance your scaling proficiency.

1

Select and/or import the source colors

You can select and import up to 5 colors on the Free plan.

Select colors from the document canvas

Select one or more filled layers. You might rename these layers because the palette will use the layer name as a color name.

Only frames, shapes are allowed to be turned into source colors if they have at least a solid color as Fill.

Import colors from external palette tools

The color combinations can be edited using tailored tools such as Coolors, Realtime Colors, and Colour Lovers.

For Coolors and Realtime Colors, you can copy the URL and paste it into the appropriate field. The URL will be parsed, and each color will be added to the source colors. The imported color will take its hex code as its name.

For Colour Lovers, you can browse the palettes provided by the community directly from the controller. Each palette is linked to the original one, and the author is mentioned. In case of adding, you will be redirected to the Overview context.

One palette per tool is permitted.

2

Choose a lightness scale preset

Some presets are only available in the Pro plan.

A preset contains a list of stops named from an established nomenclature. These presets are frameworks that can help you build a color scaling:

• Material Design, 10 stops, from 50 to 900 (Google)

• Material 3, 13 stops, from 0 to 100 (Google)・Pro

• Tailwind, 11 stops, from 50 to 950 (Google)・Pro

• Ant Design, 10 stops, from 1 to 10

• ADS Foundations (Atlassian)・Pro:

  • 7 stops, from 50 to 500

  • 19 stops (for neutral colors), from 0 to 900

• Carbon, 10 stops, from 10 to 100 (IBM)・Pro

• Base, 8 stops, from 50 to 700 (Uber)・Pro

• Polaris, 16 stops, from 1 to 16 (Shopify)・Pro

Or make your own from 2 to 8 (24 in Pro) stops via the Custom preset. The stop's naming convention can be edited to meet your needs, only available with this preset when creating a palette:

• 1 - 24, the default option, increasing by 1

• 10 - 240, increasing by 10

• 100 - 2400, increasing by 100

Managing more than 15 stops could complicate the color scaling. It also depends on the number of the Source colors.

3

Adjust the lightness scale

Use the Preview to observe and manage the color scaling in real-time. You can:

• Adjust the view's height by grabbing the top edge

• Expand and collapse the view

• Show the contrast score (WCAG 2.1 and APCA)

Update a stop by sliding its knob on the range. You can slide every knob by using these shortcuts:

• Cmd ⌘ (macOS) or Ctrl ⌃ (Windows/Linux) while sliding any knob to move each of them in the desired direction

• Shift ⇪ while sliding the first or the last stop to distribute each of them equally on the range

In addition, you can adjust the Chroma of every scaled color from 0% (unsaturated) to 200% (oversaturated).

You can tweak a stop with more accuracy:

• Select the stop and press the arrow keys. The default nudge amount is 1%, decreased to 0.1% if the Cmd ⌘ (macOS) or Ctrl ⌃ (Windows/Linux)

• Double-click the stop and change the value

Use the contrast mode

This Contrast mode specifically adjusts the lightness scale more precisely. Instead of adjusting just the lightness, you adjust the contrast ratio score of every color source's shade or tint. The adjustment works like the lightness scale; however, it recalculates the other stops to prevent any disharmonious scaling.

The Contrast mode works very well with the HSLuv color space.

Adjust the chroma

Setting the Chroma is only available on the Pro plan.

You can adjust the Chroma of every scaled color from 0% (unsaturated) to 200% (oversaturated).

You can tweak a stop with more accuracy:

• Select the stop and press the arrow keys. The default nudge amount is 1%, increased to 10% if the Shift ⇧ is pressed

• Double-click the stop and change the value

Distribute the stops

Setting the Distribution easing is only available on the Pro plan.

The Distribution easing drives how the stops are distributed in the range. Linear is the default option and allows you to bring an equivalent gap between the stops, but you can select:

• Ease in for a quick acceleration at the end

• Ease out for a quick acceleration at the start

• Ease in and out for quick acceleration at the start and the end

The easings are varied in three ways:

• Sine

• Regular

• Cubic

4

Rename your palette

You can rename your palette in the bottom bar or via the Settings section. The default name when created is "Untitled," but you can customize the name up to 64 characters. If the name is empty, the palette will be named "UI Color Palette."

If logged in, upon publishing, the palette will be automatically renamed "{Your last name}'s UI Color Palette" if "Untitled" is preserved or the name is empty.

5

Adjust the colors configuration

Use the Preview to observe and manage the color scaling in real-time. You can:

• Adjust the view's height by grabbing the top edge

• Expand and collapse the view

• Show the contrast score (WCAG 2.1 and APCA)

Select a color space

The HSL color space is not recommended for good lightness and contrast consistency. This color space allows you to include the source color within the shades/tints.

You can change the global color space of your whole palette, which will be affected. Fortunately, you can browse the available color spaces without impacting the configuration (scale, source colors). Here are the color spaces:

• LCH (default color space)

• OKLCH

• CIELAB

• OKLAB

• HSL

• HSLuv

Select a vision simulation

The vision impairments are only available on the Pro plan.

You can simulate a specific vision disability to gain insight into how people living with those troubles perceive the world. The contrast between the Text light color/Text dark color and the color shades/tints are also simulated. In that way, the contrast might be managed for every perception of colors. Here are the vision simulations:

• Protanomal

• Protanopia

• Deuteranomaly

• Deuteranopia

• Tritanomaly

• Tritanopia

• Achromatomaly

• Achromatopsia

Select a velocity

You can select how the chroma is calculated through the color scaling. Chroma defines the saturation of color within a specific color gamut (P3, sRGB, D65). The ultimate purpose is to simulate a consistent and smooth chroma variation to avoid shades/tints from overshifting in lightness.

Here are the velocities:

• Linear: lighter shades/tints appear more saturated

• Sinusoidal: shades/tints appear less saturated at both ends

• Sinusoidal and hyperbolic: shades/tints maintain consistent saturation

Lock the source colors

Locking the source colors is only available on the Pro plan.

The color scaling can include every source color instead of the closest shade/tint to this one. It will preserve the brand language despite a weaker contrast consistency.

6

Adjust the contrast configuration

Use the Preview to observe and manage the color scaling in real-time. You can:

• Adjust the view's height by grabbing the top edge

• Expand and collapse the view

• Show the contrast score (WCAG 2.1 and APCA)

You can customize the text colors to simulate contrast between the color shade/tint and accompanying text. This allows you to compare differences using colors more relevant to your brand guidelines. While pure black #000 and white #FFF are the default colors, you can now tailor them to suit your needs better.

The contrast scores will help you achieve sufficient readability of the information on the foreground. APCA is a powerful tool that indicates the minimum typographic contrast needed for effective readability.

7

Bonus: Use the Quick Actions to create in seconds

You can use the Quick Actions feature to access a specific wizard that allows you to select:

• The Preset

• The Color space

• The Layout

• The Name

Every step gives you suggestions, but the last one is free.

Click the Save the UI Color Palette button to save your palette! You can retrieve it in the Local section on the current page.