Create custom swatches

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Create custom swatches

If you want to apply the same color to various elements, you can save a swatch of that color in the color picker. This way you'll be applying the exact same color to different elements across your project.

In this lesson
  1. Creating a swatch
  2. Editing a swatch
  3. Deleting a swatch

Creating a swatch

Once you've picked your color in the color picker, you can save it as a swatch and it will  be available in the color picker anywhere in your project. To create a swatch, click the plus icon (+), next to your swatches in the color picker. Then, rename the swatch if you want and save your swatch. By default, your swatch will be saved as a global swatch. You can untick the global checkbox if you want to save it as a static swatch. Global swatches will have a white triangular corner.

Editing a swatch

You can edit a swatch any time from the color picker by selecting the swatch and clicking the pencil icon. Then, use any of the color picker tools to change the color. Once you’ve chosen your color, rename the swatch and save it.

You can also choose to change the swatch from global to static or vice versa.

Updating a global swatch

If you change the color of a global swatch, the color will be updated on all elements and styles where you’ve used that swatch. This is a great way to ensure color consistency throughout your project.

Updating a static swatch

If you change the color of static swatch, the elements using that color aren’t going to change. They’ll stay the same. That’s why these type of swatches are "static" swatches.

Converting a static swatch to a global swatch

You can change any static swatch, like the default black and white swatches, from being static swatches to global swatches by editing the swatch and selecting the global checkbox.

If you’ve applied this static swatch to other elements, those won’t get affected when you convert that static swatch to a global swatch. You’ll have to manually apply the global swatch to each element you want to affect.

Converting a global swatch to a static swatch

You can convert any global swatch into a static swatch by editing the swatch and untick the global checkbox. Any element using that global swatch will be converted to having a static color. A swatch won’t be created for this static color.

Browser support

Can I Use ? Data on support for the feature across the major browsers from

Was this helpful?

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form