The right choice of colors is an important aspect that should be considered in watch apps. It communicates the meaning and relationship of content, providing users with guidance to help them complete their tasks.
Horizon color palette
Compared to mobile apps, colors in watch apps are generally brighter and less saturated. Additionally, watch apps are only available in dark mode to save battery life and accommodate different light conditions, like lower light or direct sunlight.
We recommend using the dedicated color palette to provide optimal readability and accessibility for users – which is even more important in critical situations due to the smaller screen size and rather short looks at glanceable content on watches.
The current color palette is derived from the main control parameters from the Horizon theme. The following table shows the main reference colors for SAP Fiori for watchOS apps.
|#000000||Primary Background||Watch background or label color for tint buttons||#F2F4FC; 14% Transparency||Secondary Background||Background color for cards or actions|
|#F2F4FC; 20% Transparency||Tertiary Background||Background color for secondary buttons next to a primary button|
|#222223||Quaternary Background||Background for opaque buttons or cards|
|#F5F6F7||Primary Label||Titles or primary text content|
|#D5DADD||Secondary Label||Subtitles, secondary text content or section header text|
|#A9B4BE||Tertiary Label||Footer text, status, tertiary text content or placeholder text|
|#8396A8||Quaternary Label||Symbols or icons|
|#4DB1FF||Tint Tap State||Tap state of tappable elements|
|#FF5C77||Negative Label||Negative or destructive actions or labels|
|#EE3939||Negative Label Tap State||Negative or destructive actions in tap state|
|#FFC933||Critical Label||Attention needed elements or labels|
|#FFB300||Critical Label Tap State||Attention needed elements in tap state|
|#BDE986||Positive Label||Positive priority elements or labels|
|#5DC122||Positive Label Tap State||Positive priority elements in tap state|
|#5B738B, 50% Transparency||Separator||Non-interactive element, decorative elements, separators, hairlines or divider lines|
|#8396A8||Separator (Opaque)||Higher contrast border or text field borders|
Accent colors are used to emphasize key parts of the UI or to highlight information. The following table shows the main accent colors for SAP Fiori for watchOS apps.