#ff453a
System Red
📱ios · system
Vibrant red used for destructive actions, delete buttons, and error states.
Apple HIG Color Reference
Browse all 104 Apple HIG system colors across all 5 platforms. Each color includes light and dark mode values with one-click copy.
Showing 104 of 104 Apple HIG colors(iOS: 36 · macOS: 26 · watchOS: 14 · tvOS: 13 · visionOS: 15)
Apple HIG · Updated for 2025
#ff9f0a
System Orange
📱ios · system
Warm orange used for medium-importance alerts and food/delivery app accents.
#ffd60a
System Yellow
📱ios · system
Bright yellow used for caution states, warnings, and attention-grabbing badges.
#30d158
System Green
📱ios · system
Fresh green used for success states, confirmed actions, and positive indicators.
#64d2ff
System Teal
📱ios · system
Blue-green used for informational elements, health/fitness app accents.
#66d4cf
System Mint
📱ios · system
Soft mint green used for wellness, finance apps, and subtle accents.
#64d2ff
System Cyan
📱ios · system
Bright cyan for tech-forward apps, media controls, and vibrant accents.
#0a84ff
System Blue
📱ios · system
Primary action blue used for links, selected states, and navigation controls.
#5e5ce6
System Indigo
📱ios · system
Deep purple-blue for creative apps, premium features, and distinctive accents.
#bf5af2
System Purple
📱ios · system
Rich purple used for entertainment apps, creative tools, and feature highlights.
#ff375f
System Pink
📱ios · system
Bright pink for social apps, lifestyle branding, and feminine accents.
#8e8e93
System Gray
📱ios · system
Neutral gray for secondary text, disabled states, and subtle UI elements.
#636366
System Gray 02
📱ios · system
Medium-light gray for tertiary content and inactive elements.
#48484a
System Gray 03
📱ios · system
Subtle gray for borders, dividers, and low-priority content.
#3a3a3c
System Gray 04
📱ios · system
Very light gray for subtle separators and background tints.
#2c2c2e
System Gray 05
📱ios · system
Ultra-light gray for the faintest separators and background differentiation.
#1c1c1e
System Gray 06
📱ios · system
Near-white gray for subtle section backgrounds in grouped views.
#ffffff
Label
📱ios · label
Primary text color for content and headings.
#ebebf599
Secondary Label
📱ios · label
Secondary text color for subtitles and supporting information.
#ebebf54c
Tertiary Label
📱ios · label
Tertiary text color for placeholder content and metadata.
#ebebf52d
Quaternary Label
📱ios · label
Lowest-emphasis text color for disabled labels and read-only content.
#ebebf54c
Placeholder Text
📱ios · label
Text field placeholder color for empty input hints.
#78788052
System Fill
📱ios · fill
Primary fill for thin UI elements like slider tracks and progress bars.
#78788047
Secondary Fill
📱ios · fill
Fill for medium-thickness elements like button backgrounds.
#7676803d
Tertiary Fill
📱ios · fill
Fill for thick elements like search bar backgrounds.
#7474802e
Quaternary Fill
📱ios · fill
Fill for large background area fills like table view backgrounds.
#000000
System Background
📱ios · background
Primary view background color for plain content views.
#1c1c1e
Secondary System Background
📱ios · background
Background for grouped content cells and secondary views.
#2c2c2e
Tertiary System Background
📱ios · background
Background for grouped table views and tertiary content areas.
#000000
Grouped Background
📱ios · background
Background for grouped table views and form sheets.
#1c1c1e
Secondary Grouped Background
📱ios · background
Secondary grouped background for cells in grouped tables.
#2c2c2e
Tertiary Grouped Background
📱ios · background
Tertiary grouped background for nested grouped content.
#545458
Separator
📱ios · separator
Default separator line for table rows and list dividers.
#38383a
Opaque Separator
📱ios · separator
Opaque separator for non-translucent views and dark backgrounds.
#0a84ff
Tint Color (Accent)
📱ios · link
App accent/tint color for interactive elements, toggle buttons, and controls.
#0a84ff
Link Color
📱ios · link
Default link color for tappable text links and hyperlinks.
#ff453a
System Red
💻macos · system
Red for destructive buttons, alerts, and stop indicators.
#ff9f0a
System Orange
💻macos · system
Orange for medium-importance warnings and accent elements.
#ffd60a
System Yellow
💻macos · system
Yellow for caution states and attention badges.
#30d158
System Green
💻macos · system
Green for success states and positive confirmations.
#64d2ff
System Teal
💻macos · system
Teal for informational elements and secondary accents.
#0a84ff
System Blue
💻macos · system
Blue for primary actions, selected items, and links.
#bf5af2
System Purple
💻macos · system
Purple for creative tools and feature highlights.
#ff375f
System Pink
💻macos · system
Pink for social and lifestyle app accents.
#98989d
System Gray
💻macos · system
Neutral gray for disabled states and secondary content.
#ffffff
Label
💻macos · label
Primary text color for content and headings.
#ebebf599
Secondary Label
💻macos · label
Secondary text for subtitles and supporting content.
#ebebf54c
Tertiary Label
💻macos · label
Tertiary text for placeholder and metadata.
#ebebf52d
Quaternary Label
💻macos · label
Lowest emphasis text for read-only and disabled labels.
#78788052
System Fill
💻macos · fill
Primary fill for thin UI elements.
#78788047
Secondary Fill
💻macos · fill
Fill for medium-thickness UI elements.
#7676803d
Tertiary Fill
💻macos · fill
Fill for thick UI element backgrounds.
#7474802e
Quaternary Fill
💻macos · fill
Fill for large background areas.
#000000
System Background
💻macos · background
Primary window background color.
#1c1c1e
Secondary Background
💻macos · background
Background for secondary content areas.
#2c2c2e
Tertiary Background
💻macos · background
Background for tertiary content areas.
#1e1e1e
Control Background
💻macos · background
Background for text fields and form controls.
#ffffff05
Scrollbar Track
💻macos · background
Background color for scrollbar tracks.
#545458
Separator
💻macos · separator
Default separator for table rows and list dividers.
#38383a
Opaque Separator
💻macos · separator
Opaque separator for non-translucent views.
#0a84ff
Control Accent
💻macos · link
System accent color for control tinting.
#0a84ff
Keyboard Focus
💻macos · link
Focus ring color for keyboard navigation.
#ff453a
System Red
⌚watchos · system
Red for destructive actions and error alerts.
#ff9f0a
System Orange
⌚watchos · system
Orange for medium warnings and fitness app accents.
#ffd60a
System Yellow
⌚watchos · system
Yellow for caution states and achievement badges.
#30d158
System Green
⌚watchos · system
Green for workout completions and success states.
#64d2ff
System Teal
⌚watchos · system
Teal for health metrics and informational accents.
#0a84ff
System Blue
⌚watchos · system
Blue for primary actions, activity rings, and connectivity.
#bf5af2
System Purple
⌚watchos · system
Purple for mindfulness features and creative accents.
#ff375f
System Pink
⌚watchos · system
Pink for wellness and heart rate related indicators.
#ffffff
Label
⌚watchos · label
Primary text on watchOS display.
#ebebf599
Secondary Label
⌚watchos · label
Secondary text for subtitles on watch.
#ebebf54c
Tertiary Label
⌚watchos · label
Tertiary text for metadata on watch.
#000000
System Background
⌚watchos · background
Primary watch face background.
#1c1c1e
Secondary Background
⌚watchos · background
Secondary content card backgrounds.
#0a84ff
Link Color
⌚watchos · link
Tint color for tappable elements on watchOS.
#ff453a
System Red
📺tvos · system
Red for destructive actions and error states on TV.
#ff9f0a
System Orange
📺tvos · system
Orange for medium-importance elements on TV.
#ffd60a
System Yellow
📺tvos · system
Yellow for caution states on TV interface.
#30d158
System Green
📺tvos · system
Green for success states and confirmations on TV.
#0a84ff
System Blue
📺tvos · system
Blue for focused items and primary actions on TV (focused state uses white/light overlay).
#bf5af2
System Purple
📺tvos · system
Purple for entertainment app accents on TV.
#ff375f
System Pink
📺tvos · system
Pink for media-focused accents on TV.
#ffffff
Label
📺tvos · label
Primary text color for TV interface.
#ebebf599
Secondary Label
📺tvos · label
Secondary text for subtitles on TV.
#000000
System Background
📺tvos · background
Primary background for TV content views.
#1c1c1e
Secondary Background
📺tvos · background
Secondary card backgrounds on TV.
#ffffff
Focus Color
📺tvos · link
Highlight color for focused items on tvOS (parallax/lighting effect).
#0a84ff
Link Color
📺tvos · link
Tint color for interactive elements on TV.
#ff453a
System Red
🥽visionos · system
Red for destructive actions in spatial computing.
#ff9f0a
System Orange
🥽visionos · system
Orange for medium-importance spatial UI elements.
#ffd60a
System Yellow
🥽visionos · system
Yellow for caution states in spatial apps.
#30d158
System Green
🥽visionos · system
Green for success states in spatial computing.
#0a84ff
System Blue
🥽visionos · system
Blue for primary actions and spatial UI controls.
#bf5af2
System Purple
🥽visionos · system
Purple for creative spatial app accents.
#ff375f
System Pink
🥽visionos · system
Pink for social and lifestyle spatial UI accents.
#ffffff
Label
🥽visionos · label
Primary text in spatial computing environment.
#ebebf599
Secondary Label
🥽visionos · label
Secondary text for spatial UI subtitles.
#ebebf54c
Tertiary Label
🥽visionos · label
Tertiary text for spatial UI metadata.
#000000
System Background
🥽visionos · background
Primary background for windows and views in spatial computing.
#1c1c1e
Secondary Background
🥽visionos · background
Secondary content area background for spatial UI.
#ffffff0d
Glass Background
🥽visionos · background
Translucent glass material background for visionOS windows.
#0a84ff
Link Color
🥽visionos · link
Tint color for interactive elements in spatial computing.
#0a84ff
Tint Color
🥽visionos · link
App tint/accent color for visionOS UI controls.
Merkmale
- Sofortige Referenz: Durchsuchen Sie sofort alle Apple-Systemfarben in iOS, macOS, watchOS, tvOS und visionOS. Es sind keine Serveranfragen erforderlich – alles läuft in Ihrem Browser.
- Werte für den Hell- und Dunkelmodus: Jede Farbe enthält sowohl HEX-Werte für den Hell- als auch den Dunkelmodus, wie in Apples HIG definiert. Wechseln Sie zwischen den Modi, um zu sehen, wie sich die Farben an das jeweilige Erscheinungsbild anpassen.
- Privacy-First & Offline: Alle Farbdaten werden auf der Seite gebündelt – keine externen API-Aufrufe, kein Tracking, keine Daten verlassen Ihren Browser. Funktioniert nach dem ersten Laden vollständig offline.
- Immer kostenlos: Keine Anmeldung, kein Abonnement, keine versteckten Limits. Diese Apple HIG-Farbreferenz ist und bleibt für alle Entwickler und Designer kostenlos.
Anwendungsfälle
- iOS- und iPadOS-App-Entwicklung: Finden Sie schnell die richtigen Systemfarben für iOS-App-UI-Elemente – von Navigationsleisten und Tab-Leisten bis hin zu Warnungen und Aktivitätsansichten – und stellen Sie sicher, dass Ihre App den HIG-Richtlinien von Apple entspricht.
- Design-Token-Migration: Wenn Sie Designsysteme auf Apple-Plattformen migrieren, verwenden Sie diese Referenz, um Ihre benutzerdefinierten Farbtokens den Farben des Apple HIG-Systems mit genauen Hell- und Dunkelmoduswerten zuzuordnen.
- Designsystem-Audit: Prüfen Sie Ihr Figma- oder Sketch-Designsystem anhand der offiziellen HIG-Farben von Apple. Stellen Sie sicher, dass Ihre Komponentenbibliothek die richtigen Systemfarben für Beschriftungen, Füllungen und Hintergründe verwendet.
- Entwicklung von macOS-Apps: Stellen Sie sicher, dass Ihre Mac-Apps die richtigen Systemfarben für Fenster, Bedienfelder und Steuerelemente verwenden. Querverweisfarben zwischen macOS und iOS für universelle App-Kompatibilität.
- Plattformübergreifendes Design: Entwerfen Sie konsistente Erlebnisse auf iPhone, iPad, Mac, Apple Watch, Apple TV und Apple Vision Pro, indem Sie auf die genauen HIG-Farbwerte für jede Plattform verweisen.
- Web- und Designausbildung: Lernen Sie das Farbsystem von Apple kennen, indem Sie untersuchen, wie semantische Farben (Rot, Blau, Grün, Grau usw.) plattformübergreifend mit spezifischen Anpassungen des Hell- und Dunkelmodus definiert werden.
Häufig gestellte Fragen
Apple HIG-Systemfarben sind eine Reihe vordefinierter semantischer Farben, die in den Human Interface Guidelines von Apple definiert sind. Dazu gehören Systemfarben (Rot, Blau, Grün, Orange usw.), Text-/Beschriftungsfarben, Füllfarben, Hintergrundfarben, Trennfarben und Linkfarben. Diese Farben sind so konzipiert, dass sie auf allen Apple-Plattformen funktionieren und sich automatisch zwischen Hell- und Dunkelmodus anpassen.
Verwenden Sie in SwiftUI Farben wie „Color.red“, „Color.blue“ oder semantische Farben wie „Color(.label)“, „Color(.systemBackground)“. Verwenden Sie in UIKit/AppKit „UIColor.systemRed“, „UIColor.label“, „UIColor.systemBackground“. Für plattformübergreifende Kompatibilität verwenden Sie „Color(.systemRed)“, das sich automatisch an die aktuelle Plattform und den Darstellungsmodus anpasst.
Apple passt die Systemfarbwerte je nach Plattform an, um unterschiedliche Anzeigetechnologien, Betrachtungsabstände und Umgebungslichtbedingungen zu berücksichtigen. Beispielsweise sind iOS-Farben für die helle Betrachtung aus nächster Nähe auf OLED-/LCD-Bildschirmen optimiert, während tvOS-Farben für dunklere Wohnzimmerumgebungen bei der Betrachtung aus der Ferne auf größeren Bildschirmen konzipiert sind.
Ja, Apple entwirft alle HIG-Systemfarben so, dass sie den Kontrastanforderungen von WCAG 2.1 AA entsprechen, wenn sie gemäß den Richtlinien verwendet werden. Die Beschriftungs- und Textfarben sind speziell darauf ausgelegt, sowohl im hellen als auch im dunklen Modus einen ausreichenden Kontrast zu den entsprechenden Hintergrundfarben zu bieten. Überprüfen Sie immer die Kontrastverhältnisse für Ihren spezifischen Anwendungsfall.
Ja, jede Apple HIG-Farbe in dieser Referenz enthält sowohl HEX-Werte für den Hellmodus als auch für den Dunkelmodus. Wenn Sie die Systemfarben von Apple in Ihrem Code verwenden (z. B. „UIColor.systemBackground“), wechseln sie basierend auf der Systemdarstellungseinstellung des Benutzers automatisch zwischen ihrer hellen und dunklen Variante.
Apple aktualisiert HIG-Farben normalerweise mit wichtigen Betriebssystemversionen (iOS, macOS, watchOS, tvOS, visionOS). Es können neue Systemfarben hinzugefügt und bestehende Farben verfeinert werden. Diese Referenz wird aktualisiert, um die neuesten verfügbaren Werte widerzuspiegeln. Die aktuellsten Werte finden Sie immer in der offiziellen Apple HIG-Dokumentation.
Ja, Sie können diese HEX-Werte in Webprojekten verwenden, insbesondere wenn Sie eine Web-App erstellen, die auf Apple-Geräten nativ wirkt. Diese Farben sind jedoch für native Plattformen konzipiert und wechseln im Web ohne benutzerdefiniertes CSS möglicherweise nicht automatisch zwischen Hell- und Dunkelmodus. Verwenden Sie benutzerdefinierte CSS-Eigenschaften mit der Medienabfrage „prefers-color-scheme“ für die Unterstützung des Dunkelmodus.
visionOS führt eine einzigartige Designsprache ein, die auf Glasmaterialien, Tiefe und Lichtdurchlässigkeit basiert. Die in dieser Referenz aufgeführte Glashintergrundfarbe stellt den Grundton des Glasmaterialeffekts dar. In der Praxis passt visionOS das Erscheinungsbild des Glases dynamisch an die Beleuchtung, die Umgebung und den Inhalt hinter dem Fenster an – der aufgeführte Wert ist ein Näherungswert.