All Collections
Tips & Tricks
Changing color formats
Changing color formats

Learn how to change color formats to RGB, ARGB or Hex

Didem avatar
Written by Didem
Updated over a week ago

When inspecting color values for layers in Zeplin, you can customize their color formats in the right details panel.

☝️ Changing color formats only affects how color values are displayed in the interface (e.g., the right panel) and does not affect code snippets.

Changing color formats on the Mac app

Here are the supported formats on the Mac app:

1. Automatic: Colors are formatted according to the project type.

  • For Web projects, if color has an alpha value lower than 1, the colors are shown in RGBA. Otherwise, colors are shown in Hex (RGB).

  • For iOS and macOS projects, the colors are shown in RGBA.

  • For Android projects, the colors are shown in Hex (ARGB).

2. RGBA: rgb 238 103 35, 0.5

3. Hex (RGB, A): #ee67237f

4. Hex (ARGB): #7fee6723

You can change the color format for your projects and global styleguides from the top menu bar.

  • For projects: “Project > Color Representation”

Change color representation on Zeplin Project Dashboard

  • For styleguides: “Styleguide > Color Representation”

Change color representation from Zeplin Styleguides

Changing color formats on the Web app and Windows app

On the Windows app and Web app (https://app.zeplin.io), you can change the color format for code outputs in Web projects only.

☝️ It is not possible to change the color format for iOS or Android projects.

Here are the supported formats on the Web app and Windows app:

  1. Default: RGB if color has an alpha value lower than 1, HEX otherwise.

  2. RGB: CSS rgb color function. e.g. rgba(238, 103, 35, 0.5)

  3. HSL: CSS hsl color function. e.g. hsla(20, 86%, 54%, 0.5)

You can change the color format for your Web projects from the project’s styleguide — go to the "Color palette" section and click on the settings button of the CSS extension on the right panel.

If you have the CSS extension in your Web and base styleguides, you can also change the color format for them from the extension’s settings.

Related articles:

Did this answer your question?