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
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.”
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.
☝️ 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:
Default: RGB if color has an alpha value lower than 1, HEX otherwise.
HEX: CSS Hex color notation. e.g. #ee67237f
RGB: CSS rgb color function. e.g. rgba(238, 103, 35, 0.5)
HSL: CSS hsl color function. e.g. hsla(20, 86%, 54%, 0.5)
For Projects
You can change the color format by clicking the right panel in the CSS menu:
For Styleguides
You can change the color format by clicking the right panel in the CSS menu:
