Apple Dev MCP Server

--- title: Color platform: universal category: layout url: https://developer.apple.com/design/human-interface-guidelines/color quality_score: 0.49 content_length: 17715 last_updated: 2025-07-20T03:43:06.655Z keywords: ["color","universal","layout","system","visual","status","feedback","accessibility","interface","controls","icons","design","buttons","images","navigation","selection","animation"] has_code_examples: false has_images: false is_fallback: false --- June 9, 2025 Updated system color values, and added guidance for Liquid Glass. Color Judicious use of color can enhance communication, evoke your brand, provide visual continuity, communicate status and feedback, and help people understand information. 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. 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. Best practices Avoid using the same color to mean different things. 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. Make sure your app’s colors work well in both light and dark contexts. i OS, i Pad OS, mac OS, and tv OS offer both light and dark appearance settings. System colors 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. If you use a custom color, supply light and dark variants, and an increased contrast option for each variant. Test your app’s color scheme under a variety of lighting conditions. 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 vision OS, 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. Test your app on different devices. For example, the True Tone display — available on certain i Phone, i Pad, 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 UIWhite Point Adaptivity Style). Test tv OS apps on multiple brands of HD and 4 K TVs, and with different display settings. You can also test the appearance of your app using different color profiles on a Mac — such as P 3 and Standard RGB (s RGB) — by choosing a profile in System Settings > Displays. For guidance, see Color management. Consider how artwork and translucency affect nearby colors. 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. If your app lets people choose colors, prefer system-provided color controls where available. 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 Color Picker. Inclusive color Avoid relying solely on color to differentiate between objects, indicate interactivity, or communicate essential information. 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. Avoid using colors that make it hard to perceive content in your app. 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 Accessibility. Consider how the colors you use might be perceived in other countries and cultures. 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. System colors Avoid hard-coding system color values in your app. 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 Color to apply system colors.i OS, i Pad OS, mac OS, and vision OS also define sets of dynamic system colors 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. Avoid redefining the semantic meanings of dynamic system colors. 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 separator color as a text color, or secondary text label color as a background color. Liquid Glass color 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. 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. Use color sparingly in Liquid Glass. To reduce visual noise, limit the amount of color you apply to the material, and to symbols or text on the material. If you apply color, reserve it for elements that truly benefit from emphasis, such as status indicators or key actions. For example, the system applies tint color to the material backing in prominent buttons — such as the Done button — to draw attention and elevate their visual prominence. Consider using color in the content layer to evoke your brand. If your app feels visually muted or lacks sufficient brand emphasis, consider adjusting the color palette in your content layer, such as adding a colorful header to the scrollable content. This approach allows your app to continue expressing its unique personality without distracting from content. Refrain from adding color throughout Liquid Glass solely to evoke your brand. Liquid Glass elements over a simple background. Color in the content layer can help highlight your brand. Color management A color space represents the colors in a color model like RGB or CMYK. Common color spaces — sometimes called gamuts — are s RGB and Display P 3.A color profile 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. Apply color profiles to your images. Color profiles help ensure that your app’s colors appear as intended on different displays. The s RGB color space produces accurate colors on most displays. Use wide color to enhance the visual experience on compatible displays. Wide color displays support a P 3 color space, which can produce richer, more saturated colors than s RGB. 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 P 3 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 P 3 colors. Provide color space–specific image and color variations if necessary. In general, P 3 colors and images appear fine on s RGB displays. Occasionally, it may be hard to distinguish two very similar P 3 colors when viewing them on an s RGB display. Gradients that use P 3 colors can also sometimes appear clipped on s RGB displays. To avoid these issues and to ensure visual fidelity on both wide color and s RGB displays, you can use the asset catalog of your Xcode project to provide different versions of images and colors for each color space. Platform considerationsi OS, i Pad OSi OS defines two sets of dynamic background colors — system and grouped — each of which contains primary, secondary, and tertiary variants that help you convey a hierarchy of information. In general, use the grouped background colors (system Grouped Background, secondary System Grouped Background, and tertiary System Grouped Background) when you have a grouped table view; otherwise, use the system set of background colors (system Background, secondary System Background, and tertiary System Background).With both sets of background colors, you generally use the variants to indicate hierarchy in the following ways:Primary for the overall view Secondary for grouping content or elements within the overall view Tertiary for grouping content or elements within secondary elements For foreground content, i OS defines the following dynamic colors:Color Use for…UIKit APILabel A text label that contains primary content.label Secondary label A text label that contains secondary content.secondary Label Tertiary label A text label that contains tertiary content.tertiary Label Quaternary label A text label that contains quaternary content.quaternary Label Placeholder text Placeholder text in controls or text views.placeholder Text Separator A separator that allows some underlying content to be visible.separator Opaque separator A separator that doesn’t allow any underlying content to be visible.opaque Separator Link Text that functions as a link.linkmac OSmac OS defines the following dynamic system colors (you can also view them in the Developer palette of the standard Color panel):Color Use for…App Kit APIAlternate selected control text color The text on a selected surface in a list or table.alternate Selected Control Text Color Alternating content background colors The backgrounds of alternating rows or columns in a list, table, or collection view.alternating Content Background Colors Control accent The accent color people select in System Settings.control Accent Color Control background color The background of a large interface element, such as a browser or table.control Background Color Control color The surface of a control.control Color Control text color The text of a control that is available.control Text Color Current control tint The system-defined control tint.current Control Tint Unavailable control text color The text of a control that’s unavailable.disabled Control Text Color Find highlight color The color of a find indicator.find Highlight Color Grid color The gridlines of an interface element, such as a table.grid Color Header text color The text of a header cell in a table.header Text Color Highlight color The virtual light source onscreen.highlight Color Keyboard focus indicator color The ring that appears around the currently focused control when using the keyboard for interface navigation.keyboard Focus Indicator Color Label color The text of a label containing primary content.label Color Link color A link to other content.link Color Placeholder text color A placeholder string in a control or text view.placeholder Text Color Quaternary label color The text of a label of lesser importance than a tertiary label, such as watermark text.quaternary Label Color Secondary label color The text of a label of lesser importance than a primary label, such as a label used to represent a subheading or additional information.secondary Label Color Selected content background color The background for selected content in a key window or view.selected Content Background Color Selected control color The surface of a selected control.selected Control Color Selected control text color The text of a selected control.selected Control Text Color Selected menu item text color The text of a selected menu.selected Menu Item Text Color Selected text background color The background of selected text.selected Text Background Color Selected text color The color for selected text.selected Text Color Separator color A separator between different sections of content.separator Color Shadow color The virtual shadow cast by a raised object onscreen.shadow Color Tertiary label color The text of a label of lesser importance than a secondary label.tertiary Label Color Text background color The background color behind text.text Background Color Text color The text in a document.text Color Under page background color The background behind a document’s content.under Page Background Color Unemphasized selected content background color The selected content in a non-key window or view.unemphasized Selected Content Background Color Unemphasized selected text background color A background for selected text in a non-key window or view.unemphasized Selected Text Background Color Unemphasized selected text color Selected text in a non-key window or view.unemphasized Selected Text Color Window background color The background of a window.window Background Color Window frame text color The text in the window’s title bar area.window Frame Text Color App accent colors Beginning in mac OS 11, you can specify an accent color 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 multicolor. 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 Sidebars.tv OSConsider choosing a limited color palette that coordinates with your app logo. Subtle use of color can help you communicate your brand while deferring to the content. Avoid using only color to indicate focus. Subtle scaling and responsive animation are the primary ways to denote interactivity when an element is in focus.vision OSUse color sparingly, especially on glass. Standard vision OS windows typically use the system-defined glass material, 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. Prefer using color in bold text and large areas. Color in lightweight text or small areas can make them harder to see and understand. In a fully immersive experience, help people maintain visual comfort by keeping brightness levels balanced. 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.watch OSUse background color to support existing content or supply additional information. 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. Recognize that people might prefer graphic complications to use tinted mode instead of full color. 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 Complications. Specifications System colors Name Swift UI APIDefault (light)Default (dark)Increased contrast (light)Increased contrast (dark)Redred Orangeorange Yellowyellow Greengreen Mintmint Tealteal Cyancyan Blueblue Indigoindigo Purplepurple Pinkpink Brownbrownvision OS system colors use the default dark color values.i OS, i Pad OS system gray colors Name UIKit APIDefault (light)Default (dark)Increased contrast (light)Increased contrast (dark)Graysystem Gray Gray (2)system Gray 2 Gray (3)system Gray 3 Gray (4)system Gray 4 Gray (5)system Gray 5 Gray (6)system Gray 6 In Swift UI, the equivalent of system Gray is gray.