Color

In addition to the brand aspect, use of color in the digital sector is also highly orientated to the respective area of application. With this in mind, guidelines for the use of color can be derived.

Use of color

We are blue

The new HARTMANN Blue is one of the most important elements in the HARTMANN brand identity. It is the new interaction color for digital applications and provides orientation and navigation. Buttons, forms, lists or even fields for date entries signal through HARTMANN Blue that an action is triggered on the interface.

Depending on how the appearance specifies basic, accent, background and text colors, the interface design must find suitable colors for interaction and orientation elements - and coordinate the color climate in terms of usability.

Example of how blue is used as an interaction and accent color on HARTMANN websites.
Blue as interaction and accent color
Blue is used as an interaction color and accent color for interactive basic elements. This supports user guidance and orientation on the page.
Example of how blue is used as branding color on HARTMANN websites.
Blue as branding color
Blue is used selectively and over large areas when HARTMANN speaks its own voice. This can be done using the ellipse or accentuated, colored areas.

Color distribution

In order to achieve a brand-appropriate color impression, the use of color is defined in terms of content but also quantitatively. The color wheel specifies the color distribution in interface design.
A pie chart illustrating the color usage distribution at HARTMANN.

The HARTMANN color system

For the color design of different requirements, an extensive color climate is provided. In addition to primary and accent colors, a palette of gray tones is available.

HARTMANN color scheme

A colour palette that exemplifiers HARTMANN's brand identity.
Detailed information on primary and secondary colors is described in the Design Basics section.
Design Basics Colors

Additional colors for illustrations

A color palette showing the secondary colors available for illustrations.
The secondary colors for illustration have been expanded. A palette of skin tones and shades of gray is provided.
Design Basics Illustration

Status colors

In interface design, color can support user guidance, especially in the design of interactions. Therefore, learned color associations should be retained, such as the representation of error messages, warnings, confirmations, and notifications.

Examples of use

Example of how red is used as a error message and blue as a notification.

Which color for which purpose?

The purpose of use defines the use of the color.
Infographic showing which colors are to be used for which purposes.

See also

For further information get in touch

HARTMANN Branding Support

Please email us at branding.support@hartmann.info