Manage a color palette
Learn how to manage and save a palette, iterate, and create modes to divide the palette for specific needs (e.g., light, dark, protanomaly).
Last updated
Learn how to manage and save a palette, iterate, and create modes to divide the palette for specific needs (e.g., light, dark, protanomaly).
The slider allows you to change the Lightness, Chroma, and Hue in real-time. You can use the same keyboard shortcuts as the creation.
The changes will be reflected in the Preview.
An acknowledgment is appointed if the color shade/tint is close to the source color:
Closest to source if the Source colors are not locked
Locked source colors if the Source colors are locked
Click on the range to add a new stop. Select a stop, then press Backspace ⌫ to remove it. The stops are renamed to keep a consistent order.
Adding or removing only works in the Custom preset.
Click on the icon to add a new color to the Source colors. There is a icon at each color to remove it definitively from the palette.
The default name of a new color is New UI Color.
The Alpha mode is only available on the /pro plan.
You can change in real-time the name of the color and its hexadecimal code (via the color picker or the text input). The Chroma range can also be shifted to adjust the saturation of the shades/tints' scale. If adjusted, the global Chroma of the palette cannot override this value. If reset, the global Chroma value is restored. The Hue range can also be shifted to adjust the hue of the shades/tints' scale and works the same way as the Chroma.
There are more advanced options (expand first by clicking the icon):
The LCH values, which might be changed directly to update the color
The Hue range can also be shifted to adjust the hue of the shades/tints' scale (handy for the yellow colors)
The Alpha mode makes the source color's scaling transparent instead of creating shades and tints. The contrast is determined by mixing the alpha color with the Background color you set (default is white #FFF). The lightness stops' values are used to set the alpha
The description can help you organize the shades/tints and add semantic meaning
You can reorder the colors list by dragging an item and dropping it above or below another.
Managing Color modes is only available in the /pro plan.
The default color mode is named None
The properties are hidden during the adjustment to provide exemplary performance in editing
Click on the icon to add a new color in the Color modes. Each mode has a icon to remove it definitively from the palette (but it can be redone on the canvas).
The default name of a new color is New UI Mode.
You can create as many color modes as you need; nevertheless, the more modes you manage, the more limits you might meet in creating local variables. According to your Figma plan:
In Figma Starter, you cannot add more than 1 variable mode
In Figma Professional and Organization, you cannot add more than 10 variable modes
Learn more by consulting Figma pricing.
Select a previously created mode via the list at the top-right, and then you can change:
Its Lightness scale
Its Vision simulation mode
Its Dark foreground color
Its Light foreground color
These parameters are connected to the chosen mode. When you select a different mode, these parameters update to match the new mode.
In addition, in the Colors modes, you can change the following:
Color mode name
Palette background color (can be darker for a dark mode)
Color mode description (expand first by clicking the icon)
You can reorder the modes list by dragging an item and dropping it above or below another.
You can refer to the creation guide to learn how to adjust the colors and the contrast.
The changes will be reflected in the Preview.
An acknowledgment is appointed if the color shade/tint is close to the source color:
Closest to source if the Source colors are not locked
Locked source colors if the Source colors are locked
Last updated