When inspecting color values for layers in Zeplin, you can customize the color formats displayed on the right panel. You'll see the "Color format" dropdown menu under the "Color settings" button revealed when hovering the color on the right panel.
☝️ Changing color formats on the right panel only affects how color values are displayed in the interface and does not affect code snippets.
Here are the supported color formats in Zeplin:
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).
RGBA:
rgb (238 103 35, 0.5)Hex (RGB, A):
#ee67237fHex (ARGB):
#7fee6723HSL:
hsl(20, 86%, 54%, 0.5)
Changing color formats for code snippets
You can change color formats for code snippets only in Web-type projects/styleguides from the CSS extension settings.
☝️ It is not possible to change color formats for code snippets in iOS, macOS, or Android projects/styleguides.
To do this from the screen detail, click the settings button next to the CSS extension. There, you'll see the Color format options.
If you'd like to change color formats for your styleguide, navigate to the "Colors" page under the "Foundations" section and click the settings button next to the CSS extension on the right panel.
💁♀️ If you have the CSS extension in your base styleguide, you can also change the color format from the extension settings.
Here are the supported color formats for CSS code snippets:
Default: RGB if color has an alpha value lower than 1, HEX otherwise.
HEX: CSS Hex color notation. e.g.
#ee67237fRGB: 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)