Brand Colors

Primary Color Palette

Our primary colors not only differentiate Zebra but are memorable and distinct. The tints of Zebra Blue are reserved for graphic accents and to add structure and hierarchy to tables.

Use Zebra Blue as an accent color to contrast the black and white primary colors and add visual interest to Zebra materials. Zebra Blue is used for text on black backgrounds, for graphic shapes (including the angled graphic element when we use blue instead of a gradient), tables and infographic graphic elements.

Use only the Zebra Blue for typography and graphics in print applications. You may use it for text on black or white backgrounds, as well as for tables, graphic shapes (including the angled graphic element when using blue instead of a gradient) and infographic graphic elements.

Zebra Rich Black

Zebra Rich Black is recommended for printing large areas of black, such as front covers, posters and infographics. For small details including text and rules, Plain Black is recommended. You will use Plain Black most of the time.

Color Specifications

Zebra Blue

• HEX: 0073E6
• RGB: 0 115 230
• CMYK: 81 55 0 0
• PMS: 285 C

Zebra Black

• HEX: #000000
• RGB: 0 0 0
• CMYK: 0 0 0 100
• PMS: Black C

Zebra Rich Black

• CMYK: 75 68 67 90
• PMS: Black C

White

• HEX: #FFFFFF
• RGB: 255 255 255
• CMYK: 0 0 0 0
• PMS: White

Zebra Approved Grays

Zebra Black: 80%

• HEX: #333333
• RGB: 51 51 51
• CMYK: 69 63 62 58
• PMS: Black

Zebra Black: 60%

• HEX: #666666
• RGB: 102 102 102
• CMYK: 60 51 51 20
• PMS: Black

Zebra Black: 40%

• HEX: #999999
• RGB: 153 153 153
• CMYK: 43 35 36 1
• PMS: Black

Zebra Black: 20%

• HEX: #CCCCCC
• RGB: 204 204 204
• CMYK: 19 15 16 0
• PMS: Black

Zebra Black: 10%

• HEX: #EEEEEE
• RGB: 238 238 238
• CMYK: 9 6 7 0
• PMS: Black

Zebra Approved Blue Tints

Zebra Blue: 60%

• HEX: #66ABF0
• RGB: 102 171 240
• CMYK: 55 23 0 0
• PMS: 284 C

Zebra Blue: 40%

• HEX: #99C7F5
• RGB: 153 199 245
• CMYK: 36 12 0 0
• PMS: 291 C

Zebra Blue: 20%

• HEX: #CCE3FA
• RGB: 204 227 250
• CMYK: 18 4 0 0
• PMS: 2707 C

Available downloads: Adobe color swatches - download; Sketch color swatches - download

Complementary Colors and Tints

Zebra Purple, Zebra Green and Zebra Yellow

Our complementary color palette was developed to add supplementary visual interest when designing tables, charts, icons, illustrations and infographics only.

The three complementary color families include dark, medium and light tints, which complement each other and can provide varying levels of contrast for subtlety or emphasis.

Please see examples and further information on each color family on the following pages.

Top tips:

• In addition to the complementary color palette, you may also use the Zebra Blue color family with tables, charts, icons, illustrations and infographics
• For collateral, choose a single color family for each page
• For collateral, you may use a different color family on different pages
• Use the RGB mix or HEX number for digital applications and CMYK specifications for print media
• Use PMS for one-color print applications

Color Specifications

Zebra Purple: 100%

• HEX: #1E22AA
• RGB: 30 34 170
• CMYK: 100 87 0 0
• PMS: 2736 C / 2738 U

Zebra Green: 100%

• HEX: #78D64B
• RGB: 120 214 75
• CMYK: 60 0 93 0
• PMS: 7488 C / 375 U

Zebra Yellow: 100%

• HEX: #F6BE00
• RGB: 246 190 0
• CMYK: 0 20 100 0
• PMS: 7408 C / 7406 U

Zebra Purple: 60%

• HEX: #6165E3
• RGB: 97 101 227
• CMYK: 60 52 0 0
• PMS: 2736 C / 2738 U

Zebra Green: 60%

• HEX: #AEE693
• RGB: 174 230 147
• CMYK: 36 0 56 0
• PMS: 7488 C / 375 U

Zebra Yellow: 60%

• HEX: #FFDB61
• RGB: 255 219 97
• CMYK: 0 12 60 0
• PMS: 7408 C / 7406 U

Zebra Purple: 40%

• HEX: #9698EC
• RGB: 150 152 236
• CMYK: 40 35 0 0
• PMS: 2736 C / 2738 U

Zebra Green: 40%

• HEX: #C9EFB7
• RGB: 210 239 183
• CMYK: 24 0 37 0
• PMS: 7488 C / 375 U

Zebra Yellow: 40%

• HEX: #FFE795
• RGB: 255 231 149
• CMYK: 0 8 40 0
• PMS: 7408 C / 7406 U

Zebra Purple: 20%

• HEX: #CACCF6
• RGB: 202 204 246
• CMYK: 20 17 0 0
• PMS: 2736 C / 2738 U

Zebra Green: 20%

• HEX: #E4F7DB
• RGB: 228 247 219
• CMYK: 12 0 19 0
• PMS: 7488 C / 375 U

Zebra Yellow: 20%

• HEX: #FFF3CA
• RGB: 255 243 202
• CMYK: 0 4 20 0
• PMS: 7408 C / 7406 U

Available downloads: Refer to the InDesign Collateral Template and its accompanying ruleset for more information. - download; Adobe color swatches - download; Sketch color swatches - download

Complementary Colors and Tints

Examples of usage: Purple

Text on Purple accessibility guide:

• Zebra Purple: 100%
• Zebra Purple: 60%
• Zebra Purple: 40%
• Zebra Purple: 20%

Use white text

Use Black text

Examples of purple use with tables, charts, icons and infographics:

Example 1: Data Representation

A chart showing 'Lor acimus arum quis' with a value of '2021 75%' and a pie chart showing '81%' with segments labeled '15%', '20%', '65%'.

Example 2: Product Table

Available downloads: InDesign Collateral Template and Ruleset NALA - download; InDesign Collateral Template and Ruleset A4 - download

Complementary Colors and Tints

Examples of usage: Green

Text on Green accessibility guide:

• Zebra Green: 100%
• Zebra Green: 60%
• Zebra Green: 40%
• Zebra Green: 20%

Use Black text

Examples of green use with tables, charts, icons and infographics:

Example 1: Data Representation

A chart showing 'Lor acimus arum quis' with a value of '2021 75%' and a pie chart showing '81%' with segments labeled '15%', '20%', '65%'.

Example 2: Product Table

Available downloads: InDesign Collateral Template and Ruleset NALA - download; InDesign Collateral Template and Ruleset A4 - download

Complementary Colors and Tints

Examples of usage: Yellow

Text on Yellow accessibility guide:

• Zebra Yellow: 100%
• Zebra Yellow: 60%
• Zebra Yellow: 40%
• Zebra Yellow: 20%

Use Black text

Examples of green use with tables, charts, icons and infographics:

Example 1: Data Representation

A chart showing 'Lor acimus arum quis' with a value of '2021 75%' and a pie chart showing '81%' with segments labeled '15%', '20%', '65%'.

Example 2: Product Table

Available downloads: InDesign Collateral Template and Ruleset NALA - download; InDesign Collateral Template and Ruleset A4 - download

Complementary Colors and Tints

Examples of usage: combined colors

Occasionally, you may need to use more than a single color to represent data effectively.

The rules around these use cases vary, whether you are creating a table, a chart or an infographic. Any mix of colors should be applied with caution.

Find more detailed information in the following pages.

Example 1: Data Visualization

A visual representation showing a pie chart with multiple colored segments and percentages, and a bar chart with multiple colored bars and labels like 'XX%', 'X%', 'XX%'.

Example 2: Infographic

An infographic titled 'Uma janela para o futuro do varejo' (A window to the future of retail) in Portuguese, discussing retail technology investments and customer experience. It includes charts and text.

Available downloads: InDesign Collateral Template and Ruleset NALA - download; InDesign Collateral Template and Ruleset A4 - download

Complementary Colors and Tints

Tables

Use only Zebra Blue and its tints for tables in marketing collateral. A single complementary color and its tints can be used in a table within non-collateral (also referred to as "other") materials.

Tables in Collateral

See the InDesign Collateral Template and Ruleset for samples and information about using tables in collateral. As a general rule, follow these specifications to create a new table:

• Table header row: Zebra Blue
• Subhead row: 60% Zebra Blue
• First body row: 20% Zebra Blue

Line: Use a two-point white line to separate cells, vertically and horizontally

Sample collateral table with header and subhead rows

Tables in Other Materials

The PowerPoint sample slides include numerous table examples in Zebra Blue and the complementary colors. These tables can also be used in applications such as documents, reports and forms, etc.

Use a table from the sample slides or follow the specifications shown at right to create a new table in a complementary color.

Sample tables for other materials

Available downloads: InDesign Collateral Template and Ruleset NALA - download; InDesign Collateral Template and Ruleset A4 - download; PowerPoint sample slides - download

Complementary Colors and Tints

Charts, illustrations and infographics

Charts in collateral may only use a single color and its tints.

Charts and illustrations in non-collateral materials, such as PowerPoint, however, may include multiple colors and their tints.

Special Cases

Infographics offer engaging and effective ways to present data and other complex information.

To ensure we protect the Zebra brand identity for clarity, we allow for the following special use cases:

• To differentiate infographic typography and graphic elements, you may use black, tints of black, white, Zebra Blue or tints of Zebra Blue
• However, when designing icons or charts within an infographic, you may only use a single complementary color (Zebra Blue, Purple, Green or Yellow).

Example 1: Infographic with no chart

An infographic titled 'Donnez aux conseillers de vente les moyens exclusifs d'améliorer l'expérience d'achat de leurs clients' (Give sales advisors the exclusive means to improve their customers' shopping experience) in French. It discusses the role of mobile technology for sales advisors and its impact on store performance, with sections on brand experience, personalization, fulfillment options, and store efficiency.

Example 2: Infographic with icons

An infographic titled 'Uma janela para o futuro do varejo' (A window to the future of retail) in Portuguese and English. It discusses how new technologies are key for retailers to satisfy demanding customers, focusing on technology investments planned by retailers until 2021 and key trends like simplifying the purchase journey, streamlining sales areas, and transforming device management. It includes data points and icons.

Complementary Colors and Tints

Situations to avoid

Like all elements of our visual identity, our complementary color palette must be used consistently to ensure a clear connection to the rest of our system.

Top tips:

• Do not use complementary colors for backgrounds, text, text boxes, angled graphic elements or design elements
• Do not use the complementary colors in primary applications
• Do not use the complementary palette as a large solid background color
• Do not use a complementary color for typography in any marketing or corporate materials. Exceptions are made only for infographics and data representation.
• Do not create a complementary color gradient
• Do not use a complementary color for an angled graphic element
• Do not apply more than one complementary color to a collateral page or infographic
• Do not use complementary colors for tables in collateral
• Do not use more than one complementary color for charts in a page layout
• Do not create your own color icons for infographics

See examples of these situations to avoid on the following pages.

Example: Incorrect usage

A document page shown with red lines indicating incorrect usage of complementary colors for backgrounds, text, text boxes, and angled graphic elements.

Complementary Colors and Tints

Situations to avoid, continued

Example: Incorrect usage

A document page shown with red lines indicating incorrect usage of complementary colors in primary applications.

A document page shown with red lines indicating incorrect usage of the complementary palette as a large solid background color.

Complementary Colors and Tints

Situations to avoid, continued

Example: Incorrect usage

A document page shown with red lines indicating incorrect usage of a complementary color for typography in marketing or corporate materials (exceptions noted for infographics and data representation).

A document page shown with red lines indicating incorrect creation of a complementary color gradient.

Complementary Colors and Tints

Situations to avoid, continued

Example: Incorrect usage

A document page shown with red lines indicating incorrect usage of a complementary color for an angled graphic element.

A document page shown with red lines indicating incorrect application of more than one complementary color to a collateral page or infographic.

Complementary Colors and Tints

Situations to avoid, continued

Example: Incorrect usage

A document page shown with red lines indicating incorrect usage of complementary colors for tables in collateral.

A document page shown with red lines indicating incorrect usage of more than one complementary color for charts in a page layout.

Complementary Colors and Tints

Situations to avoid, continued

Example: Incorrect usage

An infographic shown with a red line indicating incorrect creation of custom color icons for infographics.

The infographic content is in French, discussing sales advisors and customer experience, similar to the example on page 9.

Zebra Gradient

Our black and white primary colors are accented by a vibrant gradient spectrum, which gives the system dimension and emphasizes that we are a digitally native brand, delivering guidance in real time.

The Zebra Gradient, a special mixture of three colors, is reserved for use only in angled graphic elements.

Top tips:

• The correct application of the gradient is linear: left to right or right to left, with the lightest blue aligning to the vertical Edge
• To replicate the gradient accurately, use the proprietary breakdown shown
• The Zebra Gradient colors are reserved for the gradient only

How to construct the Zebra Gradient

Gradient Color 1

Location 0%

• HEX: #00FFFF
• RGB: 0 255 255
• CMYK: 65 0 18 0

Gradient Color 2

Location 50%

• HEX: #00C9FF
• RGB: 0 201 255
• CMYK: 75 0 0 0

Gradient Color 3

Location 100%

• HEX: #0099FF
• RGB: 0 153 255
• CMYK: 78 30 0 0

Zebra Gradient

Situations to avoid

The gradient should draw the eye to an area of focus without throwing off the balance of the page.

Top tips:

• Do not overuse the gradient so that it overpowers an image
• Do not use more than a single gradient treatment per page
• Do not use the gradient treatment for a design element other than an angled graphic element being used to define a vertical Edge
• Do not position copy or graphics over an angled graphic element with the gradient
• Do not run the gradient top to bottom or bottom to top; the gradient is designed to run in a linear fashion

See examples of these situations to avoid on the following pages.

Example: Incorrect usage

A document cover titled 'Zebra Printer Portfolio' shown with a blue and black gradient angled across it. A red line indicates that the gradient is overusing the image, overpowering it.

Zebra Gradient

Situations to avoid, continued

Example: Incorrect usage

A document page shown with a red line indicating that more than a single gradient treatment is used per page.

A document page shown with a red line indicating that the gradient treatment is used for a design element other than an angled graphic element being used to define a vertical Edge.

Zebra Gradient

Situations to avoid, continued

Example: Incorrect usage

A document cover titled 'Zebra Printer Portfolio' shown with a blue gradient angled across it. A red line indicates that copy or the Zebra Logo is positioned over an angled graphic element with the gradient.

A document cover titled 'Zebra Printer Portfolio' shown with a blue gradient angled across it. A red line indicates that the gradient runs from top to bottom, rather than in a linear fashion.

Balancing the Colors

Always be mindful of balance on a page. The light and dark themes help to maintain a balanced composition and are integral to delivering a strong Zebra brand.

Light theme (preferred)

Our light theme leans toward a light and fresh balance where the primary background color is white. This theme is preferred for interior document pages. White should be a minimum of 60% of the page, with the rest of the page using predominantly black alongside the accent blue or blue gradient. Additionally, you may use one or two of the gray tints if necessary.

Dark theme

Our dark theme is a bolder application of our colors, and uses Zebra Black as the dominant color. Whereas the white theme is preferred for interior pages, the black theme works well for cover pages, intro pages in longer brochures and signage. Black should be a minimum of 60% of the page, with the rest of the page using predominantly white alongside the accent blue or blue gradient. Additionally, you may use one or two of the gray tints if necessary.

Visual Representation

A visual comparison of the Light theme (preferred) and the Dark theme, showing examples of how colors are balanced on a page.