All Collections
Global Styleguides
Organizing styleguide colors
Organizing styleguide colors

Learn how to organize color in your project styleguide

Didem avatar
Written by Didem
Updated over a week ago

Zeplin lists all colors used in layers in the right panel, under the Colors tab (🎨).

Adding colors from screens

You can add colors to your styleguide by clicking the button right next to the color codes.

Adding suggested colors

If you're working with Sketch, Zeplin grabs all of the colors added as document colors and the colors you have set up in layer styles automatically and lists them under the project styleguide. To add them to the project, you can either add them all using the “Add All Colors” button or click separately on the ones you want to add.

Reordering colors

To reorder a color, click on the color itself and then drag the color to the place you want.

Editing colors

You can edit names, hex codes and opacities of colors by just clicking on them. There's no character limit for color names. Zeplin remembers color names across projects as you rename them.

Deleting colors

To delete a color from your styleguide, just click on the “⨉” icon that appears when you hover over the color. You can also right click on the color and select “Delete”.

If you want to delete all of your colors in your styleguide at once, you can click on the “…” button and then select “Delete All Colors” option from the revealed menu.

Related articles:

Did this answer your question?