Color

Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. A watchOS app uses one global tint color and may use additional colors.

R 250 G 17 B 79
17% Opacity
R 255 G 59 B 48
17% Opacity
R 255 G 149 B 0
15% Opacity
R 255 G 230 B 32
14% Opacity
R 4 G 222 B 113
14% Opacity
R 0 G 245 B 234
15% Opacity
R 90 G 200 B 250
15% Opacity
R 32 G 148 B 250
17% Opacity
R 120 G 122 B 255
20% Opacity
R 242 G 244 B 255
14% Opacity

Use pure black for your app’s background color. Pure black — that is, #000000 — blends seamlessly with the Apple Watch bezel and creates the illusion of an edgeless screen.

Screenshot of the beginning view for an outdoor run, which shows a green circle on a black background and the word Ready within the circle.

Avoid using color as the only way to show interactivity. watchOS uses a rounded rectangle shape as the primary way to indicate interactivity for buttons and lists.

Screenshot of a button on a black background. The button has a rounded rectangle shape and the title Tappable.

Consider using your primary brand color as a global accent color. A global accent color gives your app a polished appearance and gives each screen consistency and familiarity. As you consider using additional colors, check that your color choices work well in different cultures and can be perceived by everyone. For guidance, see Color and Contrast.

Recognize that people might prefer graphic complications to use tinted mode instead of full color. In watchOS 6 and later, the system can use a single color that’s based on the wearer’s selected color to tint a graphic complication’s images, gauges, and text. For guidance, see Complications.