Colors
Light mode • 104 tokens • Apple Human Interface Guidelines
System Colors
Dynamic system colors that automatically adapt to light and dark modes
Primary
Blue
#007AFF
Brown
#A2845E
Cyan
#32ADE6
Green
#34C759
Indigo
#5856D6
Mint
#00C7BE
Orange
#FF9500
Pink
#FF2D55
Purple
#AF52DE
Red
#FF3B30
Teal
#30B0C7
Yellow
#FFCC00
Grayscale
Gray
#8E8E93
Gray 2
#AEAEB2
Gray 3
#C7C7CC
Gray 4
#D1D1D6
Gray 5
#E5E5EA
Gray 6
#F2F2F7
Label Colors
Semantic colors for text hierarchy and labels
Text
Label
#000000
Secondary Label
#3C3C43
Tertiary Label
#3C3C43
Quaternary Label
#3C3C43
Fill Colors
Background fill colors for various UI elements
Fills
System Fill
#787880
Secondary Fill
#787880
Tertiary Fill
#767680
Quaternary Fill
#747480
Background Colors
System background colors for different contexts
Standard Backgrounds
System Background
#FFFFFF
Secondary System Background
#F2F2F7
Tertiary System Background
#FFFFFF
Grouped Backgrounds
System Grouped Background
#F2F2F7
Secondary Grouped Background
#FFFFFF
Tertiary Grouped Background
#F2F2F7
Separator Colors
Colors for dividers and separators
Separators
Separator
#3C3C43
Opaque Separator
#C6C6C8
Link & Interactive Colors
Colors for links, buttons, and interactive elements
Links
Link
#007AFF
Visited Link
#5856D6
Active Link
#0056B3
Selection
Selection
#007AFF
Accent
#007AFF
Cursor
#007AFF
Focus
Focus Ring
#007AFF
Focus Ring Outer
#007AFF
Accessible Colors
High contrast colors for improved accessibility (Increase Contrast mode)
Accessible System Colors
Accessible Blue
#0040DD
Accessible Green
#248A3D
Accessible Red
#D70015
Accessible Orange
#C93400
Accessible Yellow
#9F6900
Accessible Purple
#8944AB
Accessible Pink
#D30F45
Accessible Teal
#0071A4
Accessible Labels
Accessible Label
#000000
Accessible Secondary Label
#3C3C43
Chart & Data Visualization
Semantic colors for charts, graphs, and data visualization
Chart Colors
Chart Blue
#007AFF
Chart Green
#34C759
Chart Orange
#FF9500
Chart Red
#FF3B30
Chart Purple
#AF52DE
Chart Cyan
#32ADE6
Chart Pink
#FF2D55
Chart Indigo
#5856D6
Chart Teal
#30B0C7
Chart Yellow
#FFCC00
Activity Rings
Move Ring
#FA114F
Exercise Ring
#92E82A
Stand Ring
#1EEAEF
Platform-Specific Colors
Colors specific to individual Apple platforms
macOS
Window Background
#ECECEC
Sidebar Background
#F5F5F5
Under Page Background
#969696
Control Background
#FFFFFF
Selected Content Background
#0063E1
Unemphasized Selected Content
#DCDCDC
Find Highlight
#FFFF00
watchOS
Watch Black
#000000
Watch Green
#04DE71
Watch Blue
#32ADE6
Digital Crown
#04DE71
visionOS
Glass Background
#FFFFFF
Glass Specular
#FFFFFF
Spatial Blue
#007AFF
Focus Highlight
#FFFFFF
Hover State
#FFFFFF
tvOS
TV Background
#000000
TV Focused
#FFFFFF
TV Card
#1C1C1E
TV Shelf
#2C2C2E
Semantic UI Colors
Colors with specific semantic meanings in the UI
Status Colors
Success
#34C759
Warning
#FF9500
Error
#FF3B30
Info
#007AFF
Control States
Control Enabled
#007AFF
Control Disabled
#3C3C43
Control Pressed
#0056B3
Switch On
#34C759
Switch Off
#E9E9EB
Slider Track
#E9E9EB
Slider Fill
#007AFF
Progress Track
#E9E9EB
Progress Fill
#007AFF
Notification Colors
Badge
#FF3B30
Badge Text
#FFFFFF
Banner Info
#007AFF
Banner Success
#34C759
Banner Warning
#FF9500
Banner Error
#FF3B30