Color

The proper use of color provides visual continuity, supports your branding, and aids in communication. Every app has a global tint color that you can configure to reflect your primary brand color. You can add colors for branding and to convey information, but be sure to use light colors for text to ensure legibility and contrast.

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

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

Use black for your app’s background color. Black blends seamlessly with the Apple Watch bezel and creates the illusion of an edgeless screen.

Screenshot of activity rings. To simulate one type of colorblindness, a vertical bar animates across the screen, changing the onscreen colors from red, green, and blue to dark gray, yellow, and light gray.

Be aware of color blindness and of how different cultures perceive color. Everyone sees color differently. Make sure the colors you choose are effective and send the appropriate message.

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

Avoid using color as the only way to show interactivity. The rounded rectangle shape of buttons and lists is the primary means of indicating interactivity.

Avoid using colors that make it hard for people to perceive content in your app. For example, insufficient contrast can cause icons and text to blend with the background and make content hard to read. For guidance, see Color and Contrast.