iOS-Systemfarben-Referenz

• Vollständige Referenz der iOS-18-Systemfarben: Durchsuchen Sie alle iOS-Systemfarben wie in Apples Human Interface Guidelines definiert - 13 semantische Systemfarben (Blau, Rot, Grün, Orange, Gelb, Pink, Violett, Indigo, Blaugrün, Minze, Cyan, Braun und Grau mit 6 Grauvarianten), 5 Text-/Beschriftungs-Betonungsstufen, 4 Füllopazitäten, 6 Hintergrundvarianten, 2 Trennlinienstile und Link-/Akzentfarben.
• Werte für hellen und dunklen Modus nebeneinander: Jede Farbe enthält HEX- und RGB-Werte für hellen und dunklen Modus. Der Umschalter hell/dunkel lässt Sie die Anzeige sofort wechseln, um zu sehen, wie sich die Farben zwischen Erscheinungsbildern anpassen. Mini-Farbfelder zeigen beide Varianten auf einen Blick für einen einfachen Vergleich.
• Suche und Filter nach Kategorie: Finden Sie jede iOS-Systemfarbe schnell durch Suche nach Name, HEX-Wert oder Kategorie. Filtern Sie nach 6 Kategorien - Systemfarben, Text & Beschriftung, Füllfarben, Hintergrundfarben, Trennlinienfarben und Link- & Akzentfarben. Kopieren Sie HEX oder RGB mit einem Klick.
• Ein-Klick-Kopieren für HEX & RGB: Jede Farbkarte enthält Kopieren-Schaltflächen sowohl für HEX- als auch RGB-Werte. Der kopierte Wert entspricht dem aktuell gewählten Themenmodus (hell oder dunkel), sodass Sie immer den richtigen Wert für Ihren Designkontext erhalten.

iOS-Systemfarben sind eine Reihe vordefinierter semantischer Farben, die in Apples Human Interface Guidelines (HIG) definiert sind. Sie bieten eine konsistente visuelle Sprache über alle iOS-Apps hinweg und sind so gestaltet, dass sie sowohl im hellen als auch im dunklen Modus nahtlos funktionieren. Statt beliebige Farbwerte für UI-Elemente zu verwenden, empfiehlt Apple die Nutzung von Systemfarben - sie passen sich automatisch an die Bedienungshilfen des Nutzers an (wie Kontrast erhöhen und Transparenz reduzieren) und sorgen für ein natives Aussehen und Gefühl.

iOS-Systemfarben sind in mehrere funktionale Gruppen organisiert, die jeweils einen bestimmten Zweck in der UI-Hierarchie erfüllen:

• Systemfarben - 13 semantische Farben (Rot, Orange, Gelb, Grün, Minze, Blaugrün, Cyan, Blau, Indigo, Violett, Pink, Braun, Grau) plus 6 Graustufenvarianten. Sie stehen für bestimmte semantische Bedeutungen - Rot für destruktive Aktionen, Grün für Erfolg, Blau für primäre Aktionen.
• Beschriftungsfarben - primäre, sekundäre, tertiäre und quaternäre Beschriftungsfarben, die eine klare Texthierarchie schaffen. Die primäre Beschriftung ist nahezu schwarz/weiß für Überschriften, während tertiäre und quaternäre zunehmend transparenter für Inhalte mit geringerer Betonung sind.
• Füllfarben - vier Füllfarben mit unterschiedlichen Opazitäten (von Systemfüllung bis quaternäre Füllung) für unterschiedliche Dicke von UI-Elementen. Leichtere Füllungen werden für dünne Elemente wie Schieberegler-Spuren verwendet, schwerere für große Hintergrundbereiche.
• Hintergrundfarben - System- und gruppierte Hintergrundfarben mit primären, sekundären und tertiären Varianten. Sie schaffen visuelle Hierarchie durch Oberflächentiefe.

Jede iOS-Systemfarbe hat unterschiedliche Werte für den hellen und den dunklen Modus. Das System wechselt automatisch zwischen diesen Werten, je nach Erscheinungsbild-Einstellung des Nutzers oder aktueller Lichtumgebung. Beispielsweise ist die Beschriftung im hellen Modus reines Schwarz (#000000) für maximalen Kontrast auf weißem Hintergrund und im dunklen Modus reines Weiß (#ffffff) für optimale Lesbarkeit auf dunklen Oberflächen. Einige Farben, wie Systemgrau (#8e8e93), bleiben in beiden Modi gleich, um Konsistenz zu gewährleisten. Unser Referenztool lässt Sie zwischen hellem und dunklem Modus wechseln, um zu sehen, wie sich jede Farbe anpasst.

Apple gestaltet alle HIG-Systemfarben so, dass sie die WCAG-2.1-AA-Kontrastanforderungen erfüllen, wenn sie gemäß den Richtlinien verwendet werden. Das vierstufige Beschriftungs-Opazitätssystem (primär → quaternär) stellt sicher, dass wichtigerer Text einen höheren Kontrast hat. Systemfarben funktionieren außerdem mit Bedienungshilfen wie Kontrast erhöhen (die Systemfarbwerte für noch größere Unterscheidbarkeit anpasst) und Transparenz reduzieren (die beeinflusst, wie Füll- und Trennlinienfarben dargestellt werden). Wenn Sie iOS-Apps entwickeln, bevorzugen Sie immer Systemfarben mit semantischer Bedeutung (wie UIColor.systemRed für destruktive Aktionen) gegenüber beliebigen Farbwerten - sie stellen sicher, dass Ihre App sich korrekt an alle Bedienungshilfen-Einstellungen und zukünftige iOS-Updates anpasst.