Updated: March 27, 2024

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

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
Text colors
Borders colors
Semantic colors
Accent colors

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
	Base Dark #000000	S0-Background	Main App Background
	Base Dark 2 #202124	S1-Primary	Surfaces
	Blue 4 #89D1FF	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
	Grey 1 #F5F6F7	T1-Primary	Titles, Subtitles
	Grey 3 #D5DADD	T2-Secondary	Body Text, Caption
	Grey 11 #12171C	T3-Main on Secondary	Body Text, Caption
	Blue 4 #89D1FF	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
	Grey 6 #5B738B, 50%	B1-Section Divider	Divider Lines
	Grey 5 #8396A8	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
	Red 5 #FF5C77	Negative Label	Negative meaning, Error
	Mango 4 #FFC933	B2-Critical Label	Alert, Warning
	Green 3 #BDE986	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
	Mango 4 #FFC933	Accent 1	Categorical avatars or Icons
	Red 5 #FF5C77	Accent 2	Categorical avatars or Icons
	Indigo 4 #B894FF	Accent 3	Categorical avatars or Icons
	Blue 5 #4DB1FF	Accent 4	Categorical avatars or Icons
	Teal 3 #64EDD2	Accent 5	Categorical avatars or Icons
	Green 3 #BDE986	Accent 6	Categorical avatars or Icons
	Pink 4 #FF8AF0	Accent 7	Categorical avatars or Icons
	Raspberry 4 #FEADC8	Accent 8	Categorical avatars or Icons
	Grey 4 #A9B4BE	Accent 9	Categorical avatars or Icons

Resources

SAP Fiori for watchOS: Colors

Material Design: Wear OS Colors