How to use color

Using our colors consistently helps create a consistent and recognizable brand across the world. Use only the precise hues and tones defined here. Note that we have not assigned different colors to specific divisions or departments.

Our color palette

The Bayer color palette consists of 12 colors plus white. The 12 colors can be split into three groups: blues, greens and purples. Each color is expressed by four hues; bright, core, mid and dark. None of the colors may exceed 80% opacity or be less than 20%. Dark colors can for example be used for backgrounds or for text. (Body text is usually set in dark blue.) Bright tones can also be used for smaller background areas and text where appropriate.

The lighter tints of the colors are primarily used to support or complement the bright and dark tones. Color can be applied at 100% opacity when used as block color or from 100% to 30% opacity when placed on photos.

We do not recommend entirely covering a photo with an opaque area or gradient as this impairs the photo’s original brightness and might create a murky impression. For this reason, it is very important that gradients are only used deliberately and purposefully.

White space

White is an essential element of our brand. In compositions and layouts, the deliberate, generous use of white space provides a sense of calm and confidence and a canvas against which the other brand colors have greater impact.

Color values

Dark hues 

Mid hues

Core hues

Bright hues

On screen color alternatives

There are alternative versions of some colors in our palette, exclusively for use in html text on screen. This is to ensure sufficient contrast for legibility. No tints of these colours should be used.

Color gradients

Color gradients are also used in combination with the color palette. The blends are always made using the same tones (i.e. blue to blue, green to green, purple to purple). Never blue to green or blue to purple. The blends can be made by blending a dark color to a mid color, a mid to a core color, a core color to a bright color. The blends should always only jump one step, never two or more (i.e. dark to bright).

• Gradients can be used to complement the flat colors or used on their own.

• Gradients can be applied at 100% opacity when used as block color or either at 100% or 90% opacity when placed on photography.

• When creating narrow designs such as newsletter headers, the gradation angle can change from vertical to horizontal. (This should be only applied in exceptional circumstances.)

• Consider production capabilities and legibility when deciding whether or not to use a gradient as opposed to a flat color.

Color gradient examples

The examples below show how to combine flat colors and gradients. 

Treatments to avoid

Avoid using our gradients in these ways.

How it looks in practice