apple-hig-color.raw.json

{"primaryContentSections":[{"kind":"content","content":[{"inlineContent":[{"type":"image","identifier":"foundations-color-intro.png"}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"type":"text","text":"The system defines colors that look good on various backgrounds and appearance modes, and can automatically adapt to vibrancy and accessibility settings. Using system colors is a convenient way to make your experience feel at home on the device."}]},{"type":"paragraph","inlineContent":[{"text":"You may also want to use custom colors to enhance the visual experience of your app or game and express its unique personality. The following guidelines can help you use color in ways that people appreciate, regardless of whether you use system-defined or custom colors.","type":"text"}]},{"anchor":"Best-practices","type":"heading","text":"Best practices","level":2},{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Avoid using the same color to mean different things."}]},{"text":" Use color consistently throughout your interface, especially when you use it to help communicate information like status or interactivity. For example, if you use your brand color to indicate that a borderless button is interactive, using the same or similar color to stylize noninteractive text is confusing.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"type":"text","text":"Make sure all your app’s colors work well in light, dark, and increased contrast contexts."}],"type":"strong"},{"type":"text","text":" iOS, iPadOS, macOS, and tvOS offer both light and "},{"identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/dark-mode","overridingTitleInlineContent":[{"text":"dark","type":"text"}],"overridingTitle":"dark","type":"reference","isActive":true},{"text":" appearance settings. ","type":"text"},{"type":"reference","isActive":true,"overridingTitle":"System colors","overridingTitleInlineContent":[{"type":"text","text":"System colors"}],"identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/color#System-colors"},{"text":" vary subtly depending on the system appearance, adjusting to ensure proper color differentiation and contrast for text, symbols, and other elements. With the Increase Contrast setting turned on, the color differences become far more apparent. When possible, use system colors, which already define variants for all these contexts. If you define a custom color, make sure to supply light and dark variants, and an increased contrast option for each variant that provides a significantly higher amount of visual differentiation. Even if your app ships in a single appearance mode, provide both light and dark colors to support Liquid Glass adaptivity in these contexts.","type":"text"}],"type":"paragraph"},{"type":"row","numberOfColumns":2,"columns":[{"content":[{"type":"paragraph","inlineContent":[{"identifier":"color-context-light-mode","type":"image","metadata":{"abstract":[{"text":"Default (light)","type":"text"}],"deviceFrame":"iPhone16-top-half"}}]}],"size":1},{"content":[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"color-context-light-mode-high-contrast","metadata":{"deviceFrame":"iPhone16-top-half","abstract":[{"type":"text","text":"Increased contrast (light)"}]}}]}],"size":1},{"size":1,"content":[{"type":"paragraph","inlineContent":[{"identifier":"color-context-dark-mode","metadata":{"abstract":[{"type":"text","text":"Default (dark)"}],"deviceFrame":"iPhone16-top-half"},"type":"image"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"metadata":{"abstract":[{"type":"text","text":"Increased contrast (dark)"}],"deviceFrame":"iPhone16-top-half"},"identifier":"color-context-dark-mode-high-contrast","type":"image"}]}],"size":1}]},{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Test your app’s color scheme under a variety of lighting conditions."}]},{"type":"text","text":" Colors can look different when you view your app outside on a sunny day or in dim light. In bright surroundings, colors look darker and more muted. In dark environments, colors appear bright and saturated. In visionOS, colors can look different depending on the colors of a wall or object in a person’s physical surroundings and how it reflects light. Adjust app colors to provide an optimal viewing experience in the majority of use cases."}],"type":"paragraph"},{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Test your app on different devices."}]},{"text":" For example, the True Tone display — available on certain iPhone, iPad, and Mac models — 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 primarily support reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style (for developer guidance, see ","type":"text"},{"type":"reference","identifier":"doc://com.apple.documentation/documentation/BundleResources/Information-Property-List/UIWhitePointAdaptivityStyle","isActive":true},{"type":"text","text":"). Test tvOS apps on multiple brands of HD and 4K TVs, and with different display settings. You can also test the appearance of your app using different color profiles on a Mac — such as P3 and Standard RGB (sRGB) — by choosing a profile in System Settings > Displays. For guidance, see "},{"type":"reference","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/color#Color-management","isActive":true},{"text":".","type":"text"}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Consider how artwork and translucency affect nearby colors."}],"type":"strong"},{"text":" 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.","type":"text"}]},{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"If your app lets people choose colors, prefer system-provided color controls where available.","type":"text"}]},{"type":"text","text":" Using built-in color pickers provides a consistent user experience, in addition to letting people save a set of colors they can access from any app. For developer guidance, see "},{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/ColorPicker","type":"reference","isActive":true},{"type":"text","text":"."}]},{"level":2,"text":"Inclusive color","anchor":"Inclusive-color","type":"heading"},{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Avoid relying solely on color to differentiate between objects, indicate interactivity, or communicate essential information."}]},{"type":"text","text":" When you use color to convey information, be sure to provide the same information in alternative ways so people with color blindness or other visual disabilities can understand it. For example, you can use text labels or glyph shapes to identify objects or states."}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Avoid using colors that make it hard to perceive content in your app."}]},{"type":"text","text":" For example, insufficient contrast can cause icons and text to blend with the background and make content hard to read, and people who are color blind might not be able to distinguish some color combinations. For guidance, see "},{"type":"reference","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/accessibility","isActive":true},{"type":"text","text":"."}]},{"inlineContent":[{"inlineContent":[{"text":"Consider how the colors you use might be perceived in other countries and cultures.","type":"text"}],"type":"strong"},{"type":"text","text":" For example, red communicates danger in some cultures, but has positive connotations in other cultures. Make sure the colors in your app send the message you intend."}],"type":"paragraph"},{"numberOfColumns":2,"type":"row","columns":[{"content":[{"inlineContent":[{"metadata":{"abstract":[{"type":"text","text":"Green indicates a positive trend in the Stocks app in English."}]},"identifier":"color-inclusive-color-charts-english","type":"image"}],"type":"paragraph"}],"size":1},{"size":1,"content":[{"type":"paragraph","inlineContent":[{"identifier":"color-inclusive-color-charts-chinese","metadata":{"abstract":[{"text":"Red indicates a positive trend in the Stocks app in Chinese.","type":"text"}]},"type":"image"}]}]}]},{"level":2,"type":"heading","text":"System colors","anchor":"System-colors"},{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Avoid hard-coding system color values in your app.","type":"text"}],"type":"strong"},{"text":" Documented color values are for your reference during the app design process. The actual color values may fluctuate from release to release, based on a variety of environmental variables. Use APIs like ","type":"text"},{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color","type":"reference","isActive":true},{"type":"text","text":" to apply system colors."}]},{"inlineContent":[{"text":"iOS, iPadOS, macOS, and visionOS also define sets of ","type":"text"},{"type":"emphasis","inlineContent":[{"type":"text","text":"dynamic system colors"}]},{"text":" that match the color schemes of standard UI components and automatically adapt to both light and dark contexts. Each dynamic color is semantically defined by its purpose, rather than its appearance or color values. For example, some colors represent view backgrounds at different levels of hierarchy and other colors represent foreground content, such as labels, links, and separators.","type":"text"}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Avoid redefining the semantic meanings of dynamic system colors."}],"type":"strong"},{"text":" To ensure a consistent experience and ensure your interface looks great when the appearance of the platform changes, use dynamic system colors as intended. For example, don’t use the ","type":"text"},{"type":"reference","isActive":true,"identifier":"https://developer.apple.com/documentation/uikit/uicolor/separator"},{"type":"text","text":" color as a text color, or "},{"identifier":"https://developer.apple.com/documentation/uikit/uicolor/secondarylabel","type":"reference","isActive":true},{"type":"text","text":" color as a background color."}]},{"text":"Liquid Glass color","level":2,"anchor":"Liquid-Glass-color","type":"heading"},{"inlineContent":[{"type":"text","text":"By default, "},{"overridingTitleInlineContent":[{"type":"text","text":"Liquid Glass"}],"overridingTitle":"Liquid Glass","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/materials#Liquid-Glass","type":"reference","isActive":true},{"type":"text","text":" has no inherent color, and instead takes on colors from the content directly behind it. You can apply color to some Liquid Glass elements, giving them the appearance of colored or stained glass. This is useful for drawing emphasis to a specific control, like a primary call to action, and is the approach the system uses for prominent button styling. Symbols or text labels on Liquid Glass controls can also have color."}],"type":"paragraph"},{"columns":[{"content":[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"color-liquid-glass-overview-tinted","metadata":{"abstract":[{"text":"Controls can use color in the Liquid Glass background, like in a primary action button.","type":"text"}]}}]}],"size":1},{"size":1,"content":[{"type":"paragraph","inlineContent":[{"type":"image","metadata":{"abstract":[{"type":"text","text":"Symbols and text that appear on Liquid Glass can have color, like in a selected tab bar item."}]},"identifier":"color-liquid-glass-overview-color-over-tab-bar"}]}]},{"size":1,"content":[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"color-liquid-glass-overview-clear","metadata":{"abstract":[{"text":"By default, Liquid Glass picks up the color from the content layer behind it.","type":"text"}]}}]}]}],"numberOfColumns":3,"type":"row"},{"type":"paragraph","inlineContent":[{"text":"For smaller elements like toolbars and tab bars, the system can adapt Liquid Glass between a light and dark appearance in response to the underlying content. By default, symbols and text on these elements follow a monochromatic color scheme, becoming darker when the underlying content is light, and lighter when it’s dark. Liquid Glass appears more opaque in larger elements like sidebars to preserve legibility over complex backgrounds and accommodate richer content on the material’s surface.","type":"text"}]},{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"Apply color sparingly to the Liquid Glass material, and to symbols or text on the material."}],"type":"strong"},{"type":"text","text":" If you apply color, reserve it for elements that truly benefit from emphasis, such as status indicators or primary actions. To emphasize primary actions, apply color to the background rather than to symbols or text. For example, the system applies the app accent color to the background in prominent buttons — such as the Done button — to draw attention and elevate their visual prominence. Refrain from adding color to the background of multiple controls."}]},{"columns":[{"content":[{"inlineContent":[{"identifier":"colors-liquid-glass-usage-incorrect","metadata":{"deviceFrame":"iPhone16-top-half"},"type":"image"}],"type":"paragraph"},{"inlineContent":[{"type":"image","identifier":"crossout.png"}],"type":"paragraph"}],"size":1},{"size":1,"content":[{"inlineContent":[{"type":"image","identifier":"colors-liquid-glass-usage-correct","metadata":{"deviceFrame":"iPhone16-top-half"}}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"identifier":"checkmark.png","type":"image"}]}]}],"numberOfColumns":2,"type":"row"},{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Avoid using similar colors in control labels if your app has a colorful background.","type":"text"}],"type":"strong"},{"type":"text","text":" While color can make apps more visually appealing, playful, or reflective of your brand, too much color can be overwhelming and make control labels more difficult to read. If your app features colorful backgrounds or visually rich content, prefer a monochromatic appearance for toolbars and tab bars, or choose an accent color with sufficient visual differentiation. By contrast, in apps with primarily monochromatic content or backgrounds, choosing your brand color as the app accent color can be an effective way to tailor your app experience and reflect your company’s identity."}]},{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Be aware of the placement of color in the content layer.","type":"text"}]},{"type":"text","text":" Make sure your interface maintains sufficient contrast by avoiding overlap of similar colors in the content layer and controls when possible. Although colorful content might intermittently scroll underneath controls, make sure its default or resting state — like the top of a screen of scrollable content — maintains clear legibility."}],"type":"paragraph"},{"type":"heading","anchor":"Color-management","level":2,"text":"Color management"},{"type":"paragraph","inlineContent":[{"type":"text","text":"A "},{"inlineContent":[{"text":"color space","type":"text"}],"type":"emphasis"},{"text":" represents the colors in a ","type":"text"},{"inlineContent":[{"text":"color model","type":"text"}],"type":"emphasis"},{"type":"text","text":" like RGB or CMYK. Common color spaces — sometimes called "},{"inlineContent":[{"text":"gamuts","type":"text"}],"type":"emphasis"},{"type":"text","text":" — are sRGB and Display P3."}]},{"type":"paragraph","inlineContent":[{"type":"image","identifier":"color-graphic-wide-color.png"}]},{"type":"paragraph","inlineContent":[{"type":"text","text":"A "},{"inlineContent":[{"text":"color profile","type":"text"}],"type":"emphasis"},{"type":"text","text":" describes the colors in a color space using, for example, mathematical formulas or tables of data that map colors to numerical representations. An image embeds its color profile so that a device can interpret the image’s colors correctly and reproduce them on a display."}]},{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Apply color profiles to your images.","type":"text"}]},{"text":" Color profiles help ensure that your app’s colors appear as intended on different displays. The sRGB color space produces accurate colors on most displays.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Use wide color to enhance the visual experience on compatible displays.","type":"text"}],"type":"strong"},{"text":" 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 can be more meaningful. When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in PNG format. Note that you need to use a wide color display to design wide color images and select P3 colors.","type":"text"}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Provide color space–specific image and color variations if necessary."}]},{"type":"text","text":" In general, P3 colors and images appear fine on sRGB displays. Occasionally, it may be hard to distinguish two very similar P3 colors when viewing them on an sRGB display. Gradients that use P3 colors can also sometimes appear clipped on sRGB displays. To avoid these issues and to ensure visual fidelity on both wide color and sRGB displays, you can use the asset catalog of your Xcode project to provide different versions of images and colors for each color space."}]},{"anchor":"Platform-considerations","text":"Platform considerations","type":"heading","level":2},{"text":"iOS, iPadOS","level":3,"type":"heading","anchor":"iOS-iPadOS"},{"type":"paragraph","inlineContent":[{"type":"text","text":"iOS defines two sets of dynamic background colors — "},{"type":"emphasis","inlineContent":[{"text":"system","type":"text"}]},{"type":"text","text":" and "},{"inlineContent":[{"text":"grouped","type":"text"}],"type":"emphasis"},{"text":" — each of which contains primary, secondary, and tertiary variants that help you convey a hierarchy of information. In general, use the grouped background colors (","type":"text"},{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGroupedBackground"},{"type":"text","text":", "},{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/secondarySystemGroupedBackground"},{"type":"text","text":", and "},{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiarySystemGroupedBackground","type":"reference"},{"type":"text","text":") when you have a grouped table view; otherwise, use the system set of background colors ("},{"type":"reference","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemBackground","isActive":true},{"text":", ","type":"text"},{"type":"reference","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/secondarySystemBackground","isActive":true},{"text":", and ","type":"text"},{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiarySystemBackground"},{"type":"text","text":")."}]},{"inlineContent":[{"type":"text","text":"With both sets of background colors, you generally use the variants to indicate hierarchy in the following ways:"}],"type":"paragraph"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"text":"Primary for the overall view","type":"text"}]}]},{"content":[{"inlineContent":[{"text":"Secondary for grouping content or elements within the overall view","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"text":"Tertiary for grouping content or elements within secondary elements","type":"text"}],"type":"paragraph"}]}]},{"inlineContent":[{"type":"text","text":"For foreground content, iOS defines the following dynamic colors:"}],"type":"paragraph"},{"header":"row","rows":[[[{"inlineContent":[{"text":"Color","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"type":"text","text":"Use for…"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"UIKit API"}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Label","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"A text label that contains primary content."}]}],[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/label"}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Secondary label","type":"text"}]}],[{"inlineContent":[{"type":"text","text":"A text label that contains secondary content."}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/secondaryLabel","type":"reference","isActive":true}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"text":"Tertiary label","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"A text label that contains tertiary content."}]}],[{"type":"paragraph","inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiaryLabel","isActive":true,"type":"reference"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Quaternary label"}]}],[{"inlineContent":[{"text":"A text label that contains quaternary content.","type":"text"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/quaternaryLabel","type":"reference","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Placeholder text","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Placeholder text in controls or text views."}]}],[{"inlineContent":[{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/placeholderText","type":"reference"}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Separator"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"A separator that allows some underlying content to be visible.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/separator","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Opaque separator"}]}],[{"type":"paragraph","inlineContent":[{"text":"A separator that doesn’t allow any underlying content to be visible.","type":"text"}]}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/opaqueSeparator","type":"reference","isActive":true}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Link"}],"type":"paragraph"}],[{"inlineContent":[{"text":"Text that functions as a link.","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/link","type":"reference"}],"type":"paragraph"}]]],"type":"table"},{"level":3,"anchor":"macOS","text":"macOS","type":"heading"},{"type":"paragraph","inlineContent":[{"text":"macOS defines the following dynamic system colors (you can also view them in the Developer palette of the standard Color panel):","type":"text"}]},{"rows":[[[{"inlineContent":[{"type":"text","text":"Color"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Use for…"}]}],[{"inlineContent":[{"text":"AppKit API","type":"text"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Alternate selected control text color","type":"text"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The text on a selected surface in a list or table.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/alternateSelectedControlTextColor"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Alternating content background colors"}]}],[{"inlineContent":[{"text":"The backgrounds of alternating rows or columns in a list, table, or collection view.","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/alternatingContentBackgroundColors"}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Control accent"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"The accent color people select in System Settings."}]}],[{"inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/controlAccentColor"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Control background color"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"The background of a large interface element, such as a browser or table."}]}],[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/controlBackgroundColor"}]}]],[[{"inlineContent":[{"text":"Control color","type":"text"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The surface of a control.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/controlColor"}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Control text color","type":"text"}]}],[{"inlineContent":[{"type":"text","text":"The text of a control that is available."}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/controlTextColor","type":"reference"}]}]],[[{"inlineContent":[{"text":"Current control tint","type":"text"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The system-defined control tint.","type":"text"}]}],[{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/currentControlTint"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"text":"Unavailable control text color","type":"text"}]}],[{"inlineContent":[{"type":"text","text":"The text of a control that’s unavailable."}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/disabledControlTextColor"}]}]],[[{"inlineContent":[{"type":"text","text":"Find highlight color"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The color of a find indicator.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/findHighlightColor","isActive":true}]}]],[[{"inlineContent":[{"text":"Grid color","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"type":"text","text":"The gridlines of an interface element, such as a table."}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/gridColor","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Header text color"}]}],[{"inlineContent":[{"type":"text","text":"The text of a header cell in a table."}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/headerTextColor"}]}]],[[{"inlineContent":[{"text":"Highlight color","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"The virtual light source onscreen.","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/highlightColor"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Keyboard focus indicator color"}]}],[{"type":"paragraph","inlineContent":[{"text":"The ring that appears around the currently focused control when using the keyboard for interface navigation.","type":"text"}]}],[{"inlineContent":[{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/keyboardFocusIndicatorColor","type":"reference"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Label color"}]}],[{"inlineContent":[{"type":"text","text":"The text of a label containing primary content."}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/labelColor","type":"reference","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Link color","type":"text"}]}],[{"inlineContent":[{"type":"text","text":"A link to other content."}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/linkColor","type":"reference","isActive":true}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Placeholder text color","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"text":"A placeholder string in a control or text view.","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/placeholderTextColor","isActive":true,"type":"reference"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Quaternary label color"}]}],[{"inlineContent":[{"type":"text","text":"The text of a label of lesser importance than a tertiary label, such as watermark text."}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/quaternaryLabelColor","type":"reference","isActive":true}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Secondary label color"}],"type":"paragraph"}],[{"inlineContent":[{"text":"The text of a label of lesser importance than a primary label, such as a label used to represent a subheading or additional information.","type":"text"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/secondaryLabelColor"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Selected content background color"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"The background for selected content in a key window or view."}]}],[{"type":"paragraph","inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedContentBackgroundColor","type":"reference","isActive":true}]}]],[[{"inlineContent":[{"type":"text","text":"Selected control color"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The surface of a selected control.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedControlColor"}]}]],[[{"inlineContent":[{"type":"text","text":"Selected control text color"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"The text of a selected control."}]}],[{"type":"paragraph","inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedControlTextColor","type":"reference","isActive":true}]}]],[[{"inlineContent":[{"type":"text","text":"Selected menu item text color"}],"type":"paragraph"}],[{"inlineContent":[{"type":"text","text":"The text of a selected menu."}],"type":"paragraph"}],[{"inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedMenuItemTextColor","isActive":true}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Selected text background color"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The background of selected text.","type":"text"}]}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedTextBackgroundColor","isActive":true,"type":"reference"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"text":"Selected text color","type":"text"}]}],[{"inlineContent":[{"text":"The color for selected text.","type":"text"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedTextColor","type":"reference","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Separator color"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"A separator between different sections of content."}]}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/separatorColor","type":"reference","isActive":true}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Shadow color"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The virtual shadow cast by a raised object onscreen.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/shadowColor","type":"reference","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Tertiary label color","type":"text"}]}],[{"inlineContent":[{"type":"text","text":"The text of a label of lesser importance than a secondary label."}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/tertiaryLabelColor","type":"reference"}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Text background color","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"text":"The background color behind text.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/textBackgroundColor","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Text color","type":"text"}]}],[{"inlineContent":[{"text":"The text in a document.","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/textColor","type":"reference","isActive":true}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Under page background color","type":"text"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The background behind a document’s content.","type":"text"}]}],[{"inlineContent":[{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/underPageBackgroundColor","type":"reference"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Unemphasized selected content background color"}]}],[{"type":"paragraph","inlineContent":[{"text":"The selected content in a non-key window or view.","type":"text"}]}],[{"inlineContent":[{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedContentBackgroundColor","type":"reference"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Unemphasized selected text background color"}]}],[{"inlineContent":[{"type":"text","text":"A background for selected text in a non-key window or view."}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedTextBackgroundColor","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Unemphasized selected text color","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Selected text in a non-key window or view."}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedTextColor","isActive":true}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Window background color"}]}],[{"type":"paragraph","inlineContent":[{"text":"The background of a window.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/windowBackgroundColor"}]}]],[[{"inlineContent":[{"type":"text","text":"Window frame text color"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"The text in the window’s title bar area.","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/windowFrameTextColor","isActive":true}]}]]],"type":"table","header":"row"},{"type":"heading","level":4,"text":"App accent colors","anchor":"App-accent-colors"},{"inlineContent":[{"type":"text","text":"Beginning in macOS 11, you can specify an "},{"type":"emphasis","inlineContent":[{"type":"text","text":"accent color"}]},{"type":"text","text":" to customize the appearance of your app’s buttons, selection highlighting, and sidebar icons. The system applies your accent color when the current value in General > Accent color settings is "},{"type":"emphasis","inlineContent":[{"type":"text","text":"multicolor"}]},{"type":"text","text":"."}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-accent-colors-picker-multicolor"}]},{"type":"paragraph","inlineContent":[{"text":"If people set their accent color setting to a value other than multicolor, the system applies their chosen color to the relevant items throughout your app, replacing your accent color. The exception is a sidebar icon that uses a fixed color you specify. Because a fixed-color sidebar icon uses a specific color to provide meaning, the system doesn’t override its color when people change the value of accent color settings. For guidance, see ","type":"text"},{"type":"reference","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/sidebars","isActive":true},{"text":".","type":"text"}]},{"type":"heading","level":3,"text":"tvOS","anchor":"tvOS"},{"inlineContent":[{"inlineContent":[{"type":"text","text":"Consider choosing a limited color palette that coordinates with your app logo."}],"type":"strong"},{"text":" Subtle use of color can help you communicate your brand while deferring to the content.","type":"text"}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"text":"Avoid using only color to indicate focus.","type":"text"}]},{"type":"text","text":" Subtle scaling and responsive animation are the primary ways to denote interactivity when an element is in focus."}]},{"level":3,"text":"visionOS","anchor":"visionOS","type":"heading"},{"type":"paragraph","inlineContent":[{"inlineContent":[{"text":"Use color sparingly, especially on glass.","type":"text"}],"type":"strong"},{"text":" Standard visionOS windows typically use the system-defined glass ","type":"text"},{"overridingTitleInlineContent":[{"type":"text","text":"material"}],"type":"reference","isActive":true,"identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/materials","overridingTitle":"material"},{"type":"text","text":", which lets light and objects from people’s physical surroundings and their space show through. Because the colors in these physical and virtual objects are visible through the glass, they can affect the legibility of colorful app content in the window. Prefer using color in places where it can help call attention to important information or show the relationship between parts of the interface."}]},{"inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Prefer using color in bold text and large areas."}]},{"text":" Color in lightweight text or small areas can make them harder to see and understand.","type":"text"}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"text","text":"In a fully immersive experience, help people maintain visual comfort by keeping brightness levels balanced."}],"type":"strong"},{"type":"text","text":" Although using high contrast can help direct people’s attention to important content, it can also cause visual discomfort if people’s eyes have adjusted to low light or darkness. Consider making content fully bright only when the rest of the visual context is also bright. For example, avoid displaying a bright object on a very dark or black background, especially if the object flashes or moves."}]},{"text":"watchOS","type":"heading","anchor":"watchOS","level":3},{"inlineContent":[{"type":"strong","inlineContent":[{"text":"Use background color to support existing content or supply additional information.","type":"text"}]},{"text":" Background color can establish a sense of place and help people recognize key content. For example, in Activity, each infographic view for the Move, Exercise, and Stand Activity rings has a background that matches the color of the ring. Use background color when you have something to communicate, rather than as a solely visual flourish. Avoid using full-screen background color in views that are likely to remain onscreen for long periods of time, such as in a workout or audio-playing app.","type":"text"}],"type":"paragraph"},{"type":"paragraph","inlineContent":[{"type":"strong","inlineContent":[{"type":"text","text":"Recognize that people might prefer graphic complications to use tinted mode instead of full color."}]},{"text":" The system can use a single color that’s based on the wearer’s selected color in a graphic complication’s images, gauges, and text. For guidance, see ","type":"text"},{"type":"reference","isActive":true,"identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/complications"},{"text":".","type":"text"}]},{"level":2,"type":"heading","text":"Specifications","anchor":"Specifications"},{"anchor":"System-colors","text":"System colors","type":"heading","level":3},{"rows":[[[{"inlineContent":[{"type":"text","text":"Name"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"text":"SwiftUI API","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Default (light)"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Default (dark)"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Increased contrast (light)"}]}],[{"inlineContent":[{"text":"Increased contrast (dark)","type":"text"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Red"}]}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/red","isActive":true,"type":"reference"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-red-light.png","type":"image"}]}],[{"inlineContent":[{"identifier":"colors-unified-red-dark.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-red-light.png"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-red-dark.png"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"text":"Orange","type":"text"}]}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/orange","isActive":true,"type":"reference"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-orange-light.png"}]}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-orange-dark.png"}]}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-orange-light.png"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"colors-unified-accessible-orange-dark.png","type":"image"}],"type":"paragraph"}]],[[{"inlineContent":[{"text":"Yellow","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/yellow","isActive":true}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-yellow-light.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-yellow-dark.png","type":"image"}]}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-yellow-light.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-accessible-yellow-dark.png"}]}]],[[{"inlineContent":[{"text":"Green","type":"text"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/green","type":"reference","isActive":true}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-green-light.png"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-green-dark.png"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"colors-unified-accessible-green-light.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"colors-unified-accessible-green-dark.png","type":"image"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"text":"Mint","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/mint"}]}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-mint-light.png"}]}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-mint-dark.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-accessible-mint-light.png","type":"image"}]}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-accessible-mint-dark.png"}]}]],[[{"type":"paragraph","inlineContent":[{"text":"Teal","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"isActive":true,"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/teal","type":"reference"}]}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-teal-light.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-teal-dark.png","type":"image"}]}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-accessible-teal-light.png","type":"image"}]}],[{"inlineContent":[{"identifier":"colors-unified-accessible-teal-dark.png","type":"image"}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Cyan"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/cyan","isActive":true,"type":"reference"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"colors-unified-cyan-light.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"colors-unified-cyan-dark.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-cyan-light.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-accessible-cyan-dark.png"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Blue"}]}],[{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/blue"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-blue-light.png","type":"image"}]}],[{"inlineContent":[{"identifier":"colors-unified-blue-dark.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-blue-light.png"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"colors-unified-accessible-blue-dark.png","type":"image"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"text":"Indigo","type":"text"}]}],[{"inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/indigo"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-indigo-light.png","type":"image"}]}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-indigo-dark.png","type":"image"}]}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-accessible-indigo-light.png"}]}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-indigo-dark.png"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Purple"}]}],[{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/purple"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-purple-light.png"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"colors-unified-purple-dark.png","type":"image"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-accessible-purple-light.png"}]}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-accessible-purple-dark.png","type":"image"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Pink"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/pink","isActive":true}]}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-pink-light.png"}]}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"colors-unified-pink-dark.png"}]}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-pink-light.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-accessible-pink-dark.png","type":"image"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Brown"}]}],[{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/brown"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"colors-unified-brown-light.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-brown-dark.png"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"colors-unified-accessible-brown-light.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"colors-unified-accessible-brown-dark.png","type":"image"}]}]]],"type":"table","header":"row"},{"type":"paragraph","inlineContent":[{"text":"visionOS system colors use the default dark color values.","type":"text"}]},{"anchor":"iOS-iPadOS-system-gray-colors","type":"heading","level":3,"text":"iOS, iPadOS system gray colors"},{"header":"row","rows":[[[{"type":"paragraph","inlineContent":[{"text":"Name","type":"text"}]}],[{"inlineContent":[{"type":"text","text":"UIKit API"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Default (light)"}]}],[{"type":"paragraph","inlineContent":[{"text":"Default (dark)","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"text":"Increased contrast (light)","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"text":"Increased contrast (dark)","type":"text"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Gray"}]}],[{"inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"ios-default-systemgray.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"ios-default-systemgraydark.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"ios-accessible-systemgray.png"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"ios-accessible-systemgraydark.png","type":"image"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"Gray (2)"}]}],[{"inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray2"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"ios-default-systemgray2.png"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"ios-default-systemgray2dark.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"ios-accessible-systemgray2.png","type":"image"}]}],[{"inlineContent":[{"type":"image","identifier":"ios-accessible-systemgray2dark.png"}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Gray (3)"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray3"}]}],[{"inlineContent":[{"type":"image","identifier":"ios-default-systemgray3.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"ios-default-systemgray3dark.png"}]}],[{"inlineContent":[{"type":"image","identifier":"ios-accessible-systemgray3.png"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"ios-accessible-systemgray3dark.png","type":"image"}],"type":"paragraph"}]],[[{"inlineContent":[{"type":"text","text":"Gray (4)"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray4","isActive":true,"type":"reference"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"ios-default-systemgray4.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"identifier":"ios-default-systemgray4dark.png","type":"image"}]}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"ios-accessible-systemgray4.png"}]}],[{"type":"paragraph","inlineContent":[{"identifier":"ios-accessible-systemgray4dark.png","type":"image"}]}]],[[{"inlineContent":[{"type":"text","text":"Gray (5)"}],"type":"paragraph"}],[{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray5"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"ios-default-systemgray5.png"}]}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"ios-default-systemgray5dark.png"}]}],[{"inlineContent":[{"identifier":"ios-accessible-systemgray5.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"identifier":"ios-accessible-systemgray5dark.png","type":"image"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"text":"Gray (6)","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray6"}]}],[{"inlineContent":[{"identifier":"ios-default-systemgray6.png","type":"image"}],"type":"paragraph"}],[{"inlineContent":[{"type":"image","identifier":"ios-default-systemgray6dark.png"}],"type":"paragraph"}],[{"type":"paragraph","inlineContent":[{"type":"image","identifier":"ios-accessible-systemgray6.png"}]}],[{"type":"paragraph","inlineContent":[{"identifier":"ios-accessible-systemgray6dark.png","type":"image"}]}]]],"type":"table"},{"inlineContent":[{"text":"In SwiftUI, the equivalent of ","type":"text"},{"code":"systemGray","type":"codeVoice"},{"text":" is ","type":"text"},{"type":"reference","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/gray","isActive":true},{"text":".","type":"text"}],"type":"paragraph"},{"type":"heading","level":2,"anchor":"Resources","text":"Resources"},{"anchor":"Related","level":4,"text":"Related","type":"heading"},{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/dark-mode"}]},{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/accessibility"}],"type":"paragraph"},{"inlineContent":[{"isActive":true,"type":"reference","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/materials"}],"type":"paragraph"},{"inlineContent":[{"isActive":true,"type":"reference","identifier":"https://developer.apple.com/design/resources/"}],"type":"paragraph"},{"type":"heading","level":4,"anchor":"Developer-documentation","text":"Developer documentation"},{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color"},{"type":"text","text":" — SwiftUI"}]},{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor"},{"type":"text","text":" — UIKit"}]},{"type":"paragraph","inlineContent":[{"type":"reference","isActive":true,"identifier":"doc://com.apple.documentation/documentation/AppKit/color"},{"type":"text","text":" — AppKit"}]},{"text":"Videos","type":"heading","level":4,"anchor":"Videos"},{"style":"compactGrid","type":"links","items":["doc://com.apple.documentation/videos/play/wwdc2025/219"]},{"type":"heading","anchor":"Change-log","level":2,"text":"Change log"},{"header":"row","type":"table","rows":[[[{"type":"paragraph","inlineContent":[{"text":"Date","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"text":"Changes","type":"text"}]}]],[[{"type":"paragraph","inlineContent":[{"text":"December 16, 2025","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"text":"Updated guidance for Liquid Glass.","type":"text"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"June 9, 2025"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Updated system color values, and added guidance for Liquid Glass."}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"February 2, 2024"}]}],[{"inlineContent":[{"text":"Distinguished UIKit and SwiftUI gray colors in iOS and iPadOS, and added guidance for balancing brightness levels in visionOS apps.","type":"text"}],"type":"paragraph"}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"September 12, 2023"}]}],[{"type":"paragraph","inlineContent":[{"type":"text","text":"Enhanced guidance for using background color in watchOS views, and added color swatches for tvOS."}]}]],[[{"type":"paragraph","inlineContent":[{"text":"June 21, 2023","type":"text"}]}],[{"type":"paragraph","inlineContent":[{"text":"Updated to include guidance for visionOS.","type":"text"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"June 5, 2023"}]}],[{"type":"paragraph","inlineContent":[{"text":"Updated guidance for using background color in watchOS.","type":"text"}]}]],[[{"type":"paragraph","inlineContent":[{"type":"text","text":"December 19, 2022"}]}],[{"type":"paragraph","inlineContent":[{"text":"Corrected RGB values for system mint color (Dark Mode) in iOS and iPadOS.","type":"text"}]}]]]}]}],"metadata":{"title":"Color","images":[{"type":"icon","identifier":"color.svg"},{"identifier":"foundations-color-thumbnail.png","type":"card"}],"availableLanguages":["en-US","zh-CN","ja-JP","ko-KR"],"customMetadata":{"supported-platforms":"ios,ipados,macos,tvos,visionos,watchos","alert-text":"Updated guidance for Liquid Glass.","alert-date":"2025-12-16"},"role":"article","availableLocales":["en-US","ja-JP","ko-KR","zh-CN"]},"identifier":{"interfaceLanguage":"swift","url":"doc://com.apple.HIG/design/Human-Interface-Guidelines/color"},"sections":[],"abstract":[{"type":"text","text":"Judicious use of color can enhance communication, evoke your brand, provide visual continuity, communicate status and feedback, and help people understand information."}],"topicSectionsStyle":"compactGrid","kind":"article","hierarchy":{"paths":[["doc://com.apple.documentation/documentation/technologies","doc://com.apple.HIG/design/human-interface-guidelines","doc://com.apple.HIG/design/Human-Interface-Guidelines/foundations"]]},"schemaVersion":{"major":0,"minor":3,"patch":0},"references":{"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGroupedBackground":{"url":"/documentation/UIKit/UIColor/systemGroupedBackground","kind":"symbol","type":"topic","role":"symbol","abstract":[{"type":"text","text":"The color for the main background of your grouped interface."}],"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGroupedBackground","title":"systemGroupedBackground","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"systemGroupedBackground"},{"kind":"text","text":": "},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}]},"colors-unified-green-light.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/b4226cfcf596812d46bd084322f47e65/colors-unified-green-light%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/b7fa96f649da33c239d3b825d5c6fd42/colors-unified-green-light~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-green-light.png","type":"image","alt":"R-52,G-199,B-89"},"doc://com.apple.documentation/documentation/AppKit/NSColor/placeholderTextColor":{"kind":"symbol","role":"symbol","type":"topic","abstract":[{"text":"The color to use for placeholder text in controls or text views.","type":"text"}],"title":"placeholderTextColor","url":"/documentation/AppKit/NSColor/placeholderTextColor","fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"kind":"identifier","text":"placeholderTextColor"},{"kind":"text","text":": "},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/placeholderTextColor"},"foundations-color-thumbnail.png":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/abf2e0ae0883b9974bae47a71b3ac09b/foundations-color-thumbnail%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/01e7d6cdf551a65c661496d1a5118164/foundations-color-thumbnail~dark%402x.png","traits":["2x","dark"]}],"type":"image","alt":"A sketch of a paint palette, suggesting the use of color. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","identifier":"foundations-color-thumbnail.png"},"colors-unified-accessible-blue-light.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/f46653318bcfae105ff78fe412d64da2/colors-unified-accessible-blue-light%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/f5dff3297aeb38f035421ff2860cae15/colors-unified-accessible-blue-light~dark%402x.png","traits":["2x","dark"]}],"type":"image","identifier":"colors-unified-accessible-blue-light.png","alt":"R-30,G-110,B-244"},"colors-unified-orange-dark.png":{"type":"image","identifier":"colors-unified-orange-dark.png","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/e906c25c1cadcb9cf7514d01b83f3bb7/colors-unified-orange-dark%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/43486a6f9094ca1bd7076a9e707c87f7/colors-unified-orange-dark~dark%402x.png"}],"alt":"R-255,G-146,B-48"},"ios-default-systemgray6.png":{"identifier":"ios-default-systemgray6.png","type":"image","alt":"R-242,G-242,B-247","variants":[{"url":"https://docs-assets.developer.apple.com/published/3d60e2b1bf4771610453a31de912647b/ios-default-systemgray6%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/d23b10d7843ba47642c1497003d8fbe1/ios-default-systemgray6~dark%402x.png","traits":["2x","dark"]}]},"color-inclusive-color-charts-chinese":{"type":"image","alt":"An illustration of an upward-trending stock chart in the Stocks app in Chinese. The line of the graph is red to indicate the rising value of the stock during the selected time period.","identifier":"color-inclusive-color-charts-chinese","variants":[{"url":"https://docs-assets.developer.apple.com/published/e84b6e7089f1fb8f73712da462d66164/color-inclusive-color-charts-chinese%402x.png","traits":["2x","light"]}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedTextBackgroundColor":{"abstract":[{"type":"text","text":"The color to use for the background of selected text."}],"fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"kind":"identifier","text":"selectedTextBackgroundColor"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor"}],"role":"symbol","title":"selectedTextBackgroundColor","kind":"symbol","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedTextBackgroundColor","url":"/documentation/AppKit/NSColor/selectedTextBackgroundColor","type":"topic"},"colors-unified-accessible-purple-light.png":{"type":"image","alt":"R-176,G-47,B-194","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/a63779bec8a313582e11c6bbe348fc10/colors-unified-accessible-purple-light%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/dbd065673a485eeb3312c29c354b4591/colors-unified-accessible-purple-light~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-accessible-purple-light.png"},"colors-unified-pink-light.png":{"type":"image","alt":"R-255,G-45,B-85","identifier":"colors-unified-pink-light.png","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/1486931dce50d7610a397607afc0fb4d/colors-unified-pink-light%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/6e0dc7bacc17efdc3563a4737198cf54/colors-unified-pink-light~dark%402x.png","traits":["2x","dark"]}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/highlightColor":{"url":"/documentation/AppKit/NSColor/highlightColor","kind":"symbol","type":"topic","role":"symbol","abstract":[{"type":"text","text":"The color to use as a virtual light source on the screen."}],"title":"highlightColor","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/highlightColor","fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"highlightColor","kind":"identifier"},{"text":": ","kind":"text"},{"preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor","kind":"typeIdentifier"}]},"doc://com.apple.documentation/documentation/AppKit/color":{"url":"/documentation/AppKit/color","abstract":[{"text":"Represent colors using built-in or custom formats, and give users options for selecting and applying colors.","type":"text"}],"title":"Color","kind":"article","identifier":"doc://com.apple.documentation/documentation/AppKit/color","role":"collectionGroup","type":"topic"},"colors-unified-orange-light.png":{"identifier":"colors-unified-orange-light.png","type":"image","alt":"R-255,G-141,B-40","variants":[{"url":"https://docs-assets.developer.apple.com/published/57f431ec786e31e33f578ace3dbb8c78/colors-unified-orange-light%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/9f113bce48fc72dc6ca466ad9cdf0f05/colors-unified-orange-light~dark%402x.png","traits":["2x","dark"]}]},"color-context-dark-mode-high-contrast":{"type":"image","alt":"A screenshot of the Notes app in iOS with the dark system appearance and increased contrast. The Notes app is open to a note with the text 'Note'. The text is selected, which shows a yellow selection highlight and text editing menu. The Done button appears in the upper-right corner. The Liquid Glass background of the button is yellow, and its label, which shows a checkmark, is black.","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/3c6735246b0e8da65d4d2624cf6211df/color-context-dark-mode-high-contrast%402x.png"}],"identifier":"color-context-dark-mode-high-contrast"},"colors-unified-accessible-red-dark.png":{"type":"image","alt":"R-255,G-97,B-101","variants":[{"url":"https://docs-assets.developer.apple.com/published/d097760a50a181eb7f688e9d62f4e710/colors-unified-accessible-red-dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/c9231fb3d221047819f4646aaee4b2de/colors-unified-accessible-red-dark~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-accessible-red-dark.png"},"colors-unified-blue-dark.png":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/580c321f95c59b2b4479be066d24f10f/colors-unified-blue-dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/0f789f1355e3f6ba1199a17211c35f5c/colors-unified-blue-dark~dark%402x.png","traits":["2x","dark"]}],"alt":"R-0,G-145,B-255","type":"image","identifier":"colors-unified-blue-dark.png"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/materials":{"role":"article","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/materials","url":"/design/human-interface-guidelines/materials","kind":"article","type":"topic","title":"Materials","abstract":[{"text":"A material is a visual effect that creates a sense of depth, layering, and hierarchy between foreground and background elements.","type":"text"}],"images":[{"identifier":"materials.svg","type":"icon"},{"identifier":"foundations-materials-thumbnail.png","type":"card"}]},"colors-unified-pink-dark.png":{"alt":"R-255,G-55,B-95","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/d68a9dbf37bab028b011f68fdd794e9c/colors-unified-pink-dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/1de8e3f5c64309c96dc31a2121b602ad/colors-unified-pink-dark~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-pink-dark.png","type":"image"},"colors-unified-accessible-teal-dark.png":{"identifier":"colors-unified-accessible-teal-dark.png","alt":"R-59,G-221,B-236","type":"image","variants":[{"url":"https://docs-assets.developer.apple.com/published/9a76a2333c746ded944e6610a01d4daf/colors-unified-accessible-teal-dark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/2363a49f5d3548979348e0912820d723/colors-unified-accessible-teal-dark~dark%402x.png"}]},"doc://com.apple.documentation/documentation/SwiftUI/Color/purple":{"abstract":[{"text":"A context-dependent purple color suitable for use in UI elements.","type":"text"}],"fragments":[{"text":"static","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"let"},{"text":" ","kind":"text"},{"text":"purple","kind":"identifier"},{"text":": ","kind":"text"},{"text":"Color","preciseIdentifier":"s:7SwiftUI5ColorV","kind":"typeIdentifier"}],"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/purple","type":"topic","kind":"symbol","title":"purple","url":"/documentation/SwiftUI/Color/purple","role":"symbol"},"colors-unified-accessible-indigo-dark.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/d19249c65dab279c41f16c802365df10/colors-unified-accessible-indigo-dark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/e0bce8448f5cfabacd6791c29d41fd59/colors-unified-accessible-indigo-dark~dark%402x.png"}],"type":"image","identifier":"colors-unified-accessible-indigo-dark.png","alt":"R-167,G-170,B-255"},"5CD0E251-424E-490F-89CF-1E64848209A6":{"variants":[{"url":"https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_1x.jpg","traits":["1x"]},{"traits":["2x"],"url":"https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_2x.jpg"},{"url":"https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_3x.jpg","traits":["3x"]}],"type":"image","identifier":"5CD0E251-424E-490F-89CF-1E64848209A6","alt":null},"colors-unified-red-dark.png":{"identifier":"colors-unified-red-dark.png","variants":[{"url":"https://docs-assets.developer.apple.com/published/9d7a7df4db48b0dcbd2915724d010235/colors-unified-red-dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/42db18c65807e9d9d705478ff2da168a/colors-unified-red-dark~dark%402x.png","traits":["2x","dark"]}],"alt":"R-255,G-66,B-69","type":"image"},"doc://com.apple.documentation/documentation/UIKit/UIColor/systemBackground":{"abstract":[{"text":"The color for the main background of your interface.","type":"text"}],"kind":"symbol","type":"topic","fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"text":"systemBackground","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor","text":"UIColor"}],"url":"/documentation/UIKit/UIColor/systemBackground","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemBackground","role":"symbol","title":"systemBackground"},"doc://com.apple.documentation/documentation/AppKit/NSColor/underPageBackgroundColor":{"role":"symbol","type":"topic","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/underPageBackgroundColor","abstract":[{"type":"text","text":"The color to use in the area beneath your window’s views."}],"fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"kind":"identifier","text":"underPageBackgroundColor"},{"text":": ","kind":"text"},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"kind":"symbol","title":"underPageBackgroundColor","url":"/documentation/AppKit/NSColor/underPageBackgroundColor"},"colors-unified-accessible-green-dark.png":{"identifier":"colors-unified-accessible-green-dark.png","alt":"R-74,G-217,B-104","variants":[{"url":"https://docs-assets.developer.apple.com/published/aff6bca03c74050c6b78015925c8fd21/colors-unified-accessible-green-dark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/4147a24638f1d3e22f25dde5b20bb548/colors-unified-accessible-green-dark~dark%402x.png"}],"type":"image"},"ios-default-systemgray5dark.png":{"alt":"R-44,G-44,B-46","type":"image","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/a8b1d65979b02865c203f18019b1084d/ios-default-systemgray5dark%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/673d4e275b24a1d655d6f7c653e2038a/ios-default-systemgray5dark~dark%402x.png"}],"identifier":"ios-default-systemgray5dark.png"},"color-liquid-glass-overview-tinted":{"identifier":"color-liquid-glass-overview-tinted","alt":"A screenshot of the Done button in iOS, which appears as a checkmark on a blue Liquid Glass background.","type":"image","variants":[{"url":"https://docs-assets.developer.apple.com/published/0996d0f78d6ec57861e6d63359e8f112/color-liquid-glass-overview-tinted%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/b0cb89a3374248221f1eb9280c07df80/color-liquid-glass-overview-tinted~dark%402x.png","traits":["2x","dark"]}]},"doc://com.apple.documentation/documentation/UIKit/UIColor/placeholderText":{"type":"topic","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/placeholderText","url":"/documentation/UIKit/UIColor/placeholderText","role":"symbol","title":"placeholderText","abstract":[{"text":"The color for placeholder text in controls or text views.","type":"text"}],"fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"text":"placeholderText","kind":"identifier"},{"kind":"text","text":": "},{"text":"UIColor","preciseIdentifier":"c:objc(cs)UIColor","kind":"typeIdentifier"}],"kind":"symbol"},"doc://com.apple.documentation/documentation/SwiftUI/Color/green":{"title":"green","role":"symbol","type":"topic","fragments":[{"text":"static","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"let"},{"text":" ","kind":"text"},{"text":"green","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI5ColorV","text":"Color"}],"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/green","abstract":[{"type":"text","text":"A context-dependent green color suitable for use in UI elements."}],"kind":"symbol","url":"/documentation/SwiftUI/Color/green"},"colors-unified-teal-light.png":{"identifier":"colors-unified-teal-light.png","alt":"R-0,G-195,B-208","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/6b8e5d90758cc858b4d3e20110a31f53/colors-unified-teal-light%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/48fcae45068a0fe4c2a2d63f5c351970/colors-unified-teal-light~dark%402x.png"}],"type":"image"},"doc://com.apple.documentation/documentation/SwiftUI/Color":{"title":"Color","fragments":[{"text":"struct","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"Color"}],"role":"symbol","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color","type":"topic","abstract":[{"text":"A representation of a color that adapts to a given context.","type":"text"}],"kind":"symbol","url":"/documentation/SwiftUI/Color"},"colors-unified-blue-light.png":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/6ea9cabe180214ed99be04320df3501b/colors-unified-blue-light%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/351df342c9792a9924ca098f796fc82a/colors-unified-blue-light~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-blue-light.png","type":"image","alt":"R-0,G-136,B-255"},"colors-unified-indigo-light.png":{"alt":"R-97,G-85,B-245","variants":[{"url":"https://docs-assets.developer.apple.com/published/2da5c45a0e483dcaac4447464da4b6a7/colors-unified-indigo-light%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/e62f44b7aeed4482e99d58791fc8a0e9/colors-unified-indigo-light~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-indigo-light.png","type":"image"},"colors-unified-brown-dark.png":{"type":"image","identifier":"colors-unified-brown-dark.png","variants":[{"url":"https://docs-assets.developer.apple.com/published/df6c5da440560b2054af5b55fe9b87f4/colors-unified-brown-dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/87118d9fb0b8d5fdf2db300fa917946d/colors-unified-brown-dark~dark%402x.png","traits":["2x","dark"]}],"alt":"R-183,G-138,B-102"},"doc://com.apple.documentation/documentation/AppKit/NSColor/windowFrameTextColor":{"role":"symbol","abstract":[{"text":"The color to use for text in a window’s frame.","type":"text"}],"fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"text":"windowFrameTextColor","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor"}],"title":"windowFrameTextColor","kind":"symbol","type":"topic","url":"/documentation/AppKit/NSColor/windowFrameTextColor","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/windowFrameTextColor"},"colors-unified-accessible-mint-dark.png":{"type":"image","identifier":"colors-unified-accessible-mint-dark.png","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/72586072586bb6d91589cc4ab78177b1/colors-unified-accessible-mint-dark%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/03d932a81c8c8a36f5bf02fd77aceb20/colors-unified-accessible-mint-dark~dark%402x.png"}],"alt":"R-84,G-223,B-203"},"color-context-dark-mode":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/772d6f92ba3bdeb1d3cc364fb6195f02/color-context-dark-mode%402x.png","traits":["2x","light"]}],"alt":"A screenshot of the Notes app in iOS with the dark system appearance and default contrast. The Notes app is open to a note with the text 'Note'. The text is selected, which shows a yellow selection highlight and text editing menu. The Done button appears in the upper-right corner. The Liquid Glass background of the button is yellow, and its label, which shows a checkmark, is white.","type":"image","identifier":"color-context-dark-mode"},"doc://com.apple.documentation/documentation/AppKit/NSColor/textColor":{"title":"textColor","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"textColor"},{"kind":"text","text":": "},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"role":"symbol","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/textColor","type":"topic","abstract":[{"text":"The color to use for text.","type":"text"}],"kind":"symbol","url":"/documentation/AppKit/NSColor/textColor"},"colors-unified-cyan-light.png":{"type":"image","alt":"R-0,G-192,B-232","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/3eb3076ca71a16ce1bede399e815e736/colors-unified-cyan-light%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/9de8bc6d14b46c36591b618762c2c641/colors-unified-cyan-light~dark%402x.png"}],"identifier":"colors-unified-cyan-light.png"},"color-liquid-glass-overview-clear":{"type":"image","identifier":"color-liquid-glass-overview-clear","alt":"A screenshot of the Share button in iOS over a colorful image. The colors from the background image infuse the Liquid Glass in the button, affecting its color.","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/35dc86c5d1930edab3fe983859818631/color-liquid-glass-overview-clear%402x.png"}]},"ios-default-systemgray6dark.png":{"type":"image","alt":"R-28,G-28,B-30","variants":[{"url":"https://docs-assets.developer.apple.com/published/5d86f031014f556ef2d26da001c1f639/ios-default-systemgray6dark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/484fbf15a627fbf729a7400f0d07b7c4/ios-default-systemgray6dark~dark%402x.png"}],"identifier":"ios-default-systemgray6dark.png"},"doc://com.apple.documentation/documentation/SwiftUI/ColorPicker":{"title":"ColorPicker","type":"topic","identifier":"doc://com.apple.documentation/documentation/SwiftUI/ColorPicker","url":"/documentation/SwiftUI/ColorPicker","fragments":[{"kind":"keyword","text":"struct"},{"kind":"text","text":" "},{"text":"ColorPicker","kind":"identifier"}],"role":"symbol","kind":"symbol","abstract":[{"type":"text","text":"A control used to select a color from the system color picker UI."}]},"colors-unified-accessible-orange-light.png":{"type":"image","identifier":"colors-unified-accessible-orange-light.png","variants":[{"url":"https://docs-assets.developer.apple.com/published/2222321d0b29cad6987f0f6e26d198c1/colors-unified-accessible-orange-light%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/9204f66a0bb0fe3b2120c0db26b4635b/colors-unified-accessible-orange-light~dark%402x.png","traits":["2x","dark"]}],"alt":"R-197,G-83,B-0"},"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray6":{"kind":"symbol","abstract":[{"type":"text","text":"A sixth-level shade of gray that adapts to the environment."}],"type":"topic","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"text":"systemGray6","kind":"identifier"},{"text":": ","kind":"text"},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}],"url":"/documentation/UIKit/UIColor/systemGray6","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray6","role":"symbol","title":"systemGray6"},"colors-unified-brown-light.png":{"identifier":"colors-unified-brown-light.png","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/366eca06d26c2f759d6200a1e9b0a56f/colors-unified-brown-light%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/089f77c7005b1e4753fbdb15c7fbb2ba/colors-unified-brown-light~dark%402x.png","traits":["2x","dark"]}],"alt":"R-172,G-127,B-94","type":"image"},"foundations-materials-thumbnail.png":{"alt":"A sketch of a capsule shape overlapping a square. A subtle bend in the edges of the square that are beneath the capsule suggests the layering of the Liquid Glass material over background content. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","variants":[{"url":"https://docs-assets.developer.apple.com/published/28f9d9cb9218b7a8492a8eacf44bc527/foundations-materials-thumbnail%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/e8c2e61c9595215c7ba6f6ba20772896/foundations-materials-thumbnail~dark%402x.png"}],"type":"image","identifier":"foundations-materials-thumbnail.png"},"doc://com.apple.documentation/documentation/AppKit/NSColor/controlAccentColor":{"abstract":[{"type":"text","text":"The user’s current accent color preference."}],"fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"kind":"identifier","text":"controlAccentColor"},{"text":": ","kind":"text"},{"preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor","kind":"typeIdentifier"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/controlAccentColor","type":"topic","kind":"symbol","title":"controlAccentColor","url":"/documentation/AppKit/NSColor/controlAccentColor","role":"symbol"},"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiarySystemBackground":{"kind":"symbol","url":"/documentation/UIKit/UIColor/tertiarySystemBackground","type":"topic","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiarySystemBackground","role":"symbol","abstract":[{"type":"text","text":"The color for content layered on top of secondary backgrounds."}],"fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"text":"tertiarySystemBackground","kind":"identifier"},{"text":": ","kind":"text"},{"text":"UIColor","preciseIdentifier":"c:objc(cs)UIColor","kind":"typeIdentifier"}],"title":"tertiarySystemBackground"},"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray3":{"type":"topic","url":"/documentation/UIKit/UIColor/systemGray3","abstract":[{"type":"text","text":"A third-level shade of gray that adapts to the environment."}],"title":"systemGray3","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"systemGray3"},{"kind":"text","text":": "},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}],"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray3","role":"symbol","kind":"symbol"},"colors-unified-mint-dark.png":{"alt":"R-0,G-218,B-195","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/851d8c0c2bea51a9377ae31520097e8c/colors-unified-mint-dark%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/1b118b84eab4b15eee2579ea63c40ffc/colors-unified-mint-dark~dark%402x.png"}],"identifier":"colors-unified-mint-dark.png","type":"image"},"ios-accessible-systemgray3dark.png":{"type":"image","identifier":"ios-accessible-systemgray3dark.png","alt":"R-84,G-84,B-86","variants":[{"url":"https://docs-assets.developer.apple.com/published/693c40b65e2752b3a2b7741d61ebbb3b/ios-accessible-systemgray3dark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/3396810a24c448d953260f9ca4350a31/ios-accessible-systemgray3dark~dark%402x.png"}]},"ios-default-systemgray.png":{"identifier":"ios-default-systemgray.png","variants":[{"url":"https://docs-assets.developer.apple.com/published/cc1289b6fd4b76c79bbeda356463232a/ios-default-systemgray%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/fc7844da63dca3eb793031b3fcad009c/ios-default-systemgray~dark%402x.png","traits":["2x","dark"]}],"alt":"R-142,G-142,B-147","type":"image"},"doc://com.apple.documentation/documentation/AppKit/NSColor/tertiaryLabelColor":{"url":"/documentation/AppKit/NSColor/tertiaryLabelColor","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"kind":"identifier","text":"tertiaryLabelColor"},{"kind":"text","text":": "},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/tertiaryLabelColor","kind":"symbol","role":"symbol","type":"topic","title":"tertiaryLabelColor","abstract":[{"type":"text","text":"The tertiary color to use for text labels."}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/findHighlightColor":{"url":"/documentation/AppKit/NSColor/findHighlightColor","type":"topic","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"findHighlightColor"},{"kind":"text","text":": "},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"kind":"symbol","abstract":[{"text":"The highlight color to use for the bubble that shows inline search result values.","type":"text"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/findHighlightColor","role":"symbol","title":"findHighlightColor"},"ios-accessible-systemgray6.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/82102708ad5dc7921fc0473f6ace4613/ios-accessible-systemgray6%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/0fad10fc530d0760746e46bf164028c8/ios-accessible-systemgray6~dark%402x.png","traits":["2x","dark"]}],"identifier":"ios-accessible-systemgray6.png","type":"image","alt":"R-235,G-235,B-240"},"doc://com.apple.documentation/documentation/UIKit/UIColor/separator":{"type":"topic","abstract":[{"type":"text","text":"The color for thin borders or divider lines that allows some underlying content to be visible."}],"title":"separator","kind":"symbol","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"text":"separator","kind":"identifier"},{"kind":"text","text":": "},{"preciseIdentifier":"c:objc(cs)UIColor","text":"UIColor","kind":"typeIdentifier"}],"role":"symbol","url":"/documentation/UIKit/UIColor/separator","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/separator"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/sidebars":{"abstract":[{"type":"text","text":"A sidebar appears on the leading side of a view and lets people navigate between areas of your app or top-level collections of content, like folders and playlists."}],"identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/sidebars","type":"topic","title":"Sidebars","url":"/design/human-interface-guidelines/sidebars","role":"article","images":[{"type":"card","identifier":"components-sidebars-thumbnail.png"}],"kind":"article"},"doc://com.apple.documentation/documentation/SwiftUI/Color/cyan":{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/cyan","title":"cyan","fragments":[{"kind":"keyword","text":"static"},{"text":" ","kind":"text"},{"kind":"keyword","text":"let"},{"kind":"text","text":" "},{"text":"cyan","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI5ColorV","text":"Color"}],"url":"/documentation/SwiftUI/Color/cyan","kind":"symbol","type":"topic","role":"symbol","abstract":[{"text":"A context-dependent cyan color suitable for use in UI elements.","type":"text"}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/currentControlTint":{"url":"/documentation/AppKit/NSColor/currentControlTint","title":"currentControlTint","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/currentControlTint","role":"symbol","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"text":"currentControlTint","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","text":"NSControlTint","preciseIdentifier":"c:@E@NSControlTint"}],"abstract":[{"type":"text","text":"The current system control tint color."}],"type":"topic","kind":"symbol"},"doc://com.apple.documentation/documentation/AppKit/NSColor/headerTextColor":{"role":"symbol","kind":"symbol","title":"headerTextColor","abstract":[{"text":"The color to use for text in header cells in table views and outline views.","type":"text"}],"fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"headerTextColor","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/headerTextColor","url":"/documentation/AppKit/NSColor/headerTextColor","type":"topic"},"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedTextColor":{"title":"selectedTextColor","role":"symbol","type":"topic","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"text":"selectedTextColor","kind":"identifier"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedTextColor","abstract":[{"text":"The color to use for selected text.","type":"text"}],"kind":"symbol","url":"/documentation/AppKit/NSColor/selectedTextColor"},"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray4":{"kind":"symbol","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"systemGray4"},{"kind":"text","text":": "},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}],"role":"symbol","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray4","title":"systemGray4","type":"topic","abstract":[{"text":"A fourth-level shade of gray that adapts to the environment.","type":"text"}],"url":"/documentation/UIKit/UIColor/systemGray4"},"colors-unified-accessible-yellow-dark.png":{"identifier":"colors-unified-accessible-yellow-dark.png","type":"image","alt":"R-254,G-223,B-67","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/cd06b12d9e053739b089fb102b70901e/colors-unified-accessible-yellow-dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/6bb1f4620afc521953556213cb891487/colors-unified-accessible-yellow-dark~dark%402x.png","traits":["2x","dark"]}]},"foundations-dark-mode-thumbnail.png":{"alt":"A sketch of concentric circles with half-filled areas, suggesting the presence of light and dark. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/adfd77f845fa70ba778b415928f3c93b/foundations-dark-mode-thumbnail%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/41d931db8bdd3f72711eeb2cb6c222a6/foundations-dark-mode-thumbnail~dark%402x.png","traits":["2x","dark"]}],"identifier":"foundations-dark-mode-thumbnail.png","type":"image"},"colors-unified-purple-dark.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/04bce86fef3077014010ce6cfceb659f/colors-unified-purple-dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/c1b4feb3ba2bd5479aade16f9b5da50e/colors-unified-purple-dark~dark%402x.png","traits":["2x","dark"]}],"type":"image","identifier":"colors-unified-purple-dark.png","alt":"R-219,G-52,B-242"},"colors-unified-accessible-yellow-light.png":{"alt":"R-161,G-106,B-0","variants":[{"url":"https://docs-assets.developer.apple.com/published/a51b94b82d9ea46e9de2ab8da5a57bbe/colors-unified-accessible-yellow-light%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/69a05ae18e1f69e1d3f2c54275182a7f/colors-unified-accessible-yellow-light~dark%402x.png"}],"identifier":"colors-unified-accessible-yellow-light.png","type":"image"},"ios-default-systemgray4.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/5e1c546e8c78d9700b1ee58ce3a39972/ios-default-systemgray4%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/578fb5c8fe0ce897d2284cecf48c44f1/ios-default-systemgray4~dark%402x.png","traits":["2x","dark"]}],"alt":"R-209,G-209,B-214","type":"image","identifier":"ios-default-systemgray4.png"},"ios-default-systemgray4dark.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/983cdcdfa9a664db0c5ff7c09905582a/ios-default-systemgray4dark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/7005ec8bc69614738d9e3049492345ae/ios-default-systemgray4dark~dark%402x.png"}],"type":"image","alt":"R-58,G-58,B-60","identifier":"ios-default-systemgray4dark.png"},"colors-unified-accessible-purple-dark.png":{"alt":"R-234,G-141,B-255","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/82c3b96b548cbc455ef685f3e44d01d1/colors-unified-accessible-purple-dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/8bfeeea59c5f9f0e74d14ad655ff2463/colors-unified-accessible-purple-dark~dark%402x.png","traits":["2x","dark"]}],"type":"image","identifier":"colors-unified-accessible-purple-dark.png"},"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray5":{"title":"systemGray5","type":"topic","url":"/documentation/UIKit/UIColor/systemGray5","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"systemGray5"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor","text":"UIColor"}],"abstract":[{"text":"A fifth-level shade of gray that adapts to the environment.","type":"text"}],"kind":"symbol","role":"symbol","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray5"},"colors-accent-colors-picker-multicolor":{"identifier":"colors-accent-colors-picker-multicolor","alt":"A screenshot of the accent color picker in the System Settings app.","variants":[{"url":"https://docs-assets.developer.apple.com/published/93ebe4b08af4e94a5c4479459fc7905b/colors-accent-colors-picker-multicolor%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/9904b9acd3c43cc6cbda49bdb4473299/colors-accent-colors-picker-multicolor~dark%402x.png","traits":["2x","dark"]}],"type":"image"},"components-complications-thumbnail.png":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/1585a0cc95cfbc9280adf94499bd8192/components-complications-thumbnail%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/43b6aef8c2d3217e2138f0eda619b2d6/components-complications-thumbnail~dark%402x.png","traits":["2x","dark"]}],"type":"image","identifier":"components-complications-thumbnail.png","alt":"A stylized representation of an Apple Watch face that includes the time and a set of differently sized complications. The image is tinted red to subtly reflect the red in the original six-color Apple logo."},"doc://com.apple.HIG/design/Human-Interface-Guidelines/materials#Liquid-Glass":{"title":"Liquid Glass","type":"topic","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/materials#Liquid-Glass","abstract":[],"url":"/design/human-interface-guidelines/materials#Liquid-Glass","kind":"section"},"doc://com.apple.documentation/documentation/AppKit/NSColor/textBackgroundColor":{"url":"/documentation/AppKit/NSColor/textBackgroundColor","kind":"symbol","role":"symbol","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"textBackgroundColor"},{"text":": ","kind":"text"},{"preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor","kind":"typeIdentifier"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/textBackgroundColor","abstract":[{"text":"The color to use for the background area behind text.","type":"text"}],"type":"topic","title":"textBackgroundColor"},"colors-unified-accessible-teal-light.png":{"alt":"R-0,G-129,B-152","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/f2137be89fb79e4822b633a450d6fc2c/colors-unified-accessible-teal-light%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/bec0729dd11729d4824251e4216c6f48/colors-unified-accessible-teal-light~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-accessible-teal-light.png","type":"image"},"doc://com.apple.documentation/documentation/AppKit/NSColor/windowBackgroundColor":{"url":"/documentation/AppKit/NSColor/windowBackgroundColor","title":"windowBackgroundColor","kind":"symbol","fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"windowBackgroundColor"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/windowBackgroundColor","role":"symbol","type":"topic","abstract":[{"type":"text","text":"The color to use for the window background."}]},"colors-unified-indigo-dark.png":{"alt":"R-109,G-124,B-255","type":"image","variants":[{"url":"https://docs-assets.developer.apple.com/published/b5e1fd9a1fc2347cc7238668b2df251b/colors-unified-indigo-dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/688208e7e3f0fdeae4e9c7b6b07320ff/colors-unified-indigo-dark~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-indigo-dark.png"},"ios-accessible-systemgraydark.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/d00617ff05181a53d2cb5ddf143d502e/ios-accessible-systemgraydark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/58db62a1037f1c6b1fa2b0bd93a6c8c8/ios-accessible-systemgraydark~dark%402x.png"}],"type":"image","identifier":"ios-accessible-systemgraydark.png","alt":"R-174,G-174,B-178"},"doc://com.apple.documentation/documentation/AppKit/NSColor/labelColor":{"fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"labelColor","kind":"identifier"},{"kind":"text","text":": "},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/labelColor","kind":"symbol","title":"labelColor","abstract":[{"text":"The primary color to use for text labels.","type":"text"}],"type":"topic","role":"symbol","url":"/documentation/AppKit/NSColor/labelColor"},"colors-unified-accessible-indigo-light.png":{"type":"image","identifier":"colors-unified-accessible-indigo-light.png","alt":"R-86,G-74,B-222","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/e326f52473ede4e5427208f9929196d9/colors-unified-accessible-indigo-light%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/6377c830715ed85a8028ad086c9dd51f/colors-unified-accessible-indigo-light~dark%402x.png","traits":["2x","dark"]}]},"ios-accessible-systemgray5dark.png":{"alt":"R-54,G-54,B-56","variants":[{"url":"https://docs-assets.developer.apple.com/published/aacb35c6af213ef544f77d26df56df39/ios-accessible-systemgray5dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/e211241a8701e439e6bdc4915789e6b2/ios-accessible-systemgray5dark~dark%402x.png","traits":["2x","dark"]}],"identifier":"ios-accessible-systemgray5dark.png","type":"image"},"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedTextColor":{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedTextColor","title":"unemphasizedSelectedTextColor","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"kind":"identifier","text":"unemphasizedSelectedTextColor"},{"kind":"text","text":": "},{"text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor","kind":"typeIdentifier"}],"url":"/documentation/AppKit/NSColor/unemphasizedSelectedTextColor","kind":"symbol","type":"topic","role":"symbol","abstract":[{"type":"text","text":"The color to use for selected text in an unemphasized context."}]},"colors-unified-green-dark.png":{"identifier":"colors-unified-green-dark.png","variants":[{"url":"https://docs-assets.developer.apple.com/published/7724e5dd4f60d300eaffe45c9a5e1f9d/colors-unified-green-dark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/f8a83fc5d825c4a9e4f1d9813520053e/colors-unified-green-dark~dark%402x.png"}],"type":"image","alt":"R-48,G-209,B-88"},"accessibility.svg":{"type":"image","alt":"The Accessibility icon.","variants":[{"svgID":"accessibility","traits":["1x","light"],"url":"https://docs-assets.developer.apple.com/published/83c941607786e0ba1f582082f4e94361/accessibility.svg"}],"identifier":"accessibility.svg"},"doc://com.apple.documentation/documentation/AppKit/NSColor/secondaryLabelColor":{"url":"/documentation/AppKit/NSColor/secondaryLabelColor","kind":"symbol","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"secondaryLabelColor","kind":"identifier"},{"text":": ","kind":"text"},{"text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor","kind":"typeIdentifier"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/secondaryLabelColor","title":"secondaryLabelColor","role":"symbol","abstract":[{"text":"The secondary color to use for text labels.","type":"text"}],"type":"topic"},"colors-unified-yellow-dark.png":{"alt":"R-255,G-214,B-0","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/80c02086ccc5f013058932129cf9c6d3/colors-unified-yellow-dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/52cccc30652d2fbb806ff41d88bdd56f/colors-unified-yellow-dark~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-yellow-dark.png","type":"image"},"colors-unified-accessible-cyan-dark.png":{"type":"image","identifier":"colors-unified-accessible-cyan-dark.png","alt":"R-109,G-217,B-255","variants":[{"url":"https://docs-assets.developer.apple.com/published/6d3ef826eb37c61642d57f798de4d14f/colors-unified-accessible-cyan-dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/e7b37c5c344729946728c72a412fa7c4/colors-unified-accessible-cyan-dark~dark%402x.png","traits":["2x","dark"]}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/separatorColor":{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/separatorColor","kind":"symbol","url":"/documentation/AppKit/NSColor/separatorColor","type":"topic","abstract":[{"type":"text","text":"The color to use for separators between different sections of content."}],"title":"separatorColor","role":"symbol","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"kind":"identifier","text":"separatorColor"},{"kind":"text","text":": "},{"preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor","kind":"typeIdentifier"}]},"overview.svg":{"alt":"An icon of a grid comprised of four squares.","variants":[{"traits":["1x","light"],"svgID":"overview","url":"https://docs-assets.developer.apple.com/published/c9d2e563aa23997588edd7b4538f6c5b/overview.svg"}],"identifier":"overview.svg","type":"image"},"doc://com.apple.documentation/documentation/BundleResources/Information-Property-List/UIWhitePointAdaptivityStyle":{"title":"UIWhitePointAdaptivityStyle","kind":"symbol","url":"/documentation/BundleResources/Information-Property-List/UIWhitePointAdaptivityStyle","type":"topic","role":"symbol","identifier":"doc://com.apple.documentation/documentation/BundleResources/Information-Property-List/UIWhitePointAdaptivityStyle","abstract":[{"text":"The app’s white-point adaptivity style, enabled on devices with True Tone displays.","type":"text"}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedContentBackgroundColor":{"kind":"symbol","abstract":[{"type":"text","text":"The color to use for selected and unemphasized content."}],"url":"/documentation/AppKit/NSColor/unemphasizedSelectedContentBackgroundColor","role":"symbol","title":"unemphasizedSelectedContentBackgroundColor","type":"topic","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedContentBackgroundColor","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"text":"unemphasizedSelectedContentBackgroundColor","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor"}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/controlTextColor":{"title":"controlTextColor","kind":"symbol","url":"/documentation/AppKit/NSColor/controlTextColor","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"text":"controlTextColor","kind":"identifier"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/controlTextColor","role":"symbol","type":"topic","abstract":[{"text":"The color to use for text on enabled controls.","type":"text"}]},"doc://com.apple.documentation/documentation/UIKit/UIColor/secondarySystemBackground":{"title":"secondarySystemBackground","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"secondarySystemBackground","kind":"identifier"},{"text":": ","kind":"text"},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}],"role":"symbol","type":"topic","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/secondarySystemBackground","abstract":[{"text":"The color for content layered on top of the main background.","type":"text"}],"kind":"symbol","url":"/documentation/UIKit/UIColor/secondarySystemBackground"},"colors-unified-accessible-red-light.png":{"identifier":"colors-unified-accessible-red-light.png","alt":"R-233,G-21,B-45","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/5b3473fcd986facfdee26a24601c7082/colors-unified-accessible-red-light%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/550b81ae10dc76869bf3bda9812ace09/colors-unified-accessible-red-light~dark%402x.png"}],"type":"image"},"colors-unified-red-light.png":{"type":"image","identifier":"colors-unified-red-light.png","alt":"R-255,G-56,B-60","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/56ba9eebe119d2e1b3063503a2eb45b7/colors-unified-red-light%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/ea915f0b2fae9ecabba29a63e90d25c4/colors-unified-red-light~dark%402x.png"}]},"color.svg":{"variants":[{"svgID":"color","url":"https://docs-assets.developer.apple.com/published/d8868e121f0aff9e53911d53a00e1c1a/color.svg","traits":["1x","light"]}],"identifier":"color.svg","type":"image","alt":"An icon of a paint palette that suggests the use of color."},"doc://com.apple.documentation/documentation/SwiftUI/Color/red":{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/red","fragments":[{"text":"static","kind":"keyword"},{"kind":"text","text":" "},{"kind":"keyword","text":"let"},{"text":" ","kind":"text"},{"text":"red","kind":"identifier"},{"kind":"text","text":": "},{"text":"Color","preciseIdentifier":"s:7SwiftUI5ColorV","kind":"typeIdentifier"}],"title":"red","abstract":[{"type":"text","text":"A context-dependent red color suitable for use in UI elements."}],"type":"topic","kind":"symbol","url":"/documentation/SwiftUI/Color/red","role":"symbol"},"doc://com.apple.documentation/documentation/AppKit/NSColor/disabledControlTextColor":{"fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"disabledControlTextColor"},{"kind":"text","text":": "},{"text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor","kind":"typeIdentifier"}],"kind":"symbol","abstract":[{"text":"The color to use for text on disabled controls.","type":"text"}],"title":"disabledControlTextColor","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/disabledControlTextColor","url":"/documentation/AppKit/NSColor/disabledControlTextColor","type":"topic","role":"symbol"},"doc://com.apple.documentation/documentation/UIKit/UIColor/quaternaryLabel":{"type":"topic","url":"/documentation/UIKit/UIColor/quaternaryLabel","abstract":[{"type":"text","text":"The color for text labels that contain quaternary content."}],"title":"quaternaryLabel","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"quaternaryLabel"},{"kind":"text","text":": "},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}],"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/quaternaryLabel","role":"symbol","kind":"symbol"},"colors-unified-yellow-light.png":{"identifier":"colors-unified-yellow-light.png","type":"image","alt":"R-255,G-204,B-0","variants":[{"url":"https://docs-assets.developer.apple.com/published/bebac431675840fa7e0e70cce0a6eb76/colors-unified-yellow-light%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/197fb92a719822d951c8069c1e9f59c3/colors-unified-yellow-light~dark%402x.png"}]},"colors-unified-accessible-blue-dark.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/07b7bcb2d65911636342cee25db1f953/colors-unified-accessible-blue-dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/f28b5b18d9fc9e1ae8c4930a8dd1b055/colors-unified-accessible-blue-dark~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-accessible-blue-dark.png","alt":"R-92,G-184,B-255","type":"image"},"doc://com.apple.documentation/documentation/AppKit/NSColor/gridColor":{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/gridColor","kind":"symbol","url":"/documentation/AppKit/NSColor/gridColor","type":"topic","abstract":[{"type":"text","text":"The color to use for the optional gridlines, such as those in a table view."}],"title":"gridColor","role":"symbol","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"text":"gridColor","kind":"identifier"},{"text":": ","kind":"text"},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}]},"doc://com.apple.documentation/documentation/UIKit/UIColor/link":{"abstract":[{"type":"text","text":"The specified color for links."}],"fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"text":"link","kind":"identifier"},{"text":": ","kind":"text"},{"text":"UIColor","preciseIdentifier":"c:objc(cs)UIColor","kind":"typeIdentifier"}],"role":"symbol","title":"link","kind":"symbol","url":"/documentation/UIKit/UIColor/link","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/link","type":"topic"},"color-liquid-glass-overview-color-over-tab-bar":{"type":"image","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/834b8a7e8e78fb18e3f7de7b8453ca41/color-liquid-glass-overview-color-over-tab-bar%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/e310b9cbc58ec3049d84140f24b5b41b/color-liquid-glass-overview-color-over-tab-bar~dark%402x.png"}],"identifier":"color-liquid-glass-overview-color-over-tab-bar","alt":"A screenshot of a tab bar in iOS, with the first tab selected. The symbol and text label of the selected tab bar item are blue."},"ios-accessible-systemgray4dark.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/6439d861c1fe8a41615d5f09d3cde938/ios-accessible-systemgray4dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/4ef8ddfba543d3508a474f75f7b85ee0/ios-accessible-systemgray4dark~dark%402x.png","traits":["2x","dark"]}],"alt":"R-68,G-68,B-70","type":"image","identifier":"ios-accessible-systemgray4dark.png"},"ios-accessible-systemgray6dark.png":{"identifier":"ios-accessible-systemgray6dark.png","alt":"R-36,G-36,B-38","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/5dc6249020925c5ec09f88f8adc9bbaa/ios-accessible-systemgray6dark%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/abcc9796e953856c4c11b0ff83f470b8/ios-accessible-systemgray6dark~dark%402x.png"}],"type":"image"},"checkmark.png":{"identifier":"checkmark.png","alt":"A checkmark in a circle to indicate correct usage.","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png"}],"type":"image"},"doc://com.apple.documentation/documentation/SwiftUI/Color/mint":{"abstract":[{"text":"A context-dependent mint color suitable for use in UI elements.","type":"text"}],"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/mint","url":"/documentation/SwiftUI/Color/mint","type":"topic","kind":"symbol","title":"mint","fragments":[{"text":"static","kind":"keyword"},{"text":" ","kind":"text"},{"text":"let","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"mint"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","text":"Color","preciseIdentifier":"s:7SwiftUI5ColorV"}],"role":"symbol"},"colors-unified-accessible-brown-light.png":{"alt":"R-149,G-109,B-81","variants":[{"url":"https://docs-assets.developer.apple.com/published/c80a760835a2bc94a68337d0208a469e/colors-unified-accessible-brown-light%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/f97f34fd81b3a8277030d77ffc3a92cd/colors-unified-accessible-brown-light~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-accessible-brown-light.png","type":"image"},"color-context-light-mode-high-contrast":{"type":"image","alt":"A screenshot of the Notes app in iOS with the light system appearance and increased contrast. The Notes app is open to a note with the text 'Note'. The text is selected, which shows a yellow selection highlight and text editing menu. The Done button appears in the upper-right corner. The Liquid Glass background of the button is yellow, and its label, which shows a checkmark, is black. The shade of yellow is darker to provide more contrast and differentiation against the note's white background.","variants":[{"url":"https://docs-assets.developer.apple.com/published/b8d64ca399270b0369ac2eba09826f1a/color-context-light-mode-high-contrast%402x.png","traits":["2x","light"]}],"identifier":"color-context-light-mode-high-contrast"},"doc://com.apple.documentation/documentation/SwiftUI/Color/gray":{"kind":"symbol","title":"gray","type":"topic","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/gray","role":"symbol","abstract":[{"text":"A context-dependent gray color suitable for use in UI elements.","type":"text"}],"url":"/documentation/SwiftUI/Color/gray","fragments":[{"kind":"keyword","text":"static"},{"text":" ","kind":"text"},{"text":"let","kind":"keyword"},{"kind":"text","text":" "},{"text":"gray","kind":"identifier"},{"kind":"text","text":": "},{"preciseIdentifier":"s:7SwiftUI5ColorV","text":"Color","kind":"typeIdentifier"}]},"colors-unified-accessible-cyan-light.png":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/e54287c8eb8d532283dac9d646886953/colors-unified-accessible-cyan-light%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/0bbe8e2745424395e5d541426c12ca5a/colors-unified-accessible-cyan-light~dark%402x.png"}],"identifier":"colors-unified-accessible-cyan-light.png","type":"image","alt":"R-0,G-126,B-174"},"ios-default-systemgray5.png":{"alt":"R-229,G-229,B-234","type":"image","identifier":"ios-default-systemgray5.png","variants":[{"url":"https://docs-assets.developer.apple.com/published/91f296b3990bfe6dcd28b1804c803581/ios-default-systemgray5%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/b7229e6eceb56a0b58d8c415a2c1b22e/ios-default-systemgray5~dark%402x.png"}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/controlColor":{"fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"controlColor"},{"text":": ","kind":"text"},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/controlColor","title":"controlColor","type":"topic","abstract":[{"type":"text","text":"The color to use for the flat surfaces of a control."}],"kind":"symbol","role":"symbol","url":"/documentation/AppKit/NSColor/controlColor"},"ios-default-systemgray3dark.png":{"type":"image","alt":"R-72,G-72,B-74","identifier":"ios-default-systemgray3dark.png","variants":[{"url":"https://docs-assets.developer.apple.com/published/d99ad33dcdd426585e7107e1b130d713/ios-default-systemgray3dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/0311ff0cb2b3fd13297ba44f8322e16e/ios-default-systemgray3dark~dark%402x.png","traits":["2x","dark"]}]},"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray2":{"role":"symbol","kind":"symbol","abstract":[{"type":"text","text":"A second-level shade of gray that adapts to the environment."}],"title":"systemGray2","url":"/documentation/UIKit/UIColor/systemGray2","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"kind":"identifier","text":"systemGray2"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","text":"UIColor","preciseIdentifier":"c:objc(cs)UIColor"}],"type":"topic","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray2"},"ios-default-systemgray2dark.png":{"identifier":"ios-default-systemgray2dark.png","type":"image","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/1f681e808c0f4f35a2e7642872719c8b/ios-default-systemgray2dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/3ec071e8436fcb86681d7d5c8ea70828/ios-default-systemgray2dark~dark%402x.png","traits":["2x","dark"]}],"alt":"R-99,G-99,B-102"},"colors-unified-accessible-pink-light.png":{"type":"image","identifier":"colors-unified-accessible-pink-light.png","alt":"R-231,G-18,B-77","variants":[{"url":"https://docs-assets.developer.apple.com/published/d696af68031ce91a63330e0469ff592b/colors-unified-accessible-pink-light%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/75c97d6808fde0ccb33248928f843baa/colors-unified-accessible-pink-light~dark%402x.png"}]},"doc://com.apple.documentation/documentation/UIKit/UIColor/label":{"type":"topic","role":"symbol","kind":"symbol","abstract":[{"text":"The color for text labels that contain primary content.","type":"text"}],"url":"/documentation/UIKit/UIColor/label","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"label","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor","text":"UIColor"}],"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/label","title":"label"},"doc://com.apple.documentation/documentation/AppKit/NSColor/keyboardFocusIndicatorColor":{"url":"/documentation/AppKit/NSColor/keyboardFocusIndicatorColor","role":"symbol","title":"keyboardFocusIndicatorColor","abstract":[{"type":"text","text":"The color to use for the keyboard focus ring around controls."}],"kind":"symbol","type":"topic","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"keyboardFocusIndicatorColor"},{"kind":"text","text":": "},{"kind":"typeIdentifier","text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/keyboardFocusIndicatorColor"},"doc://com.apple.documentation/documentation/AppKit/NSColor/controlBackgroundColor":{"title":"controlBackgroundColor","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/controlBackgroundColor","type":"topic","url":"/documentation/AppKit/NSColor/controlBackgroundColor","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"text":"controlBackgroundColor","kind":"identifier"},{"kind":"text","text":": "},{"text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor","kind":"typeIdentifier"}],"abstract":[{"type":"text","text":"The color to use for the background of large controls, such as scroll views or table views."}],"role":"symbol","kind":"symbol"},"doc://com.apple.documentation/documentation/UIKit/UIColor/secondaryLabel":{"type":"topic","role":"symbol","kind":"symbol","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"secondaryLabel"},{"text":": ","kind":"text"},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}],"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/secondaryLabel","abstract":[{"type":"text","text":"The color for text labels that contain secondary content."}],"title":"secondaryLabel","url":"/documentation/UIKit/UIColor/secondaryLabel"},"doc://com.apple.documentation/documentation/SwiftUI/Color/teal":{"type":"topic","abstract":[{"text":"A context-dependent teal color suitable for use in UI elements.","type":"text"}],"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/teal","title":"teal","url":"/documentation/SwiftUI/Color/teal","kind":"symbol","role":"symbol","fragments":[{"kind":"keyword","text":"static"},{"text":" ","kind":"text"},{"text":"let","kind":"keyword"},{"kind":"text","text":" "},{"text":"teal","kind":"identifier"},{"text":": ","kind":"text"},{"text":"Color","kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI5ColorV"}]},"doc://com.apple.documentation/documentation/UIKit/UIColor/secondarySystemGroupedBackground":{"fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"secondarySystemGroupedBackground"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","text":"UIColor","preciseIdentifier":"c:objc(cs)UIColor"}],"kind":"symbol","abstract":[{"type":"text","text":"The color for content layered on top of the main background of your grouped interface."}],"title":"secondarySystemGroupedBackground","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/secondarySystemGroupedBackground","type":"topic","url":"/documentation/UIKit/UIColor/secondarySystemGroupedBackground","role":"symbol"},"doc://com.apple.documentation/documentation/AppKit/NSColor/alternatingContentBackgroundColors":{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/alternatingContentBackgroundColors","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"alternatingContentBackgroundColors"},{"kind":"text","text":": ["},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"},{"text":"]","kind":"text"}],"abstract":[{"type":"text","text":"The colors to use for alternating content, typically found in table views and collection views."}],"kind":"symbol","title":"alternatingContentBackgroundColors","url":"/documentation/AppKit/NSColor/alternatingContentBackgroundColors","role":"symbol","type":"topic"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/complications":{"kind":"article","role":"article","images":[{"identifier":"components-complications-thumbnail.png","type":"card"}],"type":"topic","url":"/design/human-interface-guidelines/complications","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/complications","title":"Complications","abstract":[{"text":"A complication displays timely, relevant information on the watch face, where people can view it each time they raise their wrist.","type":"text"}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/shadowColor":{"kind":"symbol","role":"symbol","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/shadowColor","title":"shadowColor","type":"topic","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"kind":"identifier","text":"shadowColor"},{"kind":"text","text":": "},{"preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor","kind":"typeIdentifier"}],"abstract":[{"text":"The color to use for virtual shadows cast by raised objects on the screen.","type":"text"}],"url":"/documentation/AppKit/NSColor/shadowColor"},"colors-unified-teal-dark.png":{"identifier":"colors-unified-teal-dark.png","alt":"R-0,G-210,B-224","type":"image","variants":[{"url":"https://docs-assets.developer.apple.com/published/d02bd29f4ba3580e84756f8c332fd677/colors-unified-teal-dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/86c0f6289b89d95575543329e6ed4e6a/colors-unified-teal-dark~dark%402x.png","traits":["2x","dark"]}]},"colors-liquid-glass-usage-incorrect":{"alt":"A screenshot of the top half of an iPhone app that shows a toolbar with several buttons. All of the buttons in the toolbar use a blue accent color for their Liquid Glass background.","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/e827bfd64dd5e75b1dbcca2a08144e16/colors-liquid-glass-usage-incorrect%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/f8aa7809b87b4b5e38ec90e57bc4fbaf/colors-liquid-glass-usage-incorrect~dark%402x.png"}],"identifier":"colors-liquid-glass-usage-incorrect","type":"image"},"doc://com.apple.documentation/documentation/UIKit/UIColor/opaqueSeparator":{"url":"/documentation/UIKit/UIColor/opaqueSeparator","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"text":"opaqueSeparator","kind":"identifier"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor","text":"UIColor"}],"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/opaqueSeparator","kind":"symbol","role":"symbol","type":"topic","title":"opaqueSeparator","abstract":[{"type":"text","text":"The color for borders or divider lines that hides any underlying content."}]},"doc://com.apple.HIG/design/human-interface-guidelines":{"abstract":[{"type":"text","text":"The HIG contains guidance and best practices that can help you design a"},{"type":"text","text":" "},{"text":"great experience for any Apple platform.","type":"text"}],"url":"/design/human-interface-guidelines","type":"topic","identifier":"doc://com.apple.HIG/design/human-interface-guidelines","role":"collection","kind":"article","images":[{"identifier":"human-interface-guidelines-page-image-card.png","type":"card"}],"title":"Human Interface Guidelines"},"colors-unified-accessible-orange-dark.png":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/c82984219db600ea8396f4fd1933fc19/colors-unified-accessible-orange-dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/5b36b0f8fab6a36ffa0944d6faf216cc/colors-unified-accessible-orange-dark~dark%402x.png","traits":["2x","dark"]}],"type":"image","alt":"R-255,G-160,B-86","identifier":"colors-unified-accessible-orange-dark.png"},"dark-mode.svg":{"variants":[{"svgID":"dark-mode","traits":["1x","light"],"url":"https://docs-assets.developer.apple.com/published/d0d8ac151e6b6513f9e33a90b8cff011/dark-mode.svg"}],"type":"image","identifier":"dark-mode.svg","alt":"An icon of concentric circles with half-filled areas that suggests the presence of light and dark."},"foundations.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/0590ed28862c0ec2056b2471f845e109/foundations%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/a3cb140be4b561b83c486712febaf344/foundations~dark%402x.png","traits":["2x","dark"]}],"alt":"","type":"image","identifier":"foundations.png"},"doc://com.apple.documentation/documentation/AppKit/NSColor/quaternaryLabelColor":{"role":"symbol","kind":"symbol","abstract":[{"type":"text","text":"The quaternary color to use for text labels and separators."}],"title":"quaternaryLabelColor","type":"topic","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"text":"var","kind":"keyword"},{"kind":"text","text":" "},{"text":"quaternaryLabelColor","kind":"identifier"},{"kind":"text","text":": "},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/quaternaryLabelColor","url":"/documentation/AppKit/NSColor/quaternaryLabelColor"},"ios-accessible-systemgray.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/5d86cbc8b4ddef8b68954882b4c87a18/ios-accessible-systemgray%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/e625223100131f5dee931632de898184/ios-accessible-systemgray~dark%402x.png","traits":["2x","dark"]}],"alt":"R-108,G-108,B-112","identifier":"ios-accessible-systemgray.png","type":"image"},"color-graphic-wide-color.png":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/adbc51703950572ace3440f957f42f0b/color-graphic-wide-color%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/a5cd22119464a50d933891b8c6968350/color-graphic-wide-color~dark%402x.png","traits":["2x","dark"]}],"type":"image","identifier":"color-graphic-wide-color.png","alt":"Diagram showing the colors included in the sRGB space, compared to the larger number of colors included in the P3 color space."},"ios-accessible-systemgray4.png":{"alt":"R-188,G-188,B-192","identifier":"ios-accessible-systemgray4.png","type":"image","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/93644725b33daf923f7e3a146e9b2d42/ios-accessible-systemgray4%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/4dd6e0fd91458cf508ac840976927f08/ios-accessible-systemgray4~dark%402x.png"}]},"crossout.png":{"alt":"An X in a circle to indicate incorrect usage.","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png"}],"identifier":"crossout.png","type":"image"},"colors-unified-accessible-green-light.png":{"alt":"R-0,G-137,B-50","type":"image","variants":[{"url":"https://docs-assets.developer.apple.com/published/51471c6578d192e9dae6f40d8ace1835/colors-unified-accessible-green-light%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/b90190fdd5be94345d7501933ba44e68/colors-unified-accessible-green-light~dark%402x.png","traits":["2x","dark"]}],"identifier":"colors-unified-accessible-green-light.png"},"doc://com.apple.documentation/documentation/SwiftUI/Color/blue":{"type":"topic","url":"/documentation/SwiftUI/Color/blue","abstract":[{"text":"A context-dependent blue color suitable for use in UI elements.","type":"text"}],"title":"blue","fragments":[{"kind":"keyword","text":"static"},{"text":" ","kind":"text"},{"text":"let","kind":"keyword"},{"kind":"text","text":" "},{"text":"blue","kind":"identifier"},{"kind":"text","text":": "},{"text":"Color","kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI5ColorV"}],"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/blue","role":"symbol","kind":"symbol"},"doc://com.apple.documentation/documentation/technologies":{"type":"topic","url":"/documentation/technologies","title":"Technologies","abstract":[{"type":"text","text":""}],"identifier":"doc://com.apple.documentation/documentation/technologies","kind":"technologies","role":"overview"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/accessibility":{"kind":"article","type":"topic","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/accessibility","images":[{"identifier":"accessibility.svg","type":"icon"},{"type":"card","identifier":"foundations-accessibility-thumbnail.png"}],"url":"/design/human-interface-guidelines/accessibility","role":"article","title":"Accessibility","abstract":[{"type":"text","text":"Accessible user interfaces empower everyone to have a great experience with your app or game."}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedControlTextColor":{"kind":"symbol","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedControlTextColor","title":"selectedControlTextColor","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"selectedControlTextColor"},{"text":": ","kind":"text"},{"text":"NSColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor"}],"role":"symbol","url":"/documentation/AppKit/NSColor/selectedControlTextColor","type":"topic","abstract":[{"type":"text","text":"The color to use for text in a selected control—that is, a control being clicked or dragged."}]},"color-context-light-mode":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/7bf34491d03ed278b571bd4597dfa30e/color-context-light-mode%402x.png"}],"type":"image","alt":"A screenshot of the Notes app in iOS with the light system appearance and default contrast. The Notes app is open to a note with the text 'Note'. The text is selected, which shows a yellow selection highlight and text editing menu. The Done button appears in the upper-right corner. The Liquid Glass background of the button is yellow, and its label, which shows a checkmark, is white. The shade of yellow is vibrant.","identifier":"color-context-light-mode"},"ios-default-systemgray2.png":{"type":"image","alt":"R-174,G-174,B-178","variants":[{"url":"https://docs-assets.developer.apple.com/published/d00617ff05181a53d2cb5ddf143d502e/ios-default-systemgray2%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/58db62a1037f1c6b1fa2b0bd93a6c8c8/ios-default-systemgray2~dark%402x.png","traits":["2x","dark"]}],"identifier":"ios-default-systemgray2.png"},"https://developer.apple.com/design/resources/":{"title":"Apple Design Resources","url":"https://developer.apple.com/design/resources/","type":"link","identifier":"https://developer.apple.com/design/resources/","titleInlineContent":[{"text":"Apple Design Resources","type":"text"}]},"doc://com.apple.HIG/design/Human-Interface-Guidelines/dark-mode":{"role":"article","kind":"article","abstract":[{"text":"Dark Mode is a systemwide appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments.","type":"text"}],"type":"topic","title":"Dark Mode","url":"/design/human-interface-guidelines/dark-mode","images":[{"identifier":"dark-mode.svg","type":"icon"},{"type":"card","identifier":"foundations-dark-mode-thumbnail.png"}],"identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/dark-mode"},"doc://com.apple.documentation/videos/play/wwdc2025/219":{"images":[{"type":"card","identifier":"5CD0E251-424E-490F-89CF-1E64848209A6"}],"abstract":[{"text":"Liquid Glass unifies Apple platform design language while providing a more dynamic and expressive user experience. Get to know the design principles of Liquid Glass, explore its core optical and physical properties, and learn where to use it and why.","type":"text"}],"url":"https://developer.apple.com/videos/play/wwdc2025/219","identifier":"doc://com.apple.documentation/videos/play/wwdc2025/219","type":"topic","title":"Meet Liquid Glass","kind":"article","role":"article"},"colors-unified-mint-light.png":{"type":"image","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/5d07acb38b9d0d7098f0b92456a7d27c/colors-unified-mint-light%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/fb878152db5857031038f175540f05ac/colors-unified-mint-light~dark%402x.png","traits":["2x","dark"]}],"alt":"R-0,G-200,B-179","identifier":"colors-unified-mint-light.png"},"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedContentBackgroundColor":{"role":"symbol","type":"topic","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedContentBackgroundColor","kind":"symbol","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"selectedContentBackgroundColor","kind":"identifier"},{"kind":"text","text":": "},{"preciseIdentifier":"c:objc(cs)NSColor","kind":"typeIdentifier","text":"NSColor"}],"abstract":[{"type":"text","text":"The color to use for the background of selected and emphasized content."}],"url":"/documentation/AppKit/NSColor/selectedContentBackgroundColor","title":"selectedContentBackgroundColor"},"doc://com.apple.documentation/documentation/SwiftUI/Color/indigo":{"role":"symbol","url":"/documentation/SwiftUI/Color/indigo","type":"topic","kind":"symbol","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/indigo","fragments":[{"text":"static","kind":"keyword"},{"text":" ","kind":"text"},{"text":"let","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"indigo"},{"text":": ","kind":"text"},{"text":"Color","kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI5ColorV"}],"title":"indigo","abstract":[{"text":"A context-dependent indigo color suitable for use in UI elements.","type":"text"}]},"colors-unified-accessible-mint-light.png":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/d24198fce4dd42183e7b35abc9b67c20/colors-unified-accessible-mint-light%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/1040c03509c4025ee26a0bf9791e3b1e/colors-unified-accessible-mint-light~dark%402x.png","traits":["2x","dark"]}],"type":"image","identifier":"colors-unified-accessible-mint-light.png","alt":"R-0,G-133,B-117"},"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiarySystemGroupedBackground":{"fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"tertiarySystemGroupedBackground"},{"text":": ","kind":"text"},{"preciseIdentifier":"c:objc(cs)UIColor","text":"UIColor","kind":"typeIdentifier"}],"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiarySystemGroupedBackground","type":"topic","url":"/documentation/UIKit/UIColor/tertiarySystemGroupedBackground","kind":"symbol","role":"symbol","abstract":[{"text":"The color for content layered on top of secondary backgrounds of your grouped interface.","type":"text"}],"title":"tertiarySystemGroupedBackground"},"colors-unified-accessible-brown-dark.png":{"identifier":"colors-unified-accessible-brown-dark.png","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/3c6062e007c9d60e4684d063b3618786/colors-unified-accessible-brown-dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/50575ab81511a462d18bc4b9e70a6d4e/colors-unified-accessible-brown-dark~dark%402x.png","traits":["2x","dark"]}],"alt":"R-219,G-166,B-121","type":"image"},"foundations-accessibility-thumbnail.png":{"alt":"A sketch of the Accessibility icon. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","variants":[{"url":"https://docs-assets.developer.apple.com/published/8b7b11d06dd958f4e9449f0a5acdadbd/foundations-accessibility-thumbnail%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/fea544b1ff706c10ba3a1d06f528da46/foundations-accessibility-thumbnail~dark%402x.png"}],"type":"image","identifier":"foundations-accessibility-thumbnail.png"},"ios-accessible-systemgray3.png":{"alt":"R-174,G-174,B-178","type":"image","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/d00617ff05181a53d2cb5ddf143d502e/ios-accessible-systemgray3%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/58db62a1037f1c6b1fa2b0bd93a6c8c8/ios-accessible-systemgray3~dark%402x.png"}],"identifier":"ios-accessible-systemgray3.png"},"ios-accessible-systemgray2.png":{"type":"image","identifier":"ios-accessible-systemgray2.png","alt":"R-142,G-142,B-147","variants":[{"url":"https://docs-assets.developer.apple.com/published/cc1289b6fd4b76c79bbeda356463232a/ios-accessible-systemgray2%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/fc7844da63dca3eb793031b3fcad009c/ios-accessible-systemgray2~dark%402x.png","traits":["2x","dark"]}]},"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedTextBackgroundColor":{"type":"topic","role":"symbol","title":"unemphasizedSelectedTextBackgroundColor","kind":"symbol","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"unemphasizedSelectedTextBackgroundColor","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor"}],"url":"/documentation/AppKit/NSColor/unemphasizedSelectedTextBackgroundColor","abstract":[{"type":"text","text":"The color to use for the text background in an unemphasized context."}],"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/unemphasizedSelectedTextBackgroundColor"},"doc://com.apple.documentation/documentation/UIKit/UIColor":{"abstract":[{"text":"An object that stores color data and sometimes opacity.","type":"text"}],"kind":"symbol","role":"symbol","type":"topic","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor","url":"/documentation/UIKit/UIColor","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"identifier","text":"UIColor"}],"title":"UIColor"},"doc://com.apple.documentation/documentation/SwiftUI/Color/yellow":{"identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/yellow","role":"symbol","url":"/documentation/SwiftUI/Color/yellow","type":"topic","kind":"symbol","title":"yellow","fragments":[{"kind":"keyword","text":"static"},{"text":" ","kind":"text"},{"text":"let","kind":"keyword"},{"kind":"text","text":" "},{"text":"yellow","kind":"identifier"},{"kind":"text","text":": "},{"text":"Color","kind":"typeIdentifier","preciseIdentifier":"s:7SwiftUI5ColorV"}],"abstract":[{"type":"text","text":"A context-dependent yellow color suitable for use in UI elements."}]},"doc://com.apple.documentation/documentation/SwiftUI/Color/brown":{"url":"/documentation/SwiftUI/Color/brown","fragments":[{"kind":"keyword","text":"static"},{"text":" ","kind":"text"},{"kind":"keyword","text":"let"},{"kind":"text","text":" "},{"text":"brown","kind":"identifier"},{"kind":"text","text":": "},{"preciseIdentifier":"s:7SwiftUI5ColorV","text":"Color","kind":"typeIdentifier"}],"role":"symbol","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/brown","abstract":[{"text":"A context-dependent brown color suitable for use in UI elements.","type":"text"}],"kind":"symbol","title":"brown","type":"topic"},"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedMenuItemTextColor":{"url":"/documentation/AppKit/NSColor/selectedMenuItemTextColor","kind":"symbol","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedMenuItemTextColor","abstract":[{"text":"The color to use for the text in menu items.","type":"text"}],"role":"symbol","title":"selectedMenuItemTextColor","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"text":"selectedMenuItemTextColor","kind":"identifier"},{"kind":"text","text":": "},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor"}],"type":"topic"},"ios-default-systemgraydark.png":{"alt":"R-142,G-142,B-147","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/cc1289b6fd4b76c79bbeda356463232a/ios-default-systemgraydark%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/fc7844da63dca3eb793031b3fcad009c/ios-default-systemgraydark~dark%402x.png"}],"type":"image","identifier":"ios-default-systemgraydark.png"},"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiaryLabel":{"identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/tertiaryLabel","role":"symbol","title":"tertiaryLabel","url":"/documentation/UIKit/UIColor/tertiaryLabel","abstract":[{"text":"The color for text labels that contain tertiary content.","type":"text"}],"type":"topic","fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"text":"tertiaryLabel","kind":"identifier"},{"text":": ","kind":"text"},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}],"kind":"symbol"},"doc://com.apple.documentation/documentation/SwiftUI/Color/orange":{"abstract":[{"type":"text","text":"A context-dependent orange color suitable for use in UI elements."}],"kind":"symbol","role":"symbol","type":"topic","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/orange","url":"/documentation/SwiftUI/Color/orange","fragments":[{"text":"static","kind":"keyword"},{"kind":"text","text":" "},{"text":"let","kind":"keyword"},{"kind":"text","text":" "},{"kind":"identifier","text":"orange"},{"kind":"text","text":": "},{"kind":"typeIdentifier","text":"Color","preciseIdentifier":"s:7SwiftUI5ColorV"}],"title":"orange"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/color#Color-management":{"title":"Color management","abstract":[],"url":"/design/human-interface-guidelines/color#Color-management","type":"topic","kind":"section","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/color#Color-management"},"doc://com.apple.documentation/documentation/AppKit/NSColor/linkColor":{"url":"/documentation/AppKit/NSColor/linkColor","fragments":[{"kind":"keyword","text":"class"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"kind":"identifier","text":"linkColor"},{"kind":"text","text":": "},{"kind":"typeIdentifier","text":"NSColor","preciseIdentifier":"c:objc(cs)NSColor"}],"role":"symbol","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/linkColor","abstract":[{"text":"The color to use for links.","type":"text"}],"kind":"symbol","type":"topic","title":"linkColor"},"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedControlColor":{"identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/selectedControlColor","abstract":[{"text":"The color to use for the face of a selected control—that is, a control that has been clicked or is being dragged.","type":"text"}],"url":"/documentation/AppKit/NSColor/selectedControlColor","role":"symbol","title":"selectedControlColor","type":"topic","kind":"symbol","fragments":[{"text":"class","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"keyword","text":"var"},{"text":" ","kind":"text"},{"kind":"identifier","text":"selectedControlColor"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor"}]},"doc://com.apple.documentation/documentation/SwiftUI/Color/pink":{"abstract":[{"type":"text","text":"A context-dependent pink color suitable for use in UI elements."}],"title":"pink","identifier":"doc://com.apple.documentation/documentation/SwiftUI/Color/pink","kind":"symbol","url":"/documentation/SwiftUI/Color/pink","fragments":[{"kind":"keyword","text":"static"},{"text":" ","kind":"text"},{"text":"let","kind":"keyword"},{"kind":"text","text":" "},{"text":"pink","kind":"identifier"},{"text":": ","kind":"text"},{"text":"Color","preciseIdentifier":"s:7SwiftUI5ColorV","kind":"typeIdentifier"}],"role":"symbol","type":"topic"},"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray":{"type":"topic","identifier":"doc://com.apple.documentation/documentation/UIKit/UIColor/systemGray","url":"/documentation/UIKit/UIColor/systemGray","role":"symbol","abstract":[{"text":"The standard base gray color that adapts to the environment.","type":"text"}],"kind":"symbol","fragments":[{"text":"class","kind":"keyword"},{"kind":"text","text":" "},{"text":"var","kind":"keyword"},{"text":" ","kind":"text"},{"text":"systemGray","kind":"identifier"},{"kind":"text","text":": "},{"text":"UIColor","kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)UIColor"}],"title":"systemGray"},"components-sidebars-thumbnail.png":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/1b09f6354f299abe909c0aa868ce701a/components-sidebars-thumbnail%402x.png"},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/66bacdd3082a379d530d09c11801fb8e/components-sidebars-thumbnail~dark%402x.png"}],"identifier":"components-sidebars-thumbnail.png","type":"image","alt":"A stylized representation of a portion of a window's sidebar displaying a section and some folders. The image is tinted red to subtly reflect the red in the original six-color Apple logo."},"materials.svg":{"variants":[{"url":"https://docs-assets.developer.apple.com/published/f538168ed881bc4ee6517af5f4d3083c/materials.svg","svgID":"materials","traits":["1x","light"]}],"alt":"An icon of overlapping squares that suggests the use of transparency to hint at background content.","type":"image","identifier":"materials.svg"},"doc://com.apple.documentation/documentation/AppKit/NSColor/alternateSelectedControlTextColor":{"role":"symbol","type":"topic","identifier":"doc://com.apple.documentation/documentation/AppKit/NSColor/alternateSelectedControlTextColor","kind":"symbol","fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"keyword","text":"var"},{"kind":"text","text":" "},{"kind":"identifier","text":"alternateSelectedControlTextColor"},{"text":": ","kind":"text"},{"kind":"typeIdentifier","preciseIdentifier":"c:objc(cs)NSColor","text":"NSColor"}],"abstract":[{"text":"The color to use for text in a selected control.","type":"text"}],"url":"/documentation/AppKit/NSColor/alternateSelectedControlTextColor","title":"alternateSelectedControlTextColor"},"ios-accessible-systemgray5.png":{"type":"image","alt":"R-216,G-216,B-220","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/616159815cf002c39f570affa027c298/ios-accessible-systemgray5%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/244c642510d598463d0c2394ff419c30/ios-accessible-systemgray5~dark%402x.png","traits":["2x","dark"]}],"identifier":"ios-accessible-systemgray5.png"},"colors-unified-accessible-pink-dark.png":{"type":"image","identifier":"colors-unified-accessible-pink-dark.png","alt":"R-255,G-138,B-196","variants":[{"url":"https://docs-assets.developer.apple.com/published/a64993da9a61253e266e411d76c2cefd/colors-unified-accessible-pink-dark%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/5a7e04460249ff709a1dd179409167b0/colors-unified-accessible-pink-dark~dark%402x.png"}]},"foundations-color-intro.png":{"identifier":"foundations-color-intro.png","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/10ec5551985c77cabaeaaaff016cdfd8/foundations-color-intro%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/399ee993cc15dc067a0cd53257163ac3/foundations-color-intro~dark%402x.png","traits":["2x","dark"]}],"alt":"A sketch of a paint palette, suggesting the use of color. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.","type":"image"},"colors-liquid-glass-usage-correct":{"type":"image","identifier":"colors-liquid-glass-usage-correct","alt":"A screenshot of the top half of an iPhone app that shows a toolbar with several buttons. Only the Done button in the toolbar uses a blue accent color for its Liquid Glass background.","variants":[{"url":"https://docs-assets.developer.apple.com/published/ab7c4f530a3df8993ca280afd90e2606/colors-liquid-glass-usage-correct%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/4bcdf2843adc9caecdfc8f8919ed0121/colors-liquid-glass-usage-correct~dark%402x.png","traits":["2x","dark"]}]},"ios-default-systemgray3.png":{"alt":"R-199,G-199,B-204","variants":[{"url":"https://docs-assets.developer.apple.com/published/bcbb9fb97382e52aa09de7239a6edcf7/ios-default-systemgray3%402x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"https://docs-assets.developer.apple.com/published/73ae5824564aef7887735b9ca4dd7ff4/ios-default-systemgray3~dark%402x.png"}],"identifier":"ios-default-systemgray3.png","type":"image"},"ios-accessible-systemgray2dark.png":{"type":"image","identifier":"ios-accessible-systemgray2dark.png","alt":"R-124,G-124,B-128","variants":[{"url":"https://docs-assets.developer.apple.com/published/f941ec556140a435aa9556a993e57e63/ios-accessible-systemgray2dark%402x.png","traits":["2x","light"]},{"url":"https://docs-assets.developer.apple.com/published/a09607f8382407bbfa160033b10133ba/ios-accessible-systemgray2dark~dark%402x.png","traits":["2x","dark"]}]},"colors-unified-cyan-dark.png":{"identifier":"colors-unified-cyan-dark.png","alt":"R-60,G-211,B-254","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/34399c5683f58d0710a50625f2fbca64/colors-unified-cyan-dark%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/788402cbafa6f1644a3a092b0bc32fbd/colors-unified-cyan-dark~dark%402x.png","traits":["2x","dark"]}],"type":"image"},"colors-unified-purple-light.png":{"identifier":"colors-unified-purple-light.png","type":"image","alt":"R-203,G-48,B-224","variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/2f07dfc6c397fba6d0abda5f5051a025/colors-unified-purple-light%402x.png"},{"url":"https://docs-assets.developer.apple.com/published/d595b3ac24b517a72ddb5c3e1770c9e9/colors-unified-purple-light~dark%402x.png","traits":["2x","dark"]}]},"doc://com.apple.HIG/design/Human-Interface-Guidelines/foundations":{"abstract":[{"text":"Understand how fundamental design elements help you create rich experiences.","type":"text"}],"images":[{"type":"icon","identifier":"overview.svg"},{"type":"card","identifier":"foundations.png"}],"identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/foundations","type":"topic","kind":"article","role":"collectionGroup","url":"/design/human-interface-guidelines/foundations","title":"Foundations"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/color#System-colors":{"type":"topic","title":"System colors","abstract":[],"url":"/design/human-interface-guidelines/color#System-colors","kind":"section","identifier":"doc://com.apple.HIG/design/Human-Interface-Guidelines/color#System-colors"},"color-inclusive-color-charts-english":{"variants":[{"traits":["2x","light"],"url":"https://docs-assets.developer.apple.com/published/5969ae10a6eaca6879fb43df4f651e4d/color-inclusive-color-charts-english%402x.png"}],"alt":"An illustration of an upward-trending stock chart in the Stocks app in English. The line of the graph is green to indicate the rising value of the stock during the selected time period.","type":"image","identifier":"color-inclusive-color-charts-english"},"https://developer.apple.com/documentation/uikit/uicolor/secondarylabel":{"url":"https://developer.apple.com/documentation/uikit/uicolor/secondarylabel","title":"secondary text label","type":"link","titleInlineContent":[{"type":"text","text":"secondary text label"}],"identifier":"https://developer.apple.com/documentation/uikit/uicolor/secondarylabel"},"https://developer.apple.com/documentation/uikit/uicolor/separator":{"identifier":"https://developer.apple.com/documentation/uikit/uicolor/separator","url":"https://developer.apple.com/documentation/uikit/uicolor/separator","type":"link","title":"separator","titleInlineContent":[{"text":"separator","type":"text"}]},"human-interface-guidelines-page-image-card.png":{"type":"image","identifier":"human-interface-guidelines-page-image-card.png","variants":[{"url":"https://docs-assets.developer.apple.com/published/5a91c175146ec1b7252733d97d6ae994/human-interface-guidelines-page-image-card%402x.png","traits":["2x","light"]}],"alt":"An illustration of several Liquid Glass components such as toggles, sliders, and buttons, atop a neutral background. The transparent components cast shadows on the background and allow their colored elements, like a blue slider track and a green toggle backing, to show through, highlighting the Liquid Glass material's lensing effect."}},"variantOverrides":[{"traits":[{"interfaceLanguage":"occ"}],"patch":[{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGroupedBackground/title","value":"systemGroupedBackgroundColor"},{"value":[{"text":"systemGroupedBackgroundColor","kind":"identifier"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGroupedBackground/fragments","op":"replace"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1placeholderTextColor/fragments","value":[{"text":"placeholderTextColor","kind":"identifier"}]},{"value":[{"text":"selectedTextBackgroundColor","kind":"identifier"}],"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1selectedTextBackgroundColor/fragments"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1highlightColor/fragments","value":[{"text":"highlightColor","kind":"identifier"}]},{"value":"systemBackgroundColor","op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemBackground/title"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemBackground/fragments","op":"replace","value":[{"kind":"identifier","text":"systemBackgroundColor"}]},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1underPageBackgroundColor/fragments","value":[{"text":"underPageBackgroundColor","kind":"identifier"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1placeholderText/title","op":"replace","value":"placeholderTextColor"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1placeholderText/fragments","value":[{"text":"placeholderTextColor","kind":"identifier"}],"op":"replace"},{"op":"replace","value":[{"kind":"identifier","text":"windowFrameTextColor"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1windowFrameTextColor/fragments"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1textColor/fragments","value":[{"text":"textColor","kind":"identifier"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray6/title","value":"systemGray6Color","op":"replace"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray6/fragments","op":"replace","value":[{"text":"systemGray6Color","kind":"identifier"}]},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1controlAccentColor/fragments","value":[{"text":"controlAccentColor","kind":"identifier"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1tertiarySystemBackground/title","value":"tertiarySystemBackgroundColor","op":"replace"},{"op":"replace","value":[{"text":"tertiarySystemBackgroundColor","kind":"identifier"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1tertiarySystemBackground/fragments"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray3/title","op":"replace","value":"systemGray3Color"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray3/fragments","value":[{"text":"systemGray3Color","kind":"identifier"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1tertiaryLabelColor/fragments","op":"replace","value":[{"kind":"identifier","text":"tertiaryLabelColor"}]},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1findHighlightColor/fragments","value":[{"text":"findHighlightColor","kind":"identifier"}]},{"value":"separatorColor","op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1separator/title"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1separator/fragments","value":[{"text":"separatorColor","kind":"identifier"}],"op":"replace"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1currentControlTint/fragments","value":[{"kind":"identifier","text":"currentControlTint"}]},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1headerTextColor/fragments","value":[{"kind":"identifier","text":"headerTextColor"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1selectedTextColor/fragments","op":"replace","value":[{"text":"selectedTextColor","kind":"identifier"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray4/title","value":"systemGray4Color","op":"replace"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray4/fragments","value":[{"kind":"identifier","text":"systemGray4Color"}],"op":"replace"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray5/title","value":"systemGray5Color"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray5/fragments","value":[{"text":"systemGray5Color","kind":"identifier"}],"op":"replace"},{"value":[{"text":"textBackgroundColor","kind":"identifier"}],"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1textBackgroundColor/fragments"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1windowBackgroundColor/fragments","value":[{"text":"windowBackgroundColor","kind":"identifier"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1labelColor/fragments","value":[{"kind":"identifier","text":"labelColor"}],"op":"replace"},{"op":"replace","value":[{"kind":"identifier","text":"unemphasizedSelectedTextColor"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1unemphasizedSelectedTextColor/fragments"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1secondaryLabelColor/fragments","value":[{"kind":"identifier","text":"secondaryLabelColor"}],"op":"replace"},{"value":[{"kind":"identifier","text":"separatorColor"}],"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1separatorColor/fragments"},{"op":"replace","value":[{"text":"unemphasizedSelectedContentBackgroundColor","kind":"identifier"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1unemphasizedSelectedContentBackgroundColor/fragments"},{"value":[{"text":"controlTextColor","kind":"identifier"}],"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1controlTextColor/fragments"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1secondarySystemBackground/title","value":"secondarySystemBackgroundColor"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1secondarySystemBackground/fragments","value":[{"kind":"identifier","text":"secondarySystemBackgroundColor"}],"op":"replace"},{"value":[{"kind":"identifier","text":"disabledControlTextColor"}],"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1disabledControlTextColor/fragments"},{"op":"replace","value":"quaternaryLabelColor","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1quaternaryLabel/title"},{"value":[{"kind":"identifier","text":"quaternaryLabelColor"}],"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1quaternaryLabel/fragments"},{"value":[{"kind":"identifier","text":"gridColor"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1gridColor/fragments","op":"replace"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1link/title","value":"linkColor"},{"op":"replace","value":[{"kind":"identifier","text":"linkColor"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1link/fragments"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1controlColor/fragments","value":[{"text":"controlColor","kind":"identifier"}],"op":"replace"},{"value":"systemGray2Color","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray2/title","op":"replace"},{"value":[{"text":"systemGray2Color","kind":"identifier"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray2/fragments","op":"replace"},{"value":"labelColor","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1label/title","op":"replace"},{"op":"replace","value":[{"kind":"identifier","text":"labelColor"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1label/fragments"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1keyboardFocusIndicatorColor/fragments","op":"replace","value":[{"text":"keyboardFocusIndicatorColor","kind":"identifier"}]},{"value":[{"kind":"identifier","text":"controlBackgroundColor"}],"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1controlBackgroundColor/fragments"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1secondaryLabel/title","value":"secondaryLabelColor","op":"replace"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1secondaryLabel/fragments","value":[{"text":"secondaryLabelColor","kind":"identifier"}],"op":"replace"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1secondarySystemGroupedBackground/title","value":"secondarySystemGroupedBackgroundColor"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1secondarySystemGroupedBackground/fragments","value":[{"kind":"identifier","text":"secondarySystemGroupedBackgroundColor"}]},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1alternatingContentBackgroundColors/fragments","value":[{"kind":"identifier","text":"alternatingContentBackgroundColors"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1shadowColor/fragments","op":"replace","value":[{"kind":"identifier","text":"shadowColor"}]},{"value":"opaqueSeparatorColor","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1opaqueSeparator/title","op":"replace"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1opaqueSeparator/fragments","value":[{"kind":"identifier","text":"opaqueSeparatorColor"}],"op":"replace"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1quaternaryLabelColor/fragments","op":"replace","value":[{"text":"quaternaryLabelColor","kind":"identifier"}]},{"op":"replace","value":[{"text":"selectedControlTextColor","kind":"identifier"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1selectedControlTextColor/fragments"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1selectedContentBackgroundColor/fragments","value":[{"text":"selectedContentBackgroundColor","kind":"identifier"}],"op":"replace"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1tertiarySystemGroupedBackground/title","value":"tertiarySystemGroupedBackgroundColor","op":"replace"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1tertiarySystemGroupedBackground/fragments","value":[{"text":"tertiarySystemGroupedBackgroundColor","kind":"identifier"}]},{"op":"replace","value":[{"kind":"identifier","text":"unemphasizedSelectedTextBackgroundColor"}],"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1unemphasizedSelectedTextBackgroundColor/fragments"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor/fragments","value":[{"text":"UIColor","kind":"identifier"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1selectedMenuItemTextColor/fragments","value":[{"text":"selectedMenuItemTextColor","kind":"identifier"}],"op":"replace"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1tertiaryLabel/title","op":"replace","value":"tertiaryLabelColor"},{"op":"replace","path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1tertiaryLabel/fragments","value":[{"kind":"identifier","text":"tertiaryLabelColor"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1linkColor/fragments","op":"replace","value":[{"text":"linkColor","kind":"identifier"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1selectedControlColor/fragments","op":"replace","value":[{"kind":"identifier","text":"selectedControlColor"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray/title","op":"replace","value":"systemGrayColor"},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIColor~1systemGray/fragments","op":"replace","value":[{"kind":"identifier","text":"systemGrayColor"}]},{"path":"/references/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSColor~1alternateSelectedControlTextColor/fragments","op":"replace","value":[{"kind":"identifier","text":"alternateSelectedControlTextColor"}]}]}],"legalNotices":{"copyright":"Copyright © 2026 Apple Inc. All rights reserved.","termsOfUse":"https://www.apple.com/legal/internet-services/terms/site.html","privacyPolicy":"https://www.apple.com/privacy/privacy-policy"}}