Colors

Foundations / Visual / Colors

Intro

Color brings your screens to life. It communicates importance and association, letting users quickly identify key elements. When you use the theme’s color palette, you help create a clean, lightweight design that stays consistent and coherent across all SAP Fiori applications. Thoughtful use of color enhances visual hierarchy, usability, and accessibility. Colors also reinforce consistency and help users recognize status or visual feedback.

Familiarize yourself with the concepts of color balance and color usage, especially the interplay between primary colors, accent colors, grayscale areas, and semantic colors. For more information, see the colors for each theme:

SAP Fiori offers a range of themes out of the box. Each theme meets accessibility standards of at least AA. For each theme, you’ll also find AAA-compliant high contrast options. For more information, see Theming.

The DNA Reference Palette

The DNA reference palette contains nine different hues, each with eleven shades. Pure white and black are also included, covering the entire spectrum.

The colors for each theme are offered through a token hierarchy. This system keeps theming smooth and consistent across the user interface. The DNA reference palette forms the first and base level of this hierarchy – every other color palette is built from it.

Reference colors come from SAP company brand colors. These colors may vary between themes, and you shouldn’t use them directly in the CSS of user interface components. They are technology-agnostic and independent of specific use cases.

UI Theme Reference Colors

The DNA color palette ensures coherence across SAP and throughout the customer journey. From this palette, we define a set of UI reference colors as the foundation for theming.