This option affects how colors are shown in the interface (e.g. the right panel), but it does not affect how code snippets are generated.

Mac app

Here are the supported formats on the Mac app:

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

  • For Web projects, RGBA if color has an alpha value lower than 1, Hex (RGB) otherwise.
  • 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 

For Projects

In the Mac app, you can change the color format in the top menu bar: “Project > Color Representation.”

For Styleguides

In the Mac app, you can change the color format from the top menu bar: “Styleguide > Color Representation.”

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

You will not be able to change the color format for iOS or Android projects. 

Here are the supported formats in the web app and Windows app:

  1. Default: RGB if color has an alpha value lower than 1, HEX otherwise.
  2. HEX: CSS Hex color notation. e.g. #ee67237f 
  3. RGB: CSS rgb color function. e.g. rgba(238, 103, 35, 0.5) 
  4. HSL: CSS hsl color function. e.g. hsla(20, 86%, 54%, 0.5) 

For Projects

You can change the color format by clicking the the right panel in the CSS menu:

For Styleguides

You can change the color format by clicking the the right panel in the CSS menu:

Did this answer your question?