Color

In addition to the brand aspect, color in the digital sector is also highly oriented to the respective area of application. This is how we derive guidelines for using color.

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 date entry fields 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 an interaction and accent color
Blue is used as an interaction color and accent color for basic interactive elements. This supports user guidance and orientation on the page.
Example of how blue is used as branding color on HARTMANN websites.
Blue as a branding color
Blue is used selectively and over large areas when HARTMANN speaks with 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

An extensive color climate is provided for the color design of different requirements. 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 defines the color use.
Infographic showing which colors are to be used for which purposes.

See also

For further information, get in touch

Please email us at branding.support@hartmann.info