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 tint colors that look great individually and in combination, on both light and dark backgrounds.

R 255 G 59 B 48
R 255 G 149 B 0
R 255 G 204 B 0
R 76 G 217 B 100
R 90 G 200 B 250
Teal Blue
R 0 G 122 B 255
R 88 G 86 B 214
R 255 G 45 B 85

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 people of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.

Use complementary colors throughout your app. The colors in your app should work well together, not conflict or distract. If pastels are essential to your app’s style, for example, use a coordinating set of pastels.

In general, choose 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 key color to indicate interactivity throughout your app. In Notes, interactive elements are yellow. In Calendar, interactive elements are red. If you define a key color that denotes interactivity, make sure other colors don’t compete with it.

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.

Enabled and disabled elements

Consider how artwork and translucency affect nearby colors. Variations in artwork sometimes warrant changes to nearby colors in order to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when using map mode but switches to a dark color scheme when satellite mode is activated. Colors can also appear different when placed behind a translucent element, or when applied to a translucent element, such as 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 Information Property List Key Reference.

Be aware of colorblindness. Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, you could use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness.

As seen without color blindness.

As seen with red-green color blindness.

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.

Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

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.

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 appear on an sRGB devices. 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 Macs with wide color displays, you can use the system color picker to select and preview P3 colors, and to compare them with sRGB colors.