Apple UI Colors

iOS & iPadOS System Colors

Browse UIKit system colors used across iOS and iPadOS, including semantic text colors, fills, grouped backgrounds, and adaptable appearance-aware values.

All Colors SwiftUI iOS & iPadOS tvOS macOSConverter

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.