Shared Colors

Create, edit, and share colors. These colors can be published to the Store, and can then be used in Frames, text, and more.

Creating Colors

To create a new color, select any existing Frame or create a new one with the Frame tool. Then click the fill property to open the color picker. You can click the empty row or the + icon to create your first shared color. You can also use shared colors within gradients, but you can’t create a shared color that consists of two colors yet.

Here, you can set a name and pick your color. We recommend choosing a semantic name that describes the function or purpose of the color rather than its appearance. Enter a name and click Done to create your first shared color.

Editing Colors

To edit a shared color, select its row and click Edit. Notice that when you select it, the color wheel is hidden to avoid any accidental selections. Once in edit mode, you can rename your shared color and pick a new color entirely. Clicking Done will save your changes, and update it anywhere it’s being used on the canvas.

You can also import your shared colors in code and use them in your code components. For more info on how this works, see our API Docs.

Sharing Colors

Once you’ve created a set of colors, you can share them with others by publishing them to the Store. as part of a package. To learn more about publishing, see our Store docs. You’ll find shared colors installed from packages in the color picker as well, and you can use them in the same way. By clicking on the dropdown menu, you’ll be able to toggle between your presets and any installed package that contains shared colors. To prevent any accidental local changes, shared colors from packages can only be edited by their author. If you maintain a package of shared colors, updating it will reflect the new colors for everyone, keeping them in sync across multiple projects.