What is the SwiftUI equivalent of UIColor.systemBackground?

SwiftUI does not expose a direct .systemBackground static color. Use Color(uiColor: .systemBackground) to wrap the UIKit semantic background, or browse resolved light and dark HEX values on the iOS colors directory.

How do Apple semantic colors change in dark mode?

Semantic and adaptable system colors resolve to different values based on the active appearance. Primary text shifts from dark rgba in light mode to light rgba in dark mode, while palette colors like .blue use slightly different HEX values per appearance.

What is the difference between .primary and .secondary in SwiftUI?

Both are semantic foreground colors. .primary is for main content text and icons at roughly 85% opacity, while .secondary is for supporting content at lower emphasis, around 50–55% opacity depending on appearance.

Should I use SwiftUI Color.red or a fixed HEX value?

Prefer Color.red and other system palette colors when you want appearance-aware values that track Apple platform updates. Fixed HEX is appropriate only when you need a brand color that must not adapt.

How do I use UIKit colors in SwiftUI?

Bridge UIKit semantic colors with Color(uiColor:). Examples include Color(uiColor: .label), Color(uiColor: .systemBackground), and Color(uiColor: .separator). On macOS, use Color(nsColor:) with AppKit tokens.

Are macOS AppKit colors the same as iOS UIKit colors?

They share conceptual roles—label, link, fill, window background—but names and resolved values differ. AppKit uses NSColor.labelColor while UIKit uses UIColor.label, and macOS includes desktop-specific tokens such as window and control colors.

Apple UI Colors

SwiftUI Colors: Complete Guide to System Colors, Hex Values, and Dark Mode

SwiftUI ships a compact set of built-in system colors—semantic foreground tokens, appearance-aware palette colors, and fixed absolutes—that align with Apple's Human Interface Guidelines. This guide explains how those colors work, shows resolved light and dark values, and links to searchable directories for SwiftUI, iOS, and macOS. For the interactive reference table, visit the SwiftUI colors directory.

All Colors SwiftUI iOS & iPadOS tvOS macOS SwiftUI Guide

What are SwiftUI system colors?

SwiftUI system colors are Apple-defined Color values that adapt to the current interface appearance. They fall into three practical groups:

Semantic foreground colors — .primary, .secondary, and .accentColor for text and icons that should track content hierarchy.
Adaptable palette colors — .red through .gray, including mint, cyan, and brown, which shift slightly between light and dark mode.
Fixed absolutes — .black and .white, which stay constant across appearances.

Prefer system colors over hard-coded HEX when building interfaces that should feel native on iPhone, iPad, and Mac. They stay aligned with platform updates and respect accessibility expectations for contrast and hierarchy.

Complete SwiftUI color table

All built-in SwiftUI Color static properties with resolved light and dark values. This covers framework-provided colors only—not asset catalog or custom named colors.

Name	API	Light	Dark	Description
Accent	`Color.accentColor`	`#007AFF`	`#007AFF`	SwiftUI's accent color on the current runtime.
Primary	`Color.primary`	`rgba(0, 0, 0, 0.85)`	`rgba(255, 255, 255, 0.85)`	SwiftUI's primary semantic foreground color.
Secondary	`Color.secondary`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	SwiftUI's secondary semantic foreground color.
Red	`Color.red`	`#FF383C`	`#FF4245`	SwiftUI's adaptable red.
Orange	`Color.orange`	`#FF8D28`	`#FF9230`	SwiftUI's adaptable orange.
Yellow	`Color.yellow`	`#FFCC00`	`#FFD600`	SwiftUI's adaptable yellow.
Green	`Color.green`	`#34C759`	`#30D158`	SwiftUI's adaptable green.
Mint	`Color.mint`	`#00C8B3`	`#00DAC3`	SwiftUI's adaptable mint.
Teal	`Color.teal`	`#00C3D0`	`#00D2E0`	SwiftUI's adaptable teal.
Cyan	`Color.cyan`	`#00C0E8`	`#3CD3FE`	SwiftUI's adaptable cyan.
Blue	`Color.blue`	`#0088FF`	`#0091FF`	SwiftUI's adaptable blue.
Indigo	`Color.indigo`	`#6155F5`	`#6D7CFF`	SwiftUI's adaptable indigo.
Purple	`Color.purple`	`#CB30E0`	`#DB34F2`	SwiftUI's adaptable purple.
Pink	`Color.pink`	`#FF2D55`	`#FF375F`	SwiftUI's adaptable pink.
Brown	`Color.brown`	`#AC7F5E`	`#B78A66`	SwiftUI's adaptable brown.
Gray	`Color.gray`	`#8E8E93`	`#8E8E93`	SwiftUI's neutral gray.
Black	`Color.black`	`#000000`	`#000000`	Pure black.
White	`Color.white`	`#FFFFFF`	`#FFFFFF`	Pure white.

iOS and iPadOS semantic colors

UIKit exposes a richer semantic layer for backgrounds, fills, labels, and separators. SwiftUI's .primary maps conceptually to UIColor.label for primary text. Browse the full UIKit set on the iOS and iPadOS colors directory.

Name	API	Light	Dark	Description
System Background	`UIColor.systemBackground`	`#FFFFFF`	`#000000`	The background color for the overall view.
Secondary System Background	`UIColor.secondarySystemBackground`	`#F2F2F7`	`#1C1C1E`	A background color for grouped content.
Tertiary System Background	`UIColor.tertiarySystemBackground`	`#FFFFFF`	`#2C2C2E`	A background color for content nested inside secondary surfaces.
System Grouped Background	`UIColor.systemGroupedBackground`	`#F2F2F7`	`#000000`	The background color for grouped table-style layouts.
Secondary System Grouped Background	`UIColor.secondarySystemGroupedBackground`	`#FFFFFF`	`#1C1C1E`	A grouped background color for secondary surfaces.
Tertiary System Grouped Background	`UIColor.tertiarySystemGroupedBackground`	`#F2F2F7`	`#2C2C2E`	A grouped background color for nested tertiary surfaces.
System Fill	`UIColor.systemFill`	`#78788033`	`#7878805C`	A fill color for large shapes and controls.
Secondary System Fill	`UIColor.secondarySystemFill`	`#78788028`	`#78788051`	A secondary fill color for medium emphasis shapes.
Tertiary System Fill	`UIColor.tertiarySystemFill`	`#7676801E`	`#7676803D`	A tertiary fill color for subtle shapes.
Quaternary System Fill	`UIColor.quaternarySystemFill`	`#74748014`	`#7676802E`	The softest system fill used for low-emphasis shapes.
Label	`UIColor.label`	`#000000`	`#FFFFFF`	The primary color for text labels.
Secondary Label	`UIColor.secondaryLabel`	`#3C3C4399`	`#EBEBF599`	The secondary color for text labels.
Tertiary Label	`UIColor.tertiaryLabel`	`#3C3C434C`	`#EBEBF54C`	The tertiary color for text labels.
Quaternary Label	`UIColor.quaternaryLabel`	`#3C3C432E`	`#EBEBF52E`	The quaternary color for text labels and separators.
Link	`UIColor.link`	`#007AFF`	`#0984FF`	The default color for links.
Placeholder Text	`UIColor.placeholderText`	`#3C3C434C`	`#EBEBF54C`	The placeholder color for controls and text views.
Separator	`UIColor.separator`	`#3C3C434A`	`#54545899`	A separator that allows some underlying content to show through.
Opaque Separator	`UIColor.opaqueSeparator`	`#C6C6C8`	`#38383A`	A separator that fully obscures content behind it.

macOS system colors

AppKit uses NSColor semantic tokens with desktop-specific names such as NSColor.windowBackgroundColor and NSColor.controlAccentColor. Values differ from UIKit even when the role is similar. See all 53 AppKit colors on the macOS colors directory.

Name	API	Light	Dark	Description
Label	`NSColor.labelColor`	`rgba(0, 0, 0, 0.85)`	`rgba(255, 255, 255, 0.85)`	The text of a label containing primary content.
Secondary Label	`NSColor.secondaryLabelColor`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	The text of a label of lesser importance than a primary label.
Tertiary Label	`NSColor.tertiaryLabelColor`	`rgba(0, 0, 0, 0.26)`	`rgba(255, 255, 255, 0.25)`	The text of a label of lesser importance than a secondary label.
Quaternary Label	`NSColor.quaternaryLabelColor`	`rgba(0, 0, 0, 0.1)`	`rgba(255, 255, 255, 0.1)`	The text of a label of lesser importance than a tertiary label.
Text	`NSColor.textColor`	`#000000`	`#FFFFFF`	The color to use for text.
Placeholder Text	`NSColor.placeholderTextColor`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	The color to use for placeholder text in controls or text views.
Link	`NSColor.linkColor`	`#0068DA`	`#419CFF`	A link to other content.
System Fill	`NSColor.systemFill`	`rgba(0, 0, 0, 0.1)`	`rgba(255, 255, 255, 0.1)`	The default fill color for controls and interface elements.
Separator	`NSColor.separatorColor`	`rgba(0, 0, 0, 0.1)`	`rgba(255, 255, 255, 0.1)`	A separator between different sections of content.
Control Accent	`NSColor.controlAccentColor`	`#007AFF`	`#007AFF`	The accent color people select in System Settings.
Control Background	`NSColor.controlBackgroundColor`	`#FFFFFF`	`#1E1E1E`	The background of a large interface element, such as a browser or table.
Selected Content Background	`NSColor.selectedContentBackgroundColor`	`#0064E1`	`#0059D1`	The background for selected content in a key window or view.
Window Background	`NSColor.windowBackgroundColor`	`#FFFFFF`	`#1E1E1E`	The background of a window.

How adaptive colors work

Most Apple system colors are dynamic: they resolve at runtime based on the active trait environment—light or dark appearance, and sometimes platform context. In SwiftUI, palette colors like Color.blue automatically return the correct variant without manual branching.

Some colors keep the same resolved value in both modes. Examples include Color.black, Color.white, Color.gray, and Color.accentColor in the current dataset. Others, like Color.primary, invert emphasis between appearances.

When you need UIKit or AppKit semantics inside SwiftUI, bridge with Color(uiColor:) or Color(nsColor:). You can also read @Environment(\.colorScheme) when custom views need explicit appearance-aware logic.

Light mode vs dark mode notes

Semantic foreground colors use rgba values so text remains legible on varied backgrounds. For example, Color.primary resolves to rgba(0, 0, 0, 0.85) in light mode and rgba(255, 255, 255, 0.85) in dark mode.

UIKit fill colors often encode alpha in 8-digit HEX notation. UIColor.systemFill uses #78788033 in light mode and #7878805C in dark mode—the trailing bytes represent opacity that increases in dark mode for visible contrast.

The searchable color directories on this site show one appearance at a time based on the theme toggle. This guide table lists both light and dark columns so crawlers and readers can compare values without switching themes.

SwiftUI code examples

Text("Hello, world!")
  .foregroundStyle(.primary)

Text("Supporting detail")
  .foregroundStyle(.secondary)

Rectangle()
  .fill(Color.blue)
  .frame(height: 44)

@Environment(\.colorScheme) private var colorScheme

UIColor to Color examples

When SwiftUI's built-in static colors are not enough, wrap UIKit or AppKit semantic colors directly:

// iOS / iPadOS backgrounds and labels
Color(uiColor: .systemBackground)
Color(uiColor: .label)
Color(uiColor: .secondaryLabel)

// macOS window and control surfaces
Color(nsColor: .windowBackgroundColor)
Color(nsColor: .controlAccentColor)
Color(nsColor: .labelColor)

Common cross-framework mappings for primary text:

SwiftUI	UIKit	AppKit
`Color.primary`	`UIColor.label`	`NSColor.labelColor`
`Color.secondary`	`UIColor.secondaryLabel`	`NSColor.secondaryLabelColor`
`Color(uiColor: .systemBackground)`	`UIColor.systemBackground`	`NSColor.windowBackgroundColor` (approximate role)