Color

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.

Color Management

System 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	API
  R 0 G 122 B 255	R 10 G 132 B 255	Blue	systemBlueColor
  R 162 G 132 B 94	R 172 G 142 B 104	Brown	systemBrownColor
  R 142 G 142 B 147	R 152 G 152 B 157	Gray	systemGrayColor
  R 40 G 205 B 65	R 50 G 215 B 75	Green	systemGreenColor
  R 255 G 149 B 0	R 255 G 159 B 10	Orange	systemOrangeColor
  R 255 G 45 B 85	R 255 G 55 B 95	Pink	systemPinkColor
  R 175 G 82 B 222	R 191 G 90 B 242	Purple	systemPurpleColor
  R 255 G 59 B 48	R 255 G 69 B 58	Red	systemRedColor
  R 255 G 204 B 0	R 255 G 214 B 10	Yellow	systemYellowColor

• Aqua	Dark	Name	API
  R 0 G 112 B 245	R 20 G 142 B 255	Blue	systemBlueColor
  R 152 G 122 B 84	R 182 G 152 B 114	Brown	systemBrownColor
  R 132 G 132 B 137	R 162 G 162 B 167	Gray	systemGrayColor
  R 30 G 195 B 55	R 60 G 225 B 85	Green	systemGreenColor
  R 245 G 139 B 0	R 255 G 169 B 20	Orange	systemOrangeColor
  R 245 G 35 B 75	R 255 G 65 B 105	Pink	systemPinkColor
  R 159 G 75 B 201	R 204 G 101 B 255	Purple	systemPurpleColor
  R 245 G 49 B 38	R 255 G 79 B 68	Red	systemRedColor
  R 245 G 194 B 0	R 255 G 224 B 20	Yellow	systemYellowColor

• Aqua	Dark	Name	API
  R 0 G 64 B 221	R 64 G 156 B 255	Blue	systemBlueColor
  R 127 G 101 B 69	R 181 G 148 B 105	Brown	systemBrownColor
  R 105 G 105 B 110	R 152 G 152 B 157	Gray	systemGrayColor
  R 0 G 125 B 27	R 40 G 205 B 65	Green	systemGreenColor
  R 201 G 52 B 0	R 255 G 149 B 0	Orange	systemOrangeColor
  R 211 G 15 B 69	R 255 G 100 B 130	Pink	systemPinkColor
  R 137 G 68 B 171	R 218 G 143 B 255	Purple	systemPurpleColor
  R 215 G 0 B 21	R 255 G 105 B 97	Red	systemRedColor
  R 160 G 90 B 0	R 255 G 204 B 0	Yellow	systemYellowColor

• Aqua	Dark	Name	API
  R 0 G 64 B 221	R 64 G 156 B 255	Blue	systemBlueColor
  R 119 G 93 B 59	R 181 G 148 B 105	Brown	systemBrownColor
  R 97 G 97 B 101	R 152 G 152 B 157	Gray	systemGrayColor
  R 0 G 112 B 24	R 40 G 205 B 65	Green	systemGreenColor
  R 173 G 58 B 0	R 255 G 149 B 0	Orange	systemOrangeColor
  R 193 G 16 B 50	R 255 G 58 B 95	Pink	systemPinkColor
  R 137 G 68 B 171	R 218 G 143 B 255	Purple	systemPurpleColor
  R 194 G 6 B 24	R 255 G 65 B 54	Red	systemRedColor
  R 146 G 81 B 0	R 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.