How to use color

Our specific color palette is characteristic of the Bayer look. The use of the colors helps to create a consistent and recognizable brand around the world. There are no specific color assignments for divisions or departments. The extensive use of the color palette is encouraged. In the combination with text and the Bayer cross take care that accessibility and readability is fulfilled at its best.

Our color palette and values

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.

Gradients

Gradients offer a dynamic and effective method for infusing designs with vibrant accents. By seamlessly blending multiple colors or shades, gradients add depth, dimension, and visual interest to various design elements. Whether used subtly or boldly, gradients can enhance the overall aesthetics of a design, making it more engaging and visually appealing to the audience.

Dynamic gradients

The Bayer dynamic gradients are designed to evoke a dynamic and vibrant aesthetic, incorporating various depths and luminosity to create a distinctive and optimistic appearance. To ensure correct utilization of gradients, specific guidelines have been outlined below to assist in creating your own gradients and effectively integrating them with text.

Choosing the right colors for the gradient

Keep the design clean and uncluttered to avoid overwhelming sensory experiences. Use simple shapes, colors, and fonts to enhance readability and comprehension. 
Streamline your design by limiting the gradient to a maximum of three colors. Tailor the gradient selection to match the content and messaging of your application. Select tonal gradients using adjacent colors like green and blue for subtle brand expression. For a more personal and expressive touch, incorporate the raspberry color. Refer to the guide below for optimal color selection to enhance the effectiveness of your gradients. You can download these gradients in various sizes in the side bar.

Step by step: How to create your own gradient 

To create your own gradient, use Adobe Illustrator and the mesh tool. Ensure that the most accessible colors sit in the center to maximize contrast with the white typeface. When incorporating gradients, it's crucial to prioritize accessibility and legibility. Start by pinpointing the content area where the text will be situated. Refer to the diagram below for the correct application. 

Tonal gradients

Gradients are an effective way to add vibrant accents. When using tonal gradients, it is recommended to keep the tone the same. For good color transitions, mix a dark color with a medium color, a medium color with a core color. For accessibility and legibility reasons it is not recommended to use the bright hues of the colors.