How to use color

Selfie of two women hiking in the mountains

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

image

 

image

 

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.

image
Example of a color overlay at 60% opacity.
image
Example of a color overlay at 30% opacity.
image
Don’t use an opacity under 30%.

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.

 

image

 

Pantone

not applicable

RGB

255/255/255

HEX

FFFFFF

CMYK

0/0/0/0


Color values

Dark hues 

image

Pantone

2380C

RAL

5011

RGB

16/56/79

HEX

10384F

CMYK

80/33/0

/80

image

Pantone

553C

RAL

160 30 15

RGB

0/68/34

HEX

004422

CMYK

82/30/65

/76

image

Pantone

518C

RAL

330 20 20

RGB

68/50/71

HEX

443247

CMYK

55/88/32

/63

Mid hues

image

Pantone

2152C

RAL

240 40 30

RGB

0/97/127

HEX

00617F

CMYK

84/32/13

/22

image

Pantone

7742C

RAL

6001

RGB

43/102/54

HEX

2B6636

CMYK

71/5/92

/45

image

Pantone

5135C

RAL

4001

RGB

98/73/99

HEX

624963

CMYK

36/68/24

/31

Core hues

image

Pantone

2192C

RAL

5012

RGB

0/145/223

HEX

0091DF

CMYK

93/17/6

/0

image

Pantone

376C

RAL

120 70 75

RGB

102/181/18

HEX

66B512

CMYK

57/0/100

/0

image

Pantone

1925C

RAL

010 40 53

RGB

211/15/75

HEX

D30F4B

CMYK

0/100/55

/0

Bright hues

image

Pantone

298C

RAL

240 70 30

RGB

0/188/255

HEX

00BCFF

CMYK

71/0/0

/0

image

Pantone

2299C

RAL

110 80 70

RGB

137/211/41

HEX

89D329

CMYK

40/0/100

/0

image

Pantone

1785C

RAL

3018

RGB

255/49/98

HEX

FF3162

CMYK

0/88/62

/0

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.

image

HEX

0075A6

RGB

0/117

/166

image

HEX

108000

RGB

16/128

/0

image

HEX

6A4C72

RGB

106/76

/114

image

HEX

DE0043

RGB

222/0

/67

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).

Blue gradients

 

image

 

image

 

image

Green gradients

 

image

 

image

 

image

Purple gradients

 

image

 

image

 

image

  • 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. 

image
Combination of flat color and gradient (dark color top).

 

image
One gradient interruped by flat color panel in the middle.

 

image
Example of a gradient overlay at 100% opacity.
image
Combination of flat color and gradient (dark color bottom).

 

image
Two opposing gradients of the same color combination.

 

image
Example of a gradient overlay at 90% opacity.
image
Narrow strip of gradient on flat colored background.

 

image
Gradients can be combined with opposing flat colors.

 

image
Dark and light gradients from one hue family can be combined.

Treatments to avoid

Avoid using our gradients in these ways.

image
Avoid using more than two opposing directions.

 

image
Don’t combine different color hues with photography.
image
Don’t combine gradients of different color hues.

 

image
Colors must blend within the same hue category. Never as shown above.
image
Avoid creating narrow windows.

 

image
Never combine horizontal and vertical gradients.

How it looks in practice

Download Bayer Color Guide
Contact

If you have any further questions about this or any other section of Bayer Identity Net, please contact: