How to Create a Color Palette in Figma Quickly and Easily

To create a color palette in Figma, start by drawing colored shapes or rectangles representing each color. Then, select each color and create a Color Style by clicking the four dots icon in the Fill section and choosing Create Style. This saves your colors for reuse across your designs.

Syntax

In Figma, creating a color palette involves these steps:

• Create shapes filled with your chosen colors.
• Select a shape and open the Fill color panel.
• Click the Styles icon (four dots) next to Fill.
• Choose 'Create Style' to save the color as a reusable style.
• Name the style clearly for easy identification.

These saved color styles form your palette and can be applied to other objects.

figma

1. Draw rectangle with fill color
2. Select rectangle
3. In Fill panel, click Styles icon (four dots)
4. Click 'Create Style'
5. Name the color style
6. Repeat for each color

Example

This example shows how to create a simple 3-color palette in Figma:

• Draw three rectangles side by side.
• Fill each with a different color (e.g., red, blue, green).
• Select the red rectangle, open Fill panel, click Styles icon, and create a style named 'Primary Red'.
• Repeat for blue and green with names 'Primary Blue' and 'Primary Green'.
• Now these colors appear in your Styles panel for easy reuse.

figma

1. Draw rectangle, fill with #FF0000 (red)
2. Select rectangle, open Fill panel
3. Click Styles icon, choose 'Create Style'
4. Name it 'Primary Red'
5. Repeat for #0000FF (blue) as 'Primary Blue'
6. Repeat for #00FF00 (green) as 'Primary Green'

Output

Three color styles named 'Primary Red', 'Primary Blue', and 'Primary Green' saved in your Styles panel.

Common Pitfalls

Common mistakes when creating color palettes in Figma include:

• Not naming color styles clearly, making them hard to find later.
• Using local colors instead of creating styles, which prevents reuse.
• Forgetting to update styles when colors change, causing inconsistent designs.
• Creating too many similar colors without grouping or organizing.

Always use Color Styles for consistency and easy updates.

figma

Wrong way:
- Fill shapes with colors but do not create styles.
Right way:
- Create and name Color Styles for each color used.

Quick Reference

Step	Action
1	Draw shape and fill with color
2	Select shape and open Fill panel
3	Click Styles icon (four dots)
4	Choose 'Create Style'
5	Name the color style
6	Repeat for all colors in palette

Key Takeaways

Use Color Styles in Figma to save and reuse colors consistently.

Name your color styles clearly for easy identification.

Avoid using local colors without styles to maintain design consistency.

Update color styles to reflect changes across your design automatically.

Organize your palette with a manageable number of distinct colors.