Colors

Intro

The right choice of colors is an important aspect that should be considered in smartwatch apps. It communicates the meaning and relationship of content, providing users with guidance to help them complete their tasks.

Horizon Reference Colors

The color palette for SAP Fiori for Wear OS is based on the color parameters from the Horizon visual theme. The colors displayed below are the main reference colors.

Horizon color palette

Horizon color palette

UI Colors

Compared to mobile apps, colors in smartwatch apps are generally brighter and less saturated. Additionally, smartwatch apps are only available in dark mode to save battery life and accommodate different light conditions, such as low 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 smartwatches.

From the Horizon color palette, we have added a semantic name layer to help you decide which colors to use. UI colors are grouped according to their usage into the following categories:

Surface Colors

Surface colors are applied to the background of components, such as chips, buttons, and cards. To provide a sense of hierarchy, surface colors are identified by the first letter S followed by a number sequence (e.g., S0, S1, S2).

Dark Mode
Name
Usage
#000000
Base Dark
S0-Background
Main App Background
#202124
Base Dark 2
S1-Primary
Surfaces
#89D1FF
Blue 4
S2-Secondary
Interactive Background

Text Colors

Text colors are applied to the text and icons of all components. Text colors are identified by the first letter T followed by a number sequence (e.g., T1, T2, T3).

Dark Mode
Name
Usage
#F5F6F7
Grey 1
T1-Primary
Titles, Subtitles
#D5DADD
Grey 3
T2-Secondary
Body Text, Caption
#12171C
Grey 11
T3-Main on Secondary
Body Text, Caption
#89D1FF
Blue 4
T4-CTA on Primary
Interactive Elements

Border Colors

Border colors are applied to linear elements, such as divider lines. Border colors are identified by the first letter B followed by a number sequence (e.g., B1, B2, B3).

Dark Mode
Name
Usage
#5B738B
Grey 6
, 50%
B1-Section Divider
Divider Lines
#8396A8
Grey 5
B2-Default Border
Text Field Borders

Semantic Colors

Semantic colors are applied to any UI element that conveys an important status, state, or level of priority. Semantic colors can be identified by the following naming (e.g., negative, critical, and positive status).

Dark Mode
Name
Usage
#FF5C77
Red 5
Negative Label
Negative meaning, Error
#FFC933
Mango 4
B2-Critical Label
Alert, Warning
#BDE986
Green 3
Positive Label
Positive Meaning, Success

Accent Colors

Accent colors provide an additional level of color luminance and are used to accent areas of the UI, such as avatars, icons, and data visualizations. Accent colors are identified by the word “Accent” followed by a number sequence (e.g., Accent 1, Accent 2, Accent 3).

Dark Mode
Name
Usage
#FFC933
Mango 4
Accent 1
Categorical avatars or Icons
#FF5C77
Red 5
Accent 2
Categorical avatars or Icons
#B894FF
Indigo 4
Accent 3
Categorical avatars or Icons
#4DB1FF
Blue 5
Accent 4
Categorical avatars or Icons
#64EDD2
Teal 3
Accent 5
Categorical avatars or Icons
#BDE986
Green 3
Accent 6
Categorical avatars or Icons
#FF8AF0
Pink 4
Accent 7
Categorical avatars or Icons
#FEADC8
Raspberry 4
Accent 8
Categorical avatars or Icons
#A9B4BE
Grey 4
Accent 9
Categorical avatars or Icons

Resources

SAP Fiori for watchOS: Colors

Material Design: Wear OS Colors