Cross-Platform Apple UI Colors

Apple Platform Color Directory

Browse Apple system colors across SwiftUI, iOS, iPadOS, tvOS, and macOS with searchable semantic names, APIs, HEX values, RGBA values, and light or dark appearance variants.

All Colors SwiftUI iOS & iPadOS tvOS macOSConverter

SwiftUI Colors

Semantic SwiftUI colors and adaptable palette values.

iOS & iPadOS Colors

UIKit system colors, labels, fills, and backgrounds.

tvOS Colors

tvOS color exports and Apple TV interface tokens.

macOS Colors

AppKit system colors and semantic NSColor values.

SwiftUI

Name	API Token	HEX / RGBA	Description
Accent	`.accentColor`	`#007AFF` `rgb(0, 122, 255)`	SwiftUI's accent color on the current runtime.
Primary	`.primary`	`rgba(0, 0, 0, 0.85)`	SwiftUI's primary semantic foreground color.
Secondary	`.secondary`	`rgba(0, 0, 0, 0.5)`	SwiftUI's secondary semantic foreground color.
Red	`.red`	`#FF383C` `rgb(255, 56, 60)`	SwiftUI's adaptable red.
Orange	`.orange`	`#FF8D28` `rgb(255, 141, 40)`	SwiftUI's adaptable orange.
Yellow	`.yellow`	`#FFCC00` `rgb(255, 204, 0)`	SwiftUI's adaptable yellow.
Green	`.green`	`#34C759` `rgb(52, 199, 89)`	SwiftUI's adaptable green.
Mint	`.mint`	`#00C8B3` `rgb(0, 200, 179)`	SwiftUI's adaptable mint.
Teal	`.teal`	`#00C3D0` `rgb(0, 195, 208)`	SwiftUI's adaptable teal.
Cyan	`.cyan`	`#00C0E8` `rgb(0, 192, 232)`	SwiftUI's adaptable cyan.
Blue	`.blue`	`#0088FF` `rgb(0, 136, 255)`	SwiftUI's adaptable blue.
Indigo	`.indigo`	`#6155F5` `rgb(97, 85, 245)`	SwiftUI's adaptable indigo.
Purple	`.purple`	`#CB30E0` `rgb(203, 48, 224)`	SwiftUI's adaptable purple.
Pink	`.pink`	`#FF2D55` `rgb(255, 45, 85)`	SwiftUI's adaptable pink.
Brown	`.brown`	`#AC7F5E` `rgb(172, 127, 94)`	SwiftUI's adaptable brown.
Gray	`.gray`	`#8E8E93` `rgb(142, 142, 147)`	SwiftUI's neutral gray.
Black	`.black`	`#000000` `rgb(0, 0, 0)`	Pure black.
White	`.white`	`#FFFFFF` `rgb(255, 255, 255)`	Pure white.

iOS & iPadOS

Name	API Token	HEX / RGBA	Description
System Blue	`UIColor.systemBlue`	`#007AFF` `rgb(0, 122, 255)`	A blue color that adapts to the current trait environment.
System Green	`UIColor.systemGreen`	`#34C759` `rgb(52, 199, 89)`	A green color that adapts to the current trait environment.
System Indigo	`UIColor.systemIndigo`	`#5856D6` `rgb(88, 86, 214)`	An indigo color that adapts to the current trait environment.
System Orange	`UIColor.systemOrange`	`#FF9500` `rgb(255, 149, 0)`	An orange color that adapts to the current trait environment.
System Pink	`UIColor.systemPink`	`#FF2D55` `rgb(255, 45, 85)`	A pink color that adapts to the current trait environment.
System Purple	`UIColor.systemPurple`	`#AF52DE` `rgb(175, 82, 222)`	A purple color that adapts to the current trait environment.
System Red	`UIColor.systemRed`	`#FF3B30` `rgb(255, 59, 48)`	A red color that adapts to the current trait environment.
System Teal	`UIColor.systemTeal`	`#5AC8FA` `rgb(90, 200, 250)`	A teal color that adapts to the current trait environment.
System Yellow	`UIColor.systemYellow`	`#FFCC00` `rgb(255, 204, 0)`	A yellow color that adapts to the current trait environment.
System Gray	`UIColor.systemGray`	`#8E8E93` `rgb(142, 142, 147)`	The base adaptable gray.
System Gray 2	`UIColor.systemGray2`	`#AEAEB2` `rgb(174, 174, 178)`	A secondary adaptable gray.
System Gray 3	`UIColor.systemGray3`	`#C7C7CC` `rgb(199, 199, 204)`	A tertiary adaptable gray.
System Gray 4	`UIColor.systemGray4`	`#D1D1D6` `rgb(209, 209, 214)`	A quaternary adaptable gray.
System Gray 5	`UIColor.systemGray5`	`#E5E5EA` `rgb(229, 229, 234)`	A low-emphasis adaptable gray.
System Gray 6	`UIColor.systemGray6`	`#F2F2F7` `rgb(242, 242, 247)`	The lightest adaptable gray.
System Background	`UIColor.systemBackground`	`#FFFFFF` `rgb(255, 255, 255)`	The background color for the overall view.
Secondary System Background	`UIColor.secondarySystemBackground`	`#F2F2F7` `rgb(242, 242, 247)`	A background color for grouped content.
Tertiary System Background	`UIColor.tertiarySystemBackground`	`#FFFFFF` `rgb(255, 255, 255)`	A background color for content nested inside secondary surfaces.
System Grouped Background	`UIColor.systemGroupedBackground`	`#F2F2F7` `rgb(242, 242, 247)`	The background color for grouped table-style layouts.
Secondary System Grouped Background	`UIColor.secondarySystemGroupedBackground`	`#FFFFFF` `rgb(255, 255, 255)`	A grouped background color for secondary surfaces.
Tertiary System Grouped Background	`UIColor.tertiarySystemGroupedBackground`	`#F2F2F7` `rgb(242, 242, 247)`	A grouped background color for nested tertiary surfaces.
System Fill	`UIColor.systemFill`	`#78788033` `rgba(120, 120, 128, 0.2)`	A fill color for large shapes and controls.
Secondary System Fill	`UIColor.secondarySystemFill`	`#78788028` `rgba(120, 120, 128, 0.157)`	A secondary fill color for medium emphasis shapes.
Tertiary System Fill	`UIColor.tertiarySystemFill`	`#7676801E` `rgba(118, 118, 128, 0.118)`	A tertiary fill color for subtle shapes.
Quaternary System Fill	`UIColor.quaternarySystemFill`	`#74748014` `rgba(116, 116, 128, 0.078)`	The softest system fill used for low-emphasis shapes.
Light Text	`UIColor.lightText`	`#FFFFFF99` `rgba(255, 255, 255, 0.6)`	A legacy light text color.
Dark Text	`UIColor.darkText`	`#000000` `rgb(0, 0, 0)`	A legacy dark text color.
Label	`UIColor.label`	`#000000` `rgb(0, 0, 0)`	The primary color for text labels.
Secondary Label	`UIColor.secondaryLabel`	`#3C3C4399` `rgba(60, 60, 67, 0.6)`	The secondary color for text labels.
Tertiary Label	`UIColor.tertiaryLabel`	`#3C3C434C` `rgba(60, 60, 67, 0.298)`	The tertiary color for text labels.
Quaternary Label	`UIColor.quaternaryLabel`	`#3C3C432E` `rgba(60, 60, 67, 0.18)`	The quaternary color for text labels and separators.
Link	`UIColor.link`	`#007AFF` `rgb(0, 122, 255)`	The default color for links.
Placeholder Text	`UIColor.placeholderText`	`#3C3C434C` `rgba(60, 60, 67, 0.298)`	The placeholder color for controls and text views.
Separator	`UIColor.separator`	`#3C3C434A` `rgba(60, 60, 67, 0.29)`	A separator that allows some underlying content to show through.
Opaque Separator	`UIColor.opaqueSeparator`	`#C6C6C8` `rgb(198, 198, 200)`	A separator that fully obscures content behind it.

tvOS

Name	API Token	HEX / RGBA	Description
System Blue	`UIColor.systemBlue`	`#007AFF` `rgb(0, 122, 255)`	tvOS system blue from the trusted Xcode export.
System Green	`UIColor.systemGreen`	`#34C759` `rgb(52, 199, 89)`	tvOS system green from the trusted Xcode export.
System Indigo	`UIColor.systemIndigo`	`#5856D6` `rgb(88, 86, 214)`	tvOS system indigo from the trusted Xcode export.
System Orange	`UIColor.systemOrange`	`#FF9500` `rgb(255, 149, 0)`	tvOS system orange from the trusted Xcode export.
System Pink	`UIColor.systemPink`	`#FF2D55` `rgb(255, 45, 85)`	tvOS system pink from the trusted Xcode export.
System Purple	`UIColor.systemPurple`	`#AF52DE` `rgb(175, 82, 222)`	tvOS system purple from the trusted Xcode export.
System Red	`UIColor.systemRed`	`#FF3B30` `rgb(255, 59, 48)`	tvOS system red from the trusted Xcode export.
System Teal	`UIColor.systemTeal`	`#5AC8FA` `rgb(90, 200, 250)`	tvOS system teal from the trusted Xcode export.
System Yellow	`UIColor.systemYellow`	`#FFCC00` `rgb(255, 204, 0)`	tvOS system yellow from the trusted Xcode export.
System Gray	`UIColor.systemGray`	`#8E8E93` `rgb(142, 142, 147)`	tvOS system gray from the trusted Xcode export.
Label	`UIColor.label`	`#000000` `rgb(0, 0, 0)`	tvOS label color from the trusted Xcode export.
Secondary Label	`UIColor.secondaryLabel`	`#3C3C4399` `rgba(60, 60, 67, 0.6)`	tvOS secondary label color from the trusted Xcode export.
Tertiary Label	`UIColor.tertiaryLabel`	`#3C3C434C` `rgba(60, 60, 67, 0.298)`	tvOS tertiary label color from the trusted Xcode export.
Quaternary Label	`UIColor.quaternaryLabel`	`#3C3C432E` `rgba(60, 60, 67, 0.18)`	tvOS quaternary label color from the trusted Xcode export.
Link	`UIColor.link`	`#007AFF` `rgb(0, 122, 255)`	tvOS link color from the trusted Xcode export.
Placeholder Text	`UIColor.placeholderText`	`#3C3C434C` `rgba(60, 60, 67, 0.298)`	tvOS placeholder text color from the trusted Xcode export.
Separator	`UIColor.separator`	`#3C3C434A` `rgba(60, 60, 67, 0.29)`	tvOS separator color from the trusted Xcode export.
Opaque Separator	`UIColor.opaqueSeparator`	`#C6C6C8` `rgb(198, 198, 200)`	tvOS opaque separator color from the trusted Xcode export.

macOS

Name	API Token	HEX / RGBA	Description
System Red	`NSColor.systemRed`	`#FF383C` `rgb(255, 56, 60)`	A red color that automatically adapts to the current appearance.
System Orange	`NSColor.systemOrange`	`#FF8D28` `rgb(255, 141, 40)`	An orange color that automatically adapts to the current appearance.
System Yellow	`NSColor.systemYellow`	`#FFCC00` `rgb(255, 204, 0)`	A yellow color that automatically adapts to the current appearance.
System Green	`NSColor.systemGreen`	`#34C759` `rgb(52, 199, 89)`	A green color that automatically adapts to the current appearance.
System Mint	`NSColor.systemMint`	`#00C8B3` `rgb(0, 200, 179)`	A mint color that automatically adapts to the current appearance.
System Teal	`NSColor.systemTeal`	`#00C3D0` `rgb(0, 195, 208)`	A teal color that automatically adapts to the current appearance.
System Cyan	`NSColor.systemCyan`	`#00C0E8` `rgb(0, 192, 232)`	A cyan color that automatically adapts to the current appearance.
System Blue	`NSColor.systemBlue`	`#0088FF` `rgb(0, 136, 255)`	A blue color that automatically adapts to the current appearance.
System Indigo	`NSColor.systemIndigo`	`#6155F5` `rgb(97, 85, 245)`	An indigo color that automatically adapts to the current appearance.
System Purple	`NSColor.systemPurple`	`#CB30E0` `rgb(203, 48, 224)`	A purple color that automatically adapts to the current appearance.
System Pink	`NSColor.systemPink`	`#FF2D55` `rgb(255, 45, 85)`	A pink color that automatically adapts to the current appearance.
System Brown	`NSColor.systemBrown`	`#AC7F5E` `rgb(172, 127, 94)`	A brown color that automatically adapts to the current appearance.
System Gray	`NSColor.systemGray`	`#8E8E93` `rgb(142, 142, 147)`	A gray color that automatically adapts to the current appearance.
Label	`NSColor.labelColor`	`rgba(0, 0, 0, 0.85)`	The text of a label containing primary content.
Secondary Label	`NSColor.secondaryLabelColor`	`rgba(0, 0, 0, 0.5)`	The text of a label of lesser importance than a primary label.
Tertiary Label	`NSColor.tertiaryLabelColor`	`rgba(0, 0, 0, 0.26)`	The text of a label of lesser importance than a secondary label.
Quaternary Label	`NSColor.quaternaryLabelColor`	`rgba(0, 0, 0, 0.1)`	The text of a label of lesser importance than a tertiary label.
Quinary Label	`NSColor.quinaryLabel`	`rgba(0, 0, 0, 0.05)`	The text of a label of lesser importance than a quaternary label.
Text	`NSColor.textColor`	`#000000` `rgb(0, 0, 0)`	The color to use for text.
Placeholder Text	`NSColor.placeholderTextColor`	`rgba(0, 0, 0, 0.5)`	The color to use for placeholder text in controls or text views.
Selected Text	`NSColor.selectedTextColor`	`#000000` `rgb(0, 0, 0)`	The color for selected text.
Text Background	`NSColor.textBackgroundColor`	`#FFFFFF` `rgb(255, 255, 255)`	The background color behind text.
Selected Text Background	`NSColor.selectedTextBackgroundColor`	`#B3D7FF` `rgb(179, 215, 255)`	The background of selected text.
Unemphasized Selected Text	`NSColor.unemphasizedSelectedTextColor`	`#000000` `rgb(0, 0, 0)`	Selected text in a non-key window or view.
Unemphasized Selected Text Background	`NSColor.unemphasizedSelectedTextBackgroundColor`	`#DCDCDC` `rgb(220, 220, 220)`	A background for selected text in a non-key window or view.
Link	`NSColor.linkColor`	`#0068DA` `rgb(0, 104, 218)`	A link to other content.
Text Insertion Point	`NSColor.textInsertionPointColor`	`#007AFF` `rgb(0, 122, 255)`	The insertion point color in text.
System Fill	`NSColor.systemFill`	`rgba(0, 0, 0, 0.1)`	The default fill color for controls and interface elements.
Secondary System Fill	`NSColor.secondarySystemFill`	`rgba(0, 0, 0, 0.08)`	A secondary fill color for controls and interface elements.
Tertiary System Fill	`NSColor.tertiarySystemFill`	`rgba(0, 0, 0, 0.05)`	A tertiary fill color for controls and interface elements.
Quaternary System Fill	`NSColor.quaternarySystemFill`	`rgba(0, 0, 0, 0.03)`	A quaternary fill color for controls and interface elements.
Quinary System Fill	`NSColor.quinarySystemFill`	`rgba(0, 0, 0, 0.01)`	A quinary fill color for controls and interface elements.
Separator	`NSColor.separatorColor`	`rgba(0, 0, 0, 0.1)`	A separator between different sections of content.
Grid	`NSColor.gridColor`	`#E6E6E6` `rgb(230, 230, 230)`	The grid lines of an interface element, such as a table.
Shadow	`NSColor.shadowColor`	`#000000` `rgb(0, 0, 0)`	The virtual shadow cast by a raised object onscreen.
Highlight	`NSColor.highlightColor`	`#FFFFFF` `rgb(255, 255, 255)`	The virtual light source onscreen.
Find Highlight	`NSColor.findHighlightColor`	`#FFFF00` `rgb(255, 255, 0)`	The color of a find indicator.
Keyboard Focus Indicator	`NSColor.keyboardFocusIndicatorColor`	`rgba(0, 103, 244, 0.5)`	The ring around the currently focused control when using keyboard navigation.
Control Accent	`NSColor.controlAccentColor`	`#007AFF` `rgb(0, 122, 255)`	The accent color people select in System Settings.
Control Color	`NSColor.controlColor`	`#FFFFFF` `rgb(255, 255, 255)`	The surface of a control.
Control Background	`NSColor.controlBackgroundColor`	`#FFFFFF` `rgb(255, 255, 255)`	The background of a large interface element, such as a browser or table.
Control Text	`NSColor.controlTextColor`	`rgba(0, 0, 0, 0.85)`	The text of a control that is available.
Disabled Control Text	`NSColor.disabledControlTextColor`	`rgba(0, 0, 0, 0.25)`	The text of a control that's unavailable.
Selected Content Background	`NSColor.selectedContentBackgroundColor`	`#0064E1` `rgb(0, 100, 225)`	The background for selected content in a key window or view.
Unemphasized Selected Content Background	`NSColor.unemphasizedSelectedContentBackgroundColor`	`#DCDCDC` `rgb(220, 220, 220)`	The selected content in a non-key window or view.
Selected Control	`NSColor.selectedControlColor`	`#B3D7FF` `rgb(179, 215, 255)`	The surface of a selected control.
Selected Control Text	`NSColor.selectedControlTextColor`	`rgba(0, 0, 0, 0.85)`	The text of a selected control.
Alternate Selected Control Text	`NSColor.alternateSelectedControlTextColor`	`#FFFFFF` `rgb(255, 255, 255)`	The text on a selected surface in a list or table.
Selected Menu Item Text	`NSColor.selectedMenuItemTextColor`	`#FFFFFF` `rgb(255, 255, 255)`	The text of a selected menu.
Header Text	`NSColor.headerTextColor`	`rgba(0, 0, 0, 0.85)`	The text of a header cell in a table.
Window Background	`NSColor.windowBackgroundColor`	`#FFFFFF` `rgb(255, 255, 255)`	The background of a window.
Window Frame Text	`NSColor.windowFrameTextColor`	`rgba(0, 0, 0, 0.85)`	The text in the window's title bar area.
Under Page Background	`NSColor.underPageBackgroundColor`	`rgba(150, 150, 150, 0.9)`	The background behind a document's content.