Swatch Manager

There are multiple ways to add colour to elements in Blocs, you can either use static colours which are applied via a custom CSS class or you can use global swatches. The benefit of using a global swatch is, if a global swatches colour value is updated at some point in the future, all Blocs and Brics with that swatch assigned will be automatically updated to reflect the new colour throughout your entire project.

Assign a Global Swatch

To assign a global swatch to any Bloc or Bric, simply right click the selected object and from the contextual menu select the colour option, this will open the global Swatch Manager window. From this window you can select the swatch you wish to assign to the currently selected object. It’s also possible to access the global Swatch Manager by clicking on the colour well located in the sidebar options under the appearance tab or by using the keyboard shortcut ⌘+8.

swatch-color-select

Add a New Global Swatch

To add a new global swatch, click the + symbol located in the top right of the global Swatch Manager window.

add-swatch

Edit Global Swatch

To edit any global swatch, first select it and then click on the master colour well located in the top left corner of the global Swatch Manager window. This will open the native Mac colour picker allowing you to edit the swatches properties. When you make changes to a global swatch, all objects that have that swatch assigned will update throughout your entire project.

edit-swatch

Set Swatch Name

By default, all new global swatches are unnamed. To give a global swatch a custom name simply left click the name label on the Swatch Manager window and then use your keyboard to enter a name of your choice.

Important

Please note. Names given to global swatches are not referenced in the exported code of your website, they are for visual reference only within the design environment.

Delete Global Swatch

To delete a global swatch, click the symbol located in the top right of the global Swatch Manager window.

remove-swatch

To unlink a swatch from any object, click the small cross located inside the colour well in the sidebar options.

unlink-swatch

Updated on 20th March 2019

Was this article helpful?

Related Articles