macOS Secondary System Fill
NSColor.secondarySystemFillComplete technical specification and developer reference for Secondary System Fill in Apple's macOS design system. In light appearance, it resolves to HEX rgba(0, 0, 0, 0.08); in dark appearance, it dynamically adapts to HEX rgba(255, 255, 255, 0.08). Features wide-gamut Display P3 values, UIKit bridge (UIColor.secondarySystemFill), AppKit bridge (NSColor.secondarySystemFill), WCAG contrast audit, and Xcode drop-in initializers.
A secondary fill color for controls and interface elements.
ColorNSColor.secondarySystemFillColor(red: 0.000, green: 0.000, blue: 0.000)Color(red: 0.000, green: 0.000, blue: 0.000, opacity: 0.08)Color(hue: 0.000, saturation: 0.000, brightness: 0.000, opacity: 0.08)Color(.displayP3, red: 0.000, green: 0.000, blue: 0.000, opacity: 0.08)Color(.sRGB, red: 0.000, green: 0.000, blue: 0.000, opacity: 0.08)Color(hex: "rgba(0, 0, 0, 0.08)")#colorLiteral(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.08)Color(uiColor: UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.08))Technical Color Specifications
Exact resolved HEX codes, sRGB 8-bit components, HSL, and normalized Swift floating-point decimals for Light and Dark modes.
| Color Metric / Space | Light Appearance | Dark Appearance | Swift Code Literal |
|---|---|---|---|
| HEX Code | rgba(0, 0, 0, 0.08) | rgba(255, 255, 255, 0.08) | Color(hex: "rgba(0, 0, 0, 0.08)") |
| sRGB (0–255) | rgba(0, 0, 0, 0.08) | rgba(255, 255, 255, 0.08) | (r: 0.000, g: 0.000, b: 0.000) |
| Display P3 (Wide Gamut) | P3 (0.000, 0.000, 0.000) | P3 (1.000, 1.000, 1.000) | Color(.displayP3, ...) |
| HSL / HSB | hsla(0, 0%, 0%, 0.08) | hsla(0, 0%, 100%, 0.08) | Color(hue:sat:bri:) |
| Platform Bridge | UIKit: UIColor.secondarySystemFill | AppKit: NSColor.secondarySystemFill | Color(uiColor:) / Color(nsColor:) |
Light Appearance
rgba(0, 0, 0, 0.08)rgba(0, 0, 0, 0.08)hsla(0, 0%, 0%, 0.08)(r: 0.000, g: 0.000, b: 0.000)Dark Appearance
rgba(255, 255, 255, 0.08)rgba(255, 255, 255, 0.08)hsla(0, 0%, 100%, 0.08)(r: 1.000, g: 1.000, b: 1.000)Drop-In Developer Snippets
Ready-to-paste code blocks for Xcode asset catalogs and Swift files.
Contents.json inside Assets.xcassets/Secondary System Fill.colorset/{
"colors": [
{
"color": {
"color-space": "srgb",
"components": {
"red": "0.000",
"green": "0.000",
"blue": "0.000",
"alpha": "0.080"
}
},
"idiom": "universal"
},
{
"appearances": [
{
"appearance": "luminosity",
"value": "dark"
}
],
"color": {
"color-space": "srgb",
"components": {
"red": "1.000",
"green": "1.000",
"blue": "1.000",
"alpha": "0.080"
}
},
"idiom": "universal"
}
],
"info": {
"author": "xcode",
"version": 1
}
}Live UI Component Sandbox
Preview Color.secondary system fill inside standard Apple interface components.
●SwiftUI Notification
Just nowDemonstrates how Apple designers pair system background tints with dynamic Secondary System Fill accents.
.foregroundStyle(NSColor.secondarySystemFill)
Platform Implementation Snippets
Ready-to-use Swift code for SwiftUI, UIKit, and AppKit applications.
// AppKit (macOS)
let button = NSButton()
button.contentTintColor = NSColor.secondarySystemFill
// Custom Layer Tint
let layer = CALayer()
layer.backgroundColor = NSColor.secondarySystemFill.cgColor
// Bridging AppKit into SwiftUI
let swiftUIColor = Color(nsColor: .secondarySystemFill)WCAG 2.1 Accessibility Contrast Audit
Contrast calculations of Secondary System Fill against pure white and iOS OLED dark surfaces.
Recommended HIG Use Cases
- Buttons, popups, and segmented controls
- Active selection rings and focus states
- Slider tracks and progress indicators
Anti-Patterns to Avoid
- Long-form document text
- Static non-interactive headers
Browse More macOS Colors
Quickly jump to other Apple system colors and semantic tokens.
Frequently Asked Questions
How do I use NSColor.secondarySystemFill in macOS AppKit apps?
In AppKit, assign NSColor.secondarySystemFill to NSView, NSTextField, or NSButton styling. In SwiftUI on macOS, bridge it using Color(nsColor: .secondarySystemFill).
What is the HEX code for macOS Secondary System Fill in light and dark mode?
In light appearance, Secondary System Fill resolves to rgba(0, 0, 0, 0.08). In dark appearance, it automatically adapts to rgba(255, 255, 255, 0.08).
How do I bridge NSColor.secondarySystemFill into SwiftUI?
In SwiftUI views on macOS, instantiate Color(nsColor: .secondarySystemFill) to access the native AppKit dynamic color token.
Does Secondary System Fill adapt to Dark Mode and vibrancy in macOS?
Yes, NSColor.secondarySystemFill is an appearance-aware NSColor that updates automatically when switching between light and dark modes or across vibrant desktop materials.
Why use AppKit system colors instead of hardcoded hex values?
NSColor system tokens adapt automatically to user accent color preferences, Dark Mode, and accessibility contrast settings.