Story

The HERE colors are taken from the world around us, connecting the brand to real life.

The primary brand color combination of aqua is inspired from the energy and freedom of open water, while the urban gray provides the solid foundation. Secondary colors are vivid, creating a bright, positive, and versatile color palette. The combination of these colors ensures a balanced and structured color system.

 

 

 

Guidelines

Primary Color Values

The brand colors are HERE Aqua and HERE Gray. They are supported by shades of each color and by white.

HERE Aqua
Inspired by the energy and freedom of open water.
HERE Aqua*
RGB: 72/218/208 HEX: #48dad0 CMYK: 65/0/30/0
RGB: 0/144/138 HEX: #00908a CMYK: 80/10/45/15
HERE Dark Aqua*
RGB: 0/175/170 HEX: #00afaa CMYK: 81/12/40/7
RGB: 118/227/220 HEX: #76e3dc CMYK: 75% HERE Aqua - use black text
RGB: 163/236/231 HEX: #a3ece7 CMYK: 50% HERE Aqua - use black text
RGB: 209/246/243 HEX: #d1f6f3 CMYK: 25% HERE Aqua - use black text
HERE Gray
Inspired by urban environments, it provides a solid foundation to build upon.
HERE Gray
RGB: 56/60/69 HEX: #383c45 CMYK: 30/19/00/83
HERE Dark Gray*
RGB: 15/22/33 HEX: #0f1621 CMYK: Do not use
RGB: 106/109/116 HEX: #6a6d74 CMYK: 75% HERE GRAY - use white text
RGB: 155/157/162 HEX: #9b9da2 CMYK: 50% HERE GRAY - use white text
RGB: 205/206/208 HEX: #cdced0 CMYK: 25% HERE GRAY - use black text
RGB: 255/255/255 HEX: #ffffff CMYK: 0/0/0/0
*Usage exceptions
These examples refer to the colors above marked with an asterisk.

HERE Aqua
For large type, such as headlines, use white type on HERE Aqua.

Dark Aqua
This color can replace HERE Aqua if a higher contrast is needed.

Here Dark Gray
This color can replace HERE Gray if a higher contrast is needed.

Setting type on color
When setting type on color, all type should be either black or white.
Color Modes
Please make sure that your software is set-up in the right color mode for the job. This guarantees that HERE colors always looks their best.

RGB for Screen
All material designed and produced for consumption on screen must be set to an RGB color mode.

CMYK for Print
Any material that will be professionally printed must be designed and produced as CMYK.

Secondary Color Values

Secondary colors are vivid, creating a bright, positive, and versatile color palette. The combination of these colors ensures a balanced and structured color system.

Red
RGB: 196/28/51 HEX: #c41c33 CMYK: 5/95/70/15
RGB: 211/85/102 HEX: #d35566 CMYK: 75% RED - use white text
RGB: 225/141/153 HEX: #e18d99 CMYK: 50% RED - use black text
Pink
RGB: 197/53/128 HEX: #c53580 CMYK: 13/88/5/10
RGB: 212/104/160 HEX: #d468a0 CMYK: 75% PINK - use white text
RGB: 226/154/191 HEX: #e29abf CMYK: 50% PINK - use black text
Orange
RGB: 236/97/14 HEX: #ec610e CMYK: 0/72/100/0
RGB: 241/137/74 HEX: #f1894a CMYK: 75% ORANGE - use white text
RGB: 245/176/134 HEX: #f5b086 CMYK: 50% ORANGE - use black text
Yellow
RGB: 250/184/0 HEX: #fab800 CMYK: 0/30/95/0
RGB: 251/202/64 HEX: #fbca40 CMYK: 75% YELLOW - use black text
RGB: 252/219/127 HEX: #fcdb7f CMYK: 50% YELLOW - use black text
Dark Green
RGB: 112/148/60 HEX: #70943c CMYK: 55/10/85/25
RGB: 148/175/109 HEX: #94af6d CMYK: 75% DARK GREEN - white text
RGB: 183/201/157 HEX: #b7c99d CMYK: 50% DARK GREEN - black text
Light Green
RGB: 6/184/124 HEX: #06b87c CMYK: 75/0/67/0
RGB: 68/202/157 HEX: #44ca9d CMYK: 75% LIGHT GREEN - white text
RGB: 130/219/189 HEX: #82dbbd CMYK: 50% LIGHT GREEN - black text
Dark Blue
RGB: 63/89/167 HEX: #3f59a7 CMYK: 83/65/0/0
RGB: 111/131/189 HEX: #6f83bd CMYK: 75% DARK BLUE - use white text
RGB: 159/172/211 HEX: #9facd3 CMYK: 50% DARK BLUE - use black text
Light Blue
RGB: 82/163/219 HEX: #52a3db CMYK: 65/23/0/0
RGB: 125/186/228 HEX: #7dbae4 CMYK: 75% LIGHT BLUE - white text
RGB: 168/209/237 HEX: #a8d1ed CMYK: 50% LIGHT BLUE - black text
Purple
RGB: 103/58/147 HEX: #673a93 CMYK: 75/87/0/0
RGB: 141/107/174 HEX: #8d6bae CMYK: 75% PURPLE - use white text
RGB: 179/156/201 HEX: #b39cc9 CMYK: 50% PURPLE - use black text
Color Ratio

We use a color ratio of 70:30 (of primary to secondary colors), which governs the use of HERE colors. This keeps an optimal balance and ensures that the secondary colors never overpower the primary colors.

We developed a dedicated color system to help you create lively and harmonious. You may combine up to 3 secondary colors from the secondary color wheel with the primary HERE colors (recommended color combinations are shown below).

The selected secondary colors must comprise of no more than 30% of the overall color impression, as shown above. This is a general principle to be applied across all materials (e.g. brochures, event booths, websites, etc.). For single use examples, such as an ad or web banner, it may not be necessary.

Defining Areas of Color

HERE is a colorful brand - the world’s a big place. Primary and secondary colors can be applied in large areas (e.g. entire page).

White backgrounds must be used for content-heavy pages, to make things easy on the eyes. White backgrounds should be avoided in advertising, and certain applications (e.g. brochures) should not begin with white pages.

image description here 4

Areas of secondary color can be used to structure content (e.g. the beginning of a new section). Either flat colors or unfold backgrounds can be used for this purpose.

image description here 2 image description here

When using the unfold background, reduce text and content as much as possible to retain impact and balance.

Be Bold

Layouts use color and typography to be expressive, expansive and bold. This creates contrast, character and balance. Headlines and statements can be displayed in large sizes to create this balance and add emphasis.

image description here

For a large text, the content should be short and impactful. It can use up the full visual space.

Usage Examples

We’ve pulled together a variety of examples that illustrate ways that the HERE brand colors can be used.