Color is a great way to provide status information, give feedback in response to user actions, and help people visualize data.
Use color judiciously for communication. In general, color should be used sparingly, like when you need to call attention to important information. For example, a red triangle that warns people of a critical problem becomes less effective when you use red elsewhere in an app for noncritical reasons.
Be aware of colorblindness. Many colorblind people 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, Messages uses a red square and a green circle when the "Differentiate without color" option is enabled in Accessibility preferences. Some image-editing software includes tools that can help you proof for colorblindness.
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 correct 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.
Consider how nearby artwork and translucency affect colors. Color can lose its impact when composited over a non-neutral or translucent background, or when used adjacent to a very bright, colorful image.
Provide color space-specific image and color variations when the experience calls for it. In general, P3 colors and images tend to appear normally on sRGB displays. Occasionally, however, it may be hard to differentiate between two very similar P3 colors when viewed on an sRGB display. Gradients that use colors in the P3 spectrum can also sometimes appear clipped on sRGB displays. 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 displays.
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 standard color panel to select and preview P3 colors and compare them with sRGB colors.
macOS offers a range of standard system colors that automatically adapt to vibrancy (see Translucency and Vibrancy) and changes in accessibility settings like Increase contrast and Reduce transparency. Use these colors when choosing app tint colors that look great individually and in combination, on both light and dark backgrounds.
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 will fluctuate from release to release, based on a variety of environmental variables. Always use the API to apply system colors.
For developer guidance, see NSColor.
Aqua Dark Name APIR 0 G 122 B 255R 10 G 132 B 255 Blue systemBlueColorR 162 G 132 B 94R 172 G 142 B 104 Brown systemBrownColorR 142 G 142 B 147R 152 G 152 B 157 Gray systemGrayColorR 40 G 205 B 65R 50 G 215 B 75 Green systemGreenColorR 255 G 149 B 0R 255 G 159 B 10 Orange systemOrangeColorR 255 G 45 B 85R 255 G 55 B 95 Pink systemPinkColorR 175 G 82 B 222R 191 G 90 B 242 Purple systemPurpleColorR 255 G 59 B 48R 255 G 69 B 58 Red systemRedColorR 255 G 204 B 0R 255 G 214 B 10 Yellow systemYellowColor
Aqua Dark Name APIR 0 G 112 B 245R 20 G 142 B 255 Blue systemBlueColorR 152 G 122 B 84R 182 G 152 B 114 Brown systemBrownColorR 132 G 132 B 137R 162 G 162 B 167 Gray systemGrayColorR 30 G 195 B 55R 60 G 225 B 85 Green systemGreenColorR 245 G 139 B 0R 255 G 169 B 20 Orange systemOrangeColorR 245 G 35 B 75R 255 G 65 B 105 Pink systemPinkColorR 159 G 75 B 201R 204 G 101 B 255 Purple systemPurpleColorR 245 G 49 B 38R 255 G 79 B 68 Red systemRedColorR 245 G 194 B 0R 255 G 224 B 20 Yellow systemYellowColor
Aqua Dark Name APIR 0 G 64 B 221R 64 G 156 B 255 Blue systemBlueColorR 127 G 101 B 69R 181 G 148 B 105 Brown systemBrownColorR 105 G 105 B 110R 152 G 152 B 157 Gray systemGrayColorR 0 G 125 B 27R 40 G 205 B 65 Green systemGreenColorR 201 G 52 B 0R 255 G 149 B 0 Orange systemOrangeColorR 211 G 15 B 69R 255 G 100 B 130 Pink systemPinkColorR 137 G 68 B 171R 218 G 143 B 255 Purple systemPurpleColorR 215 G 0 B 21R 255 G 105 B 97 Red systemRedColorR 160 G 90 B 0R 255 G 204 B 0 Yellow systemYellowColor
Aqua Dark Name APIR 0 G 64 B 221R 64 G 156 B 255 Blue systemBlueColorR 119 G 93 B 59R 181 G 148 B 105 Brown systemBrownColorR 97 G 97 B 101R 152 G 152 B 157 Gray systemGrayColorR 0 G 112 B 24R 40 G 205 B 65 Green systemGreenColorR 173 G 58 B 0R 255 G 149 B 0 Orange systemOrangeColorR 193 G 16 B 50R 255 G 58 B 95 Pink systemPinkColorR 137 G 68 B 171R 218 G 143 B 255 Purple systemPurpleColorR 194 G 6 B 24R 255 G 65 B 54 Red systemRedColorR 146 G 81 B 0R 255 G 204 B 0 Yellow systemYellowColor
Dynamic System Colors
macOS defines a range of system colors that dynamically match the color scheme of standard interface controls like buttons and labels. These dynamic system colors are listed in the Developer palette of the standard color panel.