Young Apple Developer Wwdc App Color Selection For Designers

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. Look to the system's color scheme for guidance when picking app accent colors that look great individually and in combination, and adapt well to accessibility and appearance modes.

Don't rely solely on color to differentiate between objects or communicate important information. If your app uses color to convey information, be sure to provide text labels or glyph shapes so users with colorblindness or other visual disabilities can understand it.

Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.

Consider choosing a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.

Consider choosing a color to indicate interactivity throughout your app. In Notes, interactive elements are yellow; in Calendar, interactive elements are red. If you define an accent color that denotes interactivity, make sure other colors in your app don't compete with it.

Provide two versions of your accent color to make sure it looks good in both light and dark modes. When you use a system color for your accent color, you get automatic support for both appearance modes.

Avoid using the same color for interactive and noninteractive elements. If interactive and noninteractive elements have the same color, it's hard for people to know where to tap.

Consider how artwork and translucency affect nearby colors. Variations in artwork sometimes warrant changes to nearby colors to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when in map mode but switches to a dark color scheme when in satellite mode. Colors can also appear different when placed behind or applied to a translucent element like a toolbar.

Test your app's color scheme under a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won't always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.

Consider how the True Tone display affects color. The True Tone display uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that focus primarily on reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style. For developer guidance, see UIWhitePointAdaptivityStyle.

Consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red communicates danger; in others, red has positive connotations. Make sure the colors in your app send the appropriate message.

Avoid using colors that can make it hard for people to perceive content in your app. For example, a colorblind user might not be able to distinguish some color combinations, and insufficient contrast can cause icons and text to blend with the background and make content hard to read for users with visual disabilities. For guidance, see Color and Contrast.

System Colors

iOS offers a range of system colors that automatically adapt to vibrancy and changes in accessibility settings like Increase Contrast and Reduce Transparency. The system colors look great individually and in combination, on both light and dark backgrounds, and in both light and dark appearances.

Don't hard-code system color values in your app. The color values provided below are intended for reference during your app design process. The actual color values may fluctuate from release to release, based on a variety of environmental variables. Always use the API to apply system colors; for developer guidance, see UIColor (UIKit) and Color (SwiftUI).

Light	Dark	Name	SwiftUI API
R 255 G 59 B 48	R 255 G 69 B 58	Red	systemRed
R 255 G 149 B 0	R 255 G 159 B 10	Orange	systemOrange
R 255 G 204 B 0	R 255 G 214 B 10	Yellow	systemYellow
R 52 G 199 B 89	R 48 G 209 B 88	Green	systemGreen
R 0 G 199 B 190	R 102 G 212 B 207	Mint	systemMint
R 48 G 176 B 199	R 64 G 200 B 224	Teal	systemTeal
R 50 G 173 B 230	R 100 G 210 B 255	Cyan	systemCyan
R 0 G 122 B 255	R 10 G 132 B 255	Blue	systemBlue
R 88 G 86 B 214	R 94 G 92 B 230	Indigo	systemIndigo
R 175 G 82 B 222	R 191 G 90 B 242	Purple	systemPurple
R 255 G 45 B 85	R 255 G 55 B 95	Pink	systemPink
R 162 G 132 B 94	R 172 G 142 B 104	Brown	systemBrown

Light	Dark	Name	SwiftUI API
R 215 G 0 B 21	R 255 G 105 B 97	Red	systemRed
R 201 G 52 B 0	R 255 G 179 B 64	Orange	systemOrange
R 178 G 80 B 0	R 255 G 212 B 38	Yellow	systemYellow
R 36 G 138 B 61	R 48 G 219 B 91	Green	systemGreen
R 12 G 129 B 123	R 102 G 212 B 207	Mint	systemMint
R 0 G 130 B 153	R 93 G 230 B 255	Teal	systemTeal
R 0 G 113 B 164	R 112 G 215 B 255	Cyan	systemCyan
R 0 G 64 B 221	R 64 G 156 B 255	Blue	systemBlue
R 54 G 52 B 163	R 125 G 122 B 255	Indigo	systemIndigo
R 137 G 68 B 171	R 218 G 143 B 255	Purple	systemPurple
R 211 G 15 B 69	R 255 G 100 B 130	Pink	systemPink
R 127 G 101 B 69	R 181 G 148 B 105	Brown	systemBrown

iOS 13 also introduces a range of six opaque gray colors you can use in rare cases where translucency doesn't work well. For example, intersecting or overlapping elements — such as lines or bars in a grid — look better with opacity. In general, use the semantically defined system colors for UI elements.

Light	Dark	Name	UIKit API
R 142 G 142 B 147	R 142 G 142 B 147	Gray	systemGray
R 174 G 174 B 178	R 99 G 99 B 102	Gray (2)	systemGray2
R 199 G 199 B 204	R 72 G 72 B 74	Gray (3)	systemGray3
R 209 G 209 B 214	R 58 G 58 B 60	Gray (4)	systemGray4
R 229 G 229 B 234	R 44 G 44 B 46	Gray (5)	systemGray5
R 242 G 242 B 247	R 28 G 28 B 30	Gray (6)	systemGray6

Light	Dark	Name	UIKit API
R 108 G 108 B 112	R 174 G 174 B 178	Gray	systemGray
R 142 G 142 B 147	R 124 G 124 B 128	Gray (2)	systemGray2
R 174 G 174 B 178	R 84 G 84 B 86	Gray (3)	systemGray3
R 188 G 188 B 192	R 68 G 68 B 70	Gray (4)	systemGray4
R 216 G 216 B 220	R 54 G 54 B 56	Gray (5)	systemGray5
R 235 G 235 B 240	R 36 G 36 B 38	Gray (6)	systemGray6

Dynamic System Colors

In addition to tint colors, iOS also provides semantically defined system colors that automatically adapt to both light and dark modes. A semantic color conveys its purpose rather than its appearance or color values. For example, iOS defines colors for use in background areas and for foreground content, such as labels, separators, and fill.

iOS defines two sets of background colors — system and grouped — each of which contains primary, secondary, and tertiary variants that help you convey a hierarchy of information. In general, use the grouped set of background colors when you have a grouped table view; otherwise, use the system set of background colors. For developer guidance, see UI Element Colors.

With both sets of background colors, you generally use the variants to indicate hierarchy in the following ways:

Primary for the overall view
Secondary for grouping content or elements within the overall view
Tertiary for grouping content or elements within secondary elements

For foreground content, iOS defines the following colors:

Color	Used for	UIKit API
Label	A text label that contains primary content.	label
Secondary label	A text label that contains secondary content.	secondaryLabel
Tertiary label	A text label that contains tertiary content.	tertiaryLabel
Quaternary label	A text label that contains quaternary content.	quaternaryLabel
Placeholder text	Placeholder text in controls or text views.	placeholderText
Separator	A separator that allows some underlying content to be visible.	separator
Opaque separator	A separator that doesn't allow any underlying content to be visible.	opaqueSeparator
Link	Text that functions as a link.	link

Don't redefine the semantic meanings of dynamic system colors. To give people a consistent experience and ensure that your interface looks great in all contexts, use dynamic system colors as intended.

Don't try to replicate dynamic system colors. Dynamic system colors may fluctuate from release to release, based on a variety of environmental variables. Instead of trying to create custom colors that match the system colors, use the dynamic system colors.

Color Management

Apply color profiles to your images. The default color space on iOS is Standard RGB (sRGB). To ensure that colors are correctly matched to this color space, make sure your images include embedded color profiles.

Use wide color to enhance the visual experience on compatible displays. Wide color displays support a P3 color space, which can produce richer, more saturated colors than sRGB. As a result, photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in PNG format. Note that a wide color display is needed to design wide color images and select P3 colors.

Diagram showing the colors included in the sRGB space, compared to the larger number of colors included in the P3 color space.

Provide color space-specific image and color variations when the experience calls for it. In general, P3 colors and images tend to appear as expected on sRGB devices. Occasionally, however, it may be hard to differentiate between two very similar P3 colors when they're viewed in sRGB. Gradients that use colors in the P3 spectrum can also sometimes appear clipped on sRGB devices. To avoid these issues, you can provide distinct images and colors in the asset catalog of your Xcode project to ensure visual fidelity on both wide color and sRGB devices.

Preview your app's colors on actual sRGB and wide color displays. Make adjustments as needed to ensure an equally great visual experience on both types of displays.

TIP On a Mac with a wide color display, you can use the system color picker to select and preview P3 colors, and compare them with sRGB colors.