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. 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.

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, 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 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.

Consider how nearby artwork and translucency affect colors. Color can lose it’s impact when composited over a non-neutral or translucent background, or when used adjacent to a very bright, colorful image.

Test your app’s color scheme under a variety of lighting conditions. Lighting varies significantly based on room ambiance, time of day, and more. Colors you see on your computer at design time won’t always look the same when your app is used in environments with bright ambient light conditions. Always preview your app under multiple lighting conditions, including outdoors with a laptop on a sunny day, to see how colors appear. Adjust colors to provide the best possible viewing experience in the majority of use cases.

Use the standard color panel for user color changes. If your app lets people change colors, use the standard color panel to obtain the user’s color selection rather than designing a custom color-picker. The standard color panel provides a number of color selection modes, can be expanded with custom color selection modes, and allows the user to save swatches of frequently used colors. For developer guidance, see NSColorPanel. On Macs equipped with a Touch Bar, you can also let people change colors using the standard color picker.

For developer guidance on color, see Color Programming Topics.

Color Management

Apply color profiles to your images. Color profiles help ensure that your app's colors appear as expected on different displays. The Standard RGB (sRGB) color space produces accurate colors on most displays.

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 displays. Occasionally, however, it may be hard to differentiate between two very similar P3 colors when they appear 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 Macs with wide color displays, you can use the standard color panel to select and preview P3 colors and compare them with sRGB colors.

System Colors

macOS offers a range of standard system colors that automatically adapt to vibrancy (see Translucency) 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 and based on a variety of environmental variables. Always use the API to apply system colors.

For developer guidance, see NSColor.

Color Name API
R 27 G 173 B 248
Blue systemBlueColor
R 162 G 132 B 94
Brown systemBrownColor
R 142 G 142 B 145
Gray systemGrayColor
R 99 G 218 B 56
Green systemGreenColor
R 255 G 149 B 0
Orange systemOrangeColor
R 255 G 41 B 104
Pink systemPinkColor
R 204 G 115 B 225
Purple systemPurpleColor
R 255 G 59 B 48
Red systemRedColor
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.

Don’t redefine the semantic meanings of dynamic system colors. To ensure a consistent experience and ensure your interface looks great when the appearance of macOS changes in the future, use dynamic system colors as intended.

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

Tip Dynamic system colors are listed in the Developer palette of the standard color panel.

 

Color Used for API
Alternate selected control color The surface of a selected control in a list or table. alternateSelectedControlColor
Alternate selected control text color The text of a selected control in a list or table. alternateSelectedControlTextColor
Control alternating row background colors The backgrounds of alternating rows in a list or table—(two or more system colors). controlAlternatingRowBackgroundColors
Control background color The background of a large interface element, such as a browser or table. controlBackgroundColor
Control color The surface of a control. controlColor
Control dark shadow color The outer, darker portion of a control’s shadow. controlDarkShadowColor
Control highlight color The inner, duller color of a control’s highlight. controlHighlightColor
Control light highlight color The outer, brighter color of a control’s highlight. controlLightHighlightColor
Control shadow color The inner, lighter portion of a control’s shadow. controlShadowColor
Control text color The text of a control that isn’t disabled. controlTextColor
Disabled control text color The text of a control that’s disabled. disabledControlTextColor
Grid color The gridlines of an interface element such as a table. gridColor
Header color The background of a header cell in a table. headerColor
Header text color The text of a header cell in a table. headerTextColor
Highlight color The virtual light source onscreen. highlightColor
Keyboard focus indicator color The ring that appears around the currently focused control when using the keyboard for interface navigation. keyboardFocusIndicatorColor
Knob color The surface of a stationary, unselected slider knob. knobColor
Label color The text of a label. labelColor
Quaternary label color The text of a label of lesser importance than a tertiary label such as watermark text. quaternaryLabelColor
Scroll bar color A scroll bar. scrollBarColor
Scrubber textured background color The background of a scrubber in the Touch Bar. For related information, see the Touch Bar > Visual Design > Color. scrubberTexturedBackgroundColor
Secondary label color The text of a label of lesser importance than a normal label such as a label used to represent a subheading or additional information. secondaryLabelColor
Secondary selected control color The surface of a selected control that is not currently in focus. secondarySelectedControlColor
Selected control color The surface of a selected control. selectedControlColor
Selected control text color The text of a selected control. selectedControlTextColor
Selected knob color The surface of a selected slider knob in the process of being dragged. selectedKnobColor
Selected menu item color The surface of a selected menu. selectedMenuItemColor
Selected menu item text color The text of a selected menu. selectedMenuItemTextColor
Selected text background color The background of selected text. selectedTextBackgroundColor
Selected text color Selected text. selectedTextColor
Shadow color The virtual shadow cast by a raised object onscreen. shadowColor
Tertiary label color The text of a label of lesser importance than a secondary label such as a label used to represent disabled text. tertiaryLabelColor
Text background color Text background. textBackgroundColor
text color Text. textColor
Under page background color A background that resides behind a view. underPageBackgroundColor
Window background color The background of a window. windowBackgroundColor
Window frame color A window frame. windowFrameColor
Window frame text color The text of a window frame, not including any text in the frame. windowFrameTextColor