SwiftUI, iOS, and macOS Color Palettes

An interactive resource for all default system colors from Apple's Human Interface Guidelines.

SwiftUI

Name	Value	Hex	Description
Primary	`.primary`	`#000000`	For text and important symbols. Adapts to theme.
Secondary	`.secondary`	`#8A8A8E`	For less prominent text and symbols.
Red	`.red`	`#FF3B30`	The system red color.
Orange	`.orange`	`#FF9500`	The system orange color.
Yellow	`.yellow`	`#FFCC00`	The system yellow color.
Green	`.green`	`#34C759`	The system green color.
Mint	`.mint`	`#00C7BE`	The system mint color.
Teal	`.teal`	`#30B0C7`	The system teal color.
Cyan	`.cyan`	`#32ADE6`	The system cyan color.
Blue	`.blue`	`#007AFF`	The system blue color, often used for buttons.
Indigo	`.indigo`	`#5856D6`	The system indigo color.
Purple	`.purple`	`#AF52DE`	The system purple color.
Pink	`.pink`	`#FF2D55`	The system pink color.
Brown	`.brown`	`#A2845E`	The system brown color.
Gray	`.gray`	`#8E8E93`	The system gray color.
Black	`#000000`	`#000000`	Pure black. Does not adapt.
White	`#FFFFFF`	`#FFFFFF`	Pure white. Does not adapt.

iOS & iPadOS

Name	Value	Hex	Description
System Background	`.systemBackground`	`#FFFFFF`	The background color for the overall view.
Secondary System Background	`.secondarySystemBackground`	`#F2F2F7`	For grouping content or elements within the overall view.
Tertiary System Background	`.tertiarySystemBackground`	`#FFFFFF`	For grouping content or elements within secondary elements.
System Grouped Background	`.systemGroupedBackground`	`#F2F2F7`	The background color for a grouped table view.
Secondary System Grouped Background	`.secondarySystemGroupedBackground`	`#FFFFFF`	For grouping content or elements in a grouped table view.
Tertiary System Grouped Background	`.tertiarySystemGroupedBackground`	`#F2F2F7`	For grouping content or elements within secondary elements in a grouped table view.
Label	`.label`	`#000000`	A text label that contains primary content.
Secondary Label	`.secondaryLabel`	`#3C3C43`	A text label that contains secondary content.
Tertiary Label	`.tertiaryLabel`	`#3C3C43`	A text label that contains tertiary content.
Quaternary Label	`.quaternaryLabel`	`#3C3C43`	A text label that contains quaternary content.
Placeholder Text	`.placeholderText`	`#3C3C43`	Placeholder text in controls or text views.
Separator	`.separator`	`#3C3C43`	A separator that allows some underlying content to be visible.
Opaque Separator	`.opaqueSeparator`	`#C6C6C8`	A separator that doesn’t allow any underlying content to be visible.
Link	`.link`	`#007AFF`	Text that functions as a link.
System Gray	`.systemGray`	`#8E8E93`	The system gray color.
System Gray 2	`.systemGray2`	`#AEAEB2`	The second-level system gray color.
System Gray 3	`.systemGray3`	`#C7C7CC`	The third-level system gray color.
System Gray 4	`.systemGray4`	`#D1D1D6`	The fourth-level system gray color.
System Gray 5	`.systemGray5`	`#E5E5EA`	The fifth-level system gray color.
System Gray 6	`.systemGray6`	`#F2F2F7`	The sixth-level system gray color.

macOS

Name	Value	Hex	Description
Label	`.label`	`#000000`	The text of a label containing primary content.
Secondary Label	`.secondaryLabel`	`#3C3C43`	The text of a label of lesser importance than a primary label, such as a label used to represent a subheading or additional information. (60% alpha)
Tertiary Label	`.tertiaryLabel`	`#3C3C43`	The text of a label of lesser importance than a secondary label. (30% alpha)
Quaternary Label	`.quaternaryLabel`	`#3C3C43`	The text of a label of lesser importance than a tertiary label, such as watermark text. (18% alpha)
Text	`.text`	`#000000`	The text in a document.
Placeholder Text	`.placeholderText`	`#3C3C43`	A placeholder string in a control or text view. (30% alpha)
Selected Text	`.selectedText`	`#FFFFFF`	The color for selected text.
Text Background	`.textBackground`	`#FFFFFF`	The background color behind text.
Selected Text Background	`.selectedTextBackground`	`#0A64F0`	The background of selected text. (Blue highlight, ~53% alpha in light mode)
Keyboard Focus Indicator	`.keyboardFocusIndicator`	`#0A64F0`	The ring that appears around the currently focused control when using the keyboard for interface navigation.
Unemphasized Selected Text	`.unemphasizedSelectedText`	`#000000`	Selected text in a non-key window or view.
Unemphasized Selected Text Background	`.unemphasizedSelectedTextBackground`	`#DCDCDC`	A background for selected text in a non-key window or view.
Link	`.link`	`#0068DA`	A link to other content.
Separator	`.separator`	`#3C3C43`	A separator between different sections of content. (~29% alpha)
Selected Content Background	`.selectedContentBackground`	`#0A64F0`	The background for selected content in a key window or view.
Unemphasized Selected Content Background	`.unemphasizedSelectedContentBackground`	`#DCDCDC`	The selected content in a non-key window or view.
Selected Menu Item Text	`.selectedMenuItemText`	`#FFFFFF`	The text of a selected menu.
Grid	`.grid`	`#E5E5E5`	The gridlines of an interface element, such as a table.
Header Text	`.headerText`	`#000000`	The text of a header cell in a table.
Alternating Content Background (1)	`.alternatingContentBackground(1)`	`#FFFFFF`	The first alternating row color.
Alternating Content Background (2)	`.alternatingContentBackground(2)`	`#F7F7F7`	The second alternating row color.
Control Accent	`.controlAccent`	`#0A64F0`	The accent color people select in System Settings.
Control	`.control`	`#FFFFFF`	The surface of a control.
Control Background	`.controlBackground`	`#F2F2F2`	The background of a large interface element, such as a browser or table.
Control Text	`.controlText`	`#000000`	The text of a control that is available.
Unavailable Control Text	`.unavailableControlText`	`#6E6E6E`	The text of a control that’s unavailable.
Selected Control	`.selectedControl`	`#0A64F0`	The surface of a selected control.
Selected Control Text	`.selectedControlText`	`#FFFFFF`	The text of a selected control.
Alternate Selected Control Text	`.alternateSelectedControlText`	`#FFFFFF`	The text on a selected surface in a list or table.
Scrubber Textured Background	`.scrubberTexturedBackground`	`#C8C8C8`	Textured scrubber background.
Window Background	`.windowBackground`	`#FFFFFF`	The background of a window.
Window Frame Text	`.windowFrameText`	`#000000`	The text in the window’s title bar area.
Under Page Background	`.underPageBackground`	`#EDEDED`	The background behind a document’s content.
Find Highlight	`.findHighlight`	`#FFFF00`	The color of a find indicator.
Highlight	`.highlight`	`#D9D9D9`	The virtual light source onscreen.
Shadow	`.shadow`	`#000000`	The virtual shadow cast by a raised object onscreen. (20-30% black)
Quaternary System Fill	`.quaternarySystemFill`	`#747480`	Very low-alpha fill. (~7% alpha)
Quinary Label	`.quinaryLabel`	`#3C3C43`	Extremely low-priority label. (~8% alpha)
Quinary System Fill	`.quinarySystemFill`	`#747480`	Ultra-light fill. (~4% alpha)
Secondary System Fill	`.secondarySystemFill`	`#787880`	Light fill for UI elements. (~16% alpha)
System Fill	`.systemFill`	`#787880`	Primary fill for UI shapes. (~20% alpha)
Tertiary System Fill	`.tertiarySystemFill`	`#767680`	Tertiary fill. (~12% alpha)
Text Insertion Point	`.textInsertionPoint`	`#000000`	Cursor caret color.